diff options
| author | itsGarrin <garrin.shieh@gmail.com> | 2024-07-02 13:01:08 -0700 |
|---|---|---|
| committer | itsGarrin <garrin.shieh@gmail.com> | 2024-07-02 13:01:08 -0700 |
| commit | 80cfb271b27bceb9e357d77d34449cd368d72240 (patch) | |
| tree | 0220627916debfd68afb39a1fa62a1f3a47c70ce /dashboard_website/templates | |
| parent | 9cbf1fe52bd33b122c6eff81d34b081ed25f8c1b (diff) | |
reformatted code
Diffstat (limited to 'dashboard_website/templates')
| -rw-r--r-- | dashboard_website/templates/controls.html | 26 | ||||
| -rw-r--r-- | dashboard_website/templates/index.html | 339 |
2 files changed, 200 insertions, 165 deletions
diff --git a/dashboard_website/templates/controls.html b/dashboard_website/templates/controls.html index 253e6c7..97b3b06 100644 --- a/dashboard_website/templates/controls.html +++ b/dashboard_website/templates/controls.html @@ -9,18 +9,20 @@ </head> <body> - <a href="..">Back</a> <br> - <button onclick="downloadCurrent()">Download Current Savefile (.CSV)</button> <br> - <form id="dirty" name="dirty"> - <label for="dirtyfile">Choose dirty clue list to upload</label> - <input id="dirtyfile" name="dirtyfile" type="file" accept=".csv,.CSV" /> - <button type="button" onclick="loadDirty()">Upload</button> - </form> <br> - <form id="clean" name="clean"> - <label for="cleanfile">Choose save file to upload (will overwrite)</label> - <input id="cleanfile" name="cleanfile" type="file" accept=".csv,.CSV" /> - <button type="button" onclick="loadSave()">Upload</button> - </form> +<a href="..">Back</a> <br> +<button onclick="downloadCurrent()">Download Current Savefile (.CSV)</button> +<br> +<form id="dirty" name="dirty"> + <label for="dirtyfile">Choose dirty clue list to upload</label> + <input id="dirtyfile" name="dirtyfile" type="file" accept=".csv,.CSV"/> + <button type="button" onclick="loadDirty()">Upload</button> +</form> +<br> +<form id="clean" name="clean"> + <label for="cleanfile">Choose save file to upload (will overwrite)</label> + <input id="cleanfile" name="cleanfile" type="file" accept=".csv,.CSV"/> + <button type="button" onclick="loadSave()">Upload</button> +</form> </body> </html>
\ No newline at end of file diff --git a/dashboard_website/templates/index.html b/dashboard_website/templates/index.html index d4f8196..68a85be 100644 --- a/dashboard_website/templates/index.html +++ b/dashboard_website/templates/index.html @@ -6,174 +6,207 @@ <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=""/> + 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> + 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/dashboard.js') }}"></script> </head> <body style="height:100%"> - <style> - #map { height: 100%; } - * { - box-sizing: border-box; - } - html{ - padding:0; - margin: 0; - height:100%; - } - - body{ - padding:0; - margin: 0; - height:100%; - } - .page-container { - - display: flex; - - - background-color: black; - height: 100%; - gap: 5px; - height:100%; - padding:10px; - - } - .page-container > div{ - padding: 8px; - } - - - .left-column { - /* flex:0.75 1 auto; */ - flex-grow:0; - flex-basis:75em; - display: flex; - flex-direction: column; - gap: 5px; - } - .left-column > div{ - background: black; - border: 3px double lightgray; - padding: 0px; - } - .page-title { - /* flex:0.2 1 auto; */ - flex-grow:0.03; - display: flex; - align-items: center; - } - .map-frame { - /* flex:0.2 1 auto; */ - flex-grow:1.0; - } - .route-controls { - /* flex:0.6 1 auto; */ - height:15%; - display: flex; - flex-direction: column; - } - - .right-column { - /* flex:0.25 1 auto; */ - flex-grow:0; - flex-basis:35em; - display: flex; - flex-direction: column; - gap: 5px; - } - .right-column > div{ - background: black; - border: 3px double lightgray; - padding: 0px; - } - .clue-stats { - /* flex:0.2 1 auto; */ - flex-grow:0.05; - display: flex; - flex-direction: column; - } - .bike-teams { - /* flex:0.2 1 auto; */ - flex-grow:0.35; - display: flex; - flex-direction: column; - align-content:stretch; - } - .add-clue { - /* flex:0.6 1 auto; */ - flex-grow:0.6; - display: flex; - flex-direction: column; - } - - .leaflet-popup-content { - color: black; - } - .leaflet-control-layers-overlays > label > span > span { - color: black; - } - .leaflet-bike-marker { - transition: all 5s; - } - input { - color: black; - } - button { - color: black; - } - - </style> - - <div class="page-container"> - - <div class="left-column"> - <div class="page-title"> - <h1 style="color:white;margin: 0px;margin-left:15px">CLUBHOUSE HQ | <span id="titletime" style="color:lightgray"></span></h1> +<style> + #map { height: 100%; } + * { + box-sizing: border-box; + } + html{ + padding:0; + margin: 0; + height:100%; + } + + body{ + padding:0; + margin: 0; + height:100%; + } + .page-container { + + display: flex; + + + background-color: black; + height: 100%; + gap: 5px; + height:100%; + padding:10px; + + } + .page-container > div{ + padding: 8px; + } + + + .left-column { + /* flex:0.75 1 auto; */ + flex-grow:0; + flex-basis:75em; + display: flex; + flex-direction: column; + gap: 5px; + } + .left-column > div{ + background: black; + border: 3px double lightgray; + padding: 0px; + } + .page-title { + /* flex:0.2 1 auto; */ + flex-grow:0.03; + display: flex; + align-items: center; + } + .map-frame { + /* flex:0.2 1 auto; */ + flex-grow:1.0; + } + .route-controls { + /* flex:0.6 1 auto; */ + height:15%; + display: flex; + flex-direction: column; + } + + .right-column { + /* flex:0.25 1 auto; */ + flex-grow:0; + flex-basis:35em; + display: flex; + flex-direction: column; + gap: 5px; + } + .right-column > div{ + background: black; + border: 3px double lightgray; + padding: 0px; + } + .clue-stats { + /* flex:0.2 1 auto; */ + flex-grow:0.05; + display: flex; + flex-direction: column; + } + .bike-teams { + /* flex:0.2 1 auto; */ + flex-grow:0.35; + display: flex; + flex-direction: column; + align-content:stretch; + } + .add-clue { + /* flex:0.6 1 auto; */ + flex-grow:0.6; + display: flex; + flex-direction: column; + } + + .leaflet-popup-content { + color: black; + } + .leaflet-control-layers-overlays > label > span > span { + color: black; + } + .leaflet-bike-marker { + transition: all 5s; + } + input { + color: black; + } + button { + color: black; + } + +</style> + +<div class="page-container"> + + <div class="left-column"> + <div class="page-title"> + <h1 style="color:white;margin: 0px;margin-left:15px">CLUBHOUSE HQ | <span id="titletime" + style="color:lightgray"></span> + </h1> + </div> + <div class="map-frame"> + <div id="map"></div> + </div> + <div class="route-controls"> + <span style="margin:-1px;margin-left:5px;margin-top:5px;" id="routeinfo">ROUTE INFO</span> + <hr style="width:100%;padding:0px;"/> + <!--<input type="time" id="endtime" value="18:30">--> + </div> + </div> + <div class="right-column"> + <div class="clue-stats"> + <span style="margin:-1px;margin-left:5px;margin-top:5px;">CLUE STATS</span> + <hr style="width:100%;padding:0px;"/> + <div style="margin:0px;margin-left:5px;display:flex;flex-direction:row"><span id="total_count" + style="margin-right:5px;">XX</span><span>total clues (</span><span + id="unvisited_count" style="margin-right:5px;">XX</span><span>unvisited)</span></div> + <div style="margin:0px;margin-left:5px;display:flex;flex-direction:row;"><span id="visited_count" + style="margin-right:5px;">XX</span><span>visited clues (</span><span + id="percent_visited">XX</span><span>%)</span></div> + <div style="margin:0px;margin-left:5px;display:flex;flex-direction:row"> + <span>Average visited distance: </span><span id="avg_visited_distance" style="margin-left:5px">XX</span><span>(mi)</span> </div> - <div class="map-frame"> - <div id="map"></div> + </div> + <div class="bike-teams"> + <span style="margin:-1px;margin-left:5px;margin-top:5px;">BIKE TEAMS</span> + <hr style="width:100%;padding:0px;"/> + <table id="bike-teams-table" style="width:100%"> + </table> + </div> + <div class="add-clue"> + <span style="margin:-1px;margin-left:5px;margin-top:5px;">ADD CLUE</span> + <hr style="width:100%;padding:0px;"/> + <div style="margin:5px;display:flex;flex-direction:row"><span>Clue Name: </span> <input type="input" + id="new_clue_name" + style="flex:1;" + placeholder="e.g., C34"/> </div> - <div class="route-controls"> - <span style="margin:-1px;margin-left:5px;margin-top:5px;" id="routeinfo">ROUTE INFO</span> - <hr style="width:100%;padding:0px;"/> - <!--<input type="time" id="endtime" value="18:30">--> + <div style="margin:5px;display:flex;flex-direction:row"><span>Clue Information: </span> <input type="input" + id="new_clue_info" + style="flex:1;" + placeholder="e.g., Savenor's Butcher"/> </div> - </div> - <div class="right-column"> - <div class="clue-stats"> - <span style="margin:-1px;margin-left:5px;margin-top:5px;">CLUE STATS</span> - <hr style="width:100%;padding:0px;"/> - <div style="margin:0px;margin-left:5px;display:flex;flex-direction:row"><span id="total_count" style="margin-right:5px;">XX</span><span>total clues (</span><span id="unvisited_count" style="margin-right:5px;">XX</span><span>unvisited)</span></div> - <div style="margin:0px;margin-left:5px;display:flex;flex-direction:row;"><span id="visited_count" style="margin-right:5px;">XX</span><span>visited clues (</span><span id="percent_visited">XX</span><span>%)</span></div> - <div style="margin:0px;margin-left:5px;display:flex;flex-direction:row"><span>Average visited distance: </span><span id="avg_visited_distance" style="margin-left:5px">XX</span><span>(mi)</span></div> + <div style="margin:5px;display:flex;flex-direction:row"><span>Longitude: </span> <input autocomplete=off + type="input" + onchange="previewZoom()" + onkeyup="previewZoom()" + id="new_clue_longitude" + style="flex:1;" + placeholder="e.g., -71.0688746"/> </div> - <div class="bike-teams"> - <span style="margin:-1px;margin-left:5px;margin-top:5px;">BIKE TEAMS</span> - <hr style="width:100%;padding:0px;"/> - <table id="bike-teams-table" style="width:100%"> - </table> + <div style="margin:5px;display:flex;flex-direction:row"><span>Latitude: </span> <input autocomplete=off + type="input" + onchange="previewZoom()" + onkeyup="previewZoom()" + id="new_clue_latitude" + style="flex:1;" + placeholder="e.g., 40.3587273"/> </div> - <div class="add-clue"> - <span style="margin:-1px;margin-left:5px;margin-top:5px;">ADD CLUE</span> - <hr style="width:100%;padding:0px;"/> - <div style="margin:5px;display:flex;flex-direction:row"> <span>Clue Name: </span> <input type="input" id="new_clue_name" style="flex:1;" placeholder="e.g., C34"/></div> - <div style="margin:5px;display:flex;flex-direction:row"> <span>Clue Information: </span> <input type="input" id="new_clue_info" style="flex:1;" placeholder="e.g., Savenor's Butcher"/></div> - <div style="margin:5px;display:flex;flex-direction:row"> <span>Longitude: </span> <input autocomplete=off type="input" onchange="previewZoom()" onkeyup="previewZoom()" id="new_clue_longitude" style="flex:1;" placeholder="e.g., -71.0688746"/></div> - <div style="margin:5px;display:flex;flex-direction:row"> <span>Latitude: </span> <input autocomplete=off type="input" onchange="previewZoom()" onkeyup="previewZoom()" id="new_clue_latitude" style="flex:1;" placeholder="e.g., 40.3587273"/></div> - <div id="previewmap" style="height:70%; margin:5px;"></div> - <div style="margin:5px;display:flex;flex-direction:row; justify-content: center;"> <button onclick="addClue()">Submit</button> <button>Clear</button></div> + <div id="previewmap" style="height:70%; margin:5px;"></div> + <div style="margin:5px;display:flex;flex-direction:row; justify-content: center;"> + <button onclick="addClue()">Submit</button> + <button>Clear</button> </div> </div> - - </div> + </div> + +</div> </body> </html>
\ No newline at end of file |
