diff options
| author | Anson Bridges <bridges.anson@gmail.com> | 2023-11-07 03:38:00 -0500 |
|---|---|---|
| committer | Anson Bridges <bridges.anson@gmail.com> | 2023-11-07 03:38:00 -0500 |
| commit | 2cae9c97591b626d4af31739ae0036f0a015122d (patch) | |
| tree | 995833077273487854960b5078bf7dcb9ecd48d3 /dashboard_website/templates | |
| parent | 9093ffdb4f8fcb16e593c9c0ba3ca9f0e68631b7 (diff) | |
bike display, animation, add clue UX
Diffstat (limited to 'dashboard_website/templates')
| -rw-r--r-- | dashboard_website/templates/index.html | 36 |
1 files changed, 22 insertions, 14 deletions
diff --git a/dashboard_website/templates/index.html b/dashboard_website/templates/index.html index 1e4a113..c166765 100644 --- a/dashboard_website/templates/index.html +++ b/dashboard_website/templates/index.html @@ -2,6 +2,9 @@ <html style="height:100%"> <head> + <title>MMHC HQ</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=""/> @@ -10,12 +13,8 @@ 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> - <script> - var homebase = JSON.parse('{{ homebase | tojson | safe}}'); - var bikes = JSON.parse('{{ bikes | tojson | safe}}'); - var clues = JSON.parse('{{ clues | tojson | safe}}'); - </script> </head> <body style="height:100%"> @@ -97,15 +96,16 @@ } .clue-stats { /* flex:0.2 1 auto; */ - flex-grow:0.2; + flex-grow:0.05; display: flex; flex-direction: column; } .bike-teams { /* flex:0.2 1 auto; */ - flex-grow:0.2; + flex-grow:0.35; display: flex; flex-direction: column; + align-content:stretch; } .add-clue { /* flex:0.6 1 auto; */ @@ -120,6 +120,9 @@ .leaflet-control-layers-overlays > label > span > span { color: black; } + .leaflet-bike-marker { + transition: all 5s; + } input { color: black; } @@ -140,27 +143,32 @@ </div> <div class="route-controls"> <span style="margin:-1px;margin-left:5px;margin-top:5px;">ROUTE CONTROLS</span> - <hr style="width:100%;padding:0px;"> + <hr style="width:100%;padding:0px;"/> </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;"> + <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> <div class="bike-teams"> <span style="margin:-1px;margin-left:5px;margin-top:5px;">BIKE TEAMS</span> - <hr style="width:100%;padding:0px;"> + <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;"> + <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 type="input" 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 type="input" id="new_clue_latitude" style="flex:1;" placeholder="e.g., 40.3587273"/></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>Submit</button> <button>Clear</button></div> + <div style="margin:5px;display:flex;flex-direction:row; justify-content: center;"> <button onclick="addClue()">Submit</button> <button>Clear</button></div> </div> </div> |