diff options
| author | Anson Bridges <bridges.anson@gmail.com> | 2023-11-06 22:21:33 -0500 |
|---|---|---|
| committer | Anson Bridges <bridges.anson@gmail.com> | 2023-11-06 22:21:33 -0500 |
| commit | 5e432d44568b5ec6c39c07718fcabe924f7e4bed (patch) | |
| tree | 40a671373c96de009aa07058459fdb609ab4c828 /dashboard_website/templates/index.html | |
| parent | 40b98201e2fcff22e8781ed747c4f3ffa509696a (diff) | |
Dashboard progress: layout, map, route drawing
Diffstat (limited to 'dashboard_website/templates/index.html')
| -rw-r--r-- | dashboard_website/templates/index.html | 161 |
1 files changed, 156 insertions, 5 deletions
diff --git a/dashboard_website/templates/index.html b/dashboard_website/templates/index.html index ab90904..1e4a113 100644 --- a/dashboard_website/templates/index.html +++ b/dashboard_website/templates/index.html @@ -1,19 +1,170 @@ <!DOCTYPE html> -<html> +<html style="height:100%"> <head> <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/leaflet_mods.css') }}"/> + <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="{{ url_for('static', filename='js/map.js') }}"></script> + <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.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> - <div id="map"></div> +<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; */ + flex-grow:0.15; + display: flex; + flex-direction: column; + } + + .right-column { + /* flex:0.25 1 auto; */ + flex-grow:0; + flex-basis:25em; + 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.2; + display: flex; + flex-direction: column; + } + .bike-teams { + /* flex:0.2 1 auto; */ + flex-grow:0.2; + display: flex; + flex-direction: column; + } + .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; + } + 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</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;">ROUTE CONTROLS</span> + <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;"> + </div> + <div class="bike-teams"> + <span style="margin:-1px;margin-left:5px;margin-top:5px;">BIKE TEAMS</span> + <hr style="width:100%;padding:0px;"> + </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 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 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> + </div> + + </div> </body> </html>
\ No newline at end of file |