1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
<!DOCTYPE html>
<html style="height:100%">
<head>
<title>Photocosm - Editor</title>
<link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">
<link rel="stylesheet" href="{{ url_for('static', filename='css/leaflet.css') }}"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}"/>
<script src="{{ url_for('static', filename='js/leaflet.js') }}"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.js"></script>
<!-- <script src="{{ url_for('static', filename='js/utils.js') }}"></script> -->
<script src="{{ url_for('static', filename='js/editor.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/navbar.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/editor.css') }}">
</head>
<body>
<div onclick="close_media_preview()" id="media-preview-modal" class="modal">
<img class="modal-content" id="modal-img">
<video class="modal-content" id="modal-video"></video>
</div>
<div id="share-modal" class="modal">
<div id="share-box" class="share-box">
<p style="margin-top:5px; margin-bottom:5px; margin-left:10px;">Sharing options</p>
<hr style="width: 100%; border-top: 3px double lightgray; margin:0;">
<div>
<label style="margin-left: 10px" for="visibility-dropdown">Visibility: </label>
<select onchange="update_visibility()" id="visibility-dropdown">
<option value="public">Public</option>
<option value="private">Private</option>
</select>
</div>
<div class="user-share-section " id="shared-users">
<!-- shared users -->
</div>
<div style="margin:10px; display:flex; flex-direction:row; padding:10px;">
<input style="flex:1; margin-right:10px;" id="share-email" placeholder="<user@email.com>">
<select style="margin-right:10px;" id="share-permissions">
<option value="viewer">Viewer</option>
<option value="editor">Editor</option>
</select>
<button onclick="add_shared_user()">Share</button>
</div>
</div>
</div>
<div id="collection-modal" class="modal">
<div id="collection-box" class="collection-box">
<p style="margin-top:5px; margin-bottom:5px; margin-left:10px;">Collection options</p>
<hr style="width: 100%; border-top: 3px double lightgray; margin:0">
<div style="display:grid; grid-template-columns: 30% 70%; margin:15px">
<label for="collection-title-field">Title: </label> <input onblur="collection_info_updated('title')" id="collection-title-field">
<label for="collection-subtitle-field">Subtitle: </label> <input onblur="collection_info_updated('subtitle')" id="collection-subtitle-field">
<label for="collection-info-field">Information: </label> <input onblur="collection_info_updated('info')" id="collection-info-field">
</div>
</div>
</div>
<p style="display:none" id="collection_id">{{ collection_id }}</p>
<div class="topnav">
<a onclick="open_collection_modal()" class="collection-title" id="collection-title"></a>
<a onclick="open_share_modal()">Share</a>
<a href="/viewer?collection={{ collection_id }}">Viewer</a>
<a class="split" href="/">Home</a>
</div>
<div class="page-container">
<div class="left-column">
<div class="tab-section">
<div class="tab-header">
<button class="tab active" onclick="set_tab(event, 'media_tab')">Media</button>
<button class="tab" onclick="set_tab(event, 'text_tab')">Text</button>
<button class="tab" onclick="set_tab(event, 'routes_tab')">Routes</button>
</div>
<div id="media_tab" class="tab-content" style="display:flex; flex-direction:column">
<div class="tab-filters" id="media-filters">
<input type="file" id="media_upload" style="display:none" accept=".JPG,.PNG,.JPEG,.HEIC,.HEIF,.MOV,.MP4,.WEBM" onchange="upload_media_files();" multiple/>
<label for="media_upload"><a style="text-decoration:underline; cursor:pointer;">Upload Media</a></label>
<label style="margin-left:15px;" for="sort-type">Sort by: </label>
<select onchange="update_media_grid()" id="sort-type">
<option value="none">None</option>
<option value="name">Name</option>
<option value="timestamp">Date/time</option>
<option value="id">Filename</option>
</select>
<button id="sort-direction-media" onclick="toggle_sort_direction('media')">Ascending</button>
<label style="margin-left:15px;" for="hide-location">Hide media with location: </label>
<input onchange="update_media_grid()" id="hide-location" type="checkbox">
<label style="margin-left:15px;" for="hide-timestamp">Hide media with timestamp: </label>
<input onchange="update_media_grid()" id="hide-timestamp" type="checkbox">
</div>
<div style="overflow:auto; flex-grow:1">
<div class="media-grid" id="media_grid"></div>
</div>
</div>
<div id="text_tab" class="tab-content" style="display:flex; flex-direction:column">
<div class="tab-filters">
<button id="add-note">Add Note</button>
<label for="sort-notes">Sort by:</label>
<select onchange="update_media_grid()" id="sort-type">
<option value="none">None</option>
<option value="name">Name</option>
<option value="timestamp">Date/time</option>
</select>
<button id="sort-direction-media" onclick="toggle_sort_direction('media')">Ascending</button>
</div>
</div>
<div id="routes_tab" class="tab-content">Not yet supported.</div>
</div>
<div class="media-preview" id="media-preview">
<img id="preview-img" onclick="open_media_preview()" style="object-fit: contain; max-width:100%; max-height:100%; position: relative; height: 60vh; width: auto;">
<video type="video/mp4" id="preview-video" style="object-fit: contain; max-width:100%; max-height:100%; position: relative; height: 60vh; width: auto;" controls></video>
</div>
</div>
<div class="right-column">
<div class="map-frame">
<div id="map"></div>
</div>
<div id="content_info" class="content-info" style="display:none">
<div id="media-content" class="content-info-edit">
<span style="font-weight: bold; margin-left: 10px; margin-top:5px;">Edit Media</span> <a class="delete-button" onclick="delete_media()">Delete</a>
<hr style="grid-column: 1 / 3; width: 100%; margin: 0;">
<label class="content-info-edit-label" for="media_name">Name:</label>
<input onblur="submit_edit_changes()" onchange="mark_info_change('name')" class="content-info-edit-field" type="text" id="media_name" autocomplete="off">
<label class="content-info-edit-label" for="media_id">Filename:</label>
<input class="content-info-edit-field" type="text" id="media_id" disabled autocomplete="off">
<label class="content-info-edit-label" for="media_timestamp">Date/time:</label>
<input onblur="submit_edit_changes()" onchange="mark_info_change('timestamp')" class="content-info-edit-field" type="datetime-local" id="media_timestamp" autocomplete="off">
<span class="content-info-edit-label">Location:</span>
<div style="display: flex; align-items: center; gap: 8px;">
<span id="media_coords">No location given!</span>
<button onclick="picker_clicked()" style="padding: 2px;">
<img src="static/img/picker.png" width="20px" height="20px">
</button>
</div>
<label class="content-info-edit-label" for="media_info">Information:</label>
<textarea onblur="submit_edit_changes()" onchange="mark_info_change('info')" class="content-info-edit-field" id="media_info" style="min-height: 60px; resize:none;"></textarea>
</div>
</div>
</div>
</div>
</body>
</html>
|
