Break apart sync into parts more like public-reports
I like this layout makes it easier to track what functions do what and keeps templates near their render functions.
This commit is contained in:
parent
96c144ca74
commit
cf06bb9f49
9 changed files with 919 additions and 713 deletions
174
sync/template/district.html
Normal file
174
sync/template/district.html
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
{{template "authenticated.html" .}}
|
||||
|
||||
{{define "title"}}Dash{{end}}
|
||||
{{define "extraheader"}}
|
||||
<script src='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js'></script>
|
||||
<link href='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.css' rel='stylesheet' />
|
||||
<script>
|
||||
function onLoad() {
|
||||
console.log("Setting up the map...");
|
||||
mapboxgl.accessToken = {{ .MapData.MapboxToken }};
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map', // container ID
|
||||
style: 'mapbox://styles/mapbox/standard', // style URL
|
||||
center: [-119.3, 36.327], // starting position [lng, lat]
|
||||
//center: [7.01, 50.74],
|
||||
zoom: 9 // starting zoom
|
||||
});
|
||||
map.on("load", function() {
|
||||
console.log("Map post-load...");
|
||||
map.addSource('tegola-bonn', {
|
||||
'type': 'vector',
|
||||
'tiles': [
|
||||
//'https://tiles.mapillary.com/maps/vtp/mly1_public/2/{z}/{x}/{y}?access_token=MLY|4142433049200173|72206abe5035850d6743b23a49c41333'
|
||||
'https://tegola.nidus.cloud/maps/bonn/{z}/{x}/{y}'
|
||||
]
|
||||
//'minzoom': 6,
|
||||
//'maxzoom': 14
|
||||
});
|
||||
map.addSource('tegola-nidus', {
|
||||
'type': 'vector',
|
||||
'tiles': [
|
||||
//'https://tiles.mapillary.com/maps/vtp/mly1_public/2/{z}/{x}/{y}?access_token=MLY|4142433049200173|72206abe5035850d6743b23a49c41333'
|
||||
'https://tegola.nidus.cloud/maps/nidus/{z}/{x}/{y}?organization_id=1'
|
||||
]
|
||||
//'minzoom': 6,
|
||||
//'maxzoom': 14
|
||||
});
|
||||
map.addLayer({
|
||||
'id': 'bonn', // Layer ID
|
||||
'type': 'fill',
|
||||
'source': 'tegola-bonn', // ID of the tile source created above
|
||||
'source-layer': 'lakes',
|
||||
'paint': {
|
||||
'fill-opacity': 0.1,
|
||||
'fill-color': 'rgb(100, 50, 20)'
|
||||
}
|
||||
//slot: 'middle' // middle slot in Mapbox Standard style
|
||||
});
|
||||
map.addLayer({
|
||||
'id': 'nidus', // Layer ID
|
||||
'type': 'fill',
|
||||
'filter': ['==', ['zoom'], ['+', 2, ['to-number', ['get', 'resolution']]]],
|
||||
'source': 'tegola-nidus', // ID of the tile source created above
|
||||
'source-layer': 'h3_aggregation',
|
||||
'paint': {
|
||||
'fill-opacity': 0.3,
|
||||
'fill-color': 'rgb(250, 100, 100)'
|
||||
}
|
||||
//slot: 'middle' // middle slot in Mapbox Standard style
|
||||
});
|
||||
map.addInteraction("nidus-click-interaction", {
|
||||
type: 'click',
|
||||
target: { layerId: 'nidus' },
|
||||
handler: (e) => {
|
||||
const coordinates = e.feature.geometry.coordinates.slice();
|
||||
const properties = e.feature.properties;
|
||||
//console.log("Coordinates", coordinates[0]);
|
||||
//console.log("Properties", properties.cell, properties.count_);
|
||||
/*new mapboxgl.Popup()
|
||||
.setLngLat(coordinates[0][0])
|
||||
.setHTML("Cell: " + properties.cell)
|
||||
.addTo(map);*/
|
||||
window.location.href = '/cell/' + properties.cell;
|
||||
}
|
||||
});
|
||||
map.addInteraction('nidus-mouseenter-interaction', {
|
||||
type: 'mouseenter',
|
||||
target: { layerId: 'nidus' },
|
||||
handler: () => {
|
||||
map.getCanvas().style.cursor = 'pointer';
|
||||
}
|
||||
});
|
||||
map.addInteraction('nidus-mouseleave-interaction', {
|
||||
type: 'mouseleave',
|
||||
target: { layerId: 'nidus' },
|
||||
handler: () => {
|
||||
map.getCanvas().style.cursor = '';
|
||||
}
|
||||
});
|
||||
|
||||
console.log("Map post-load done.");
|
||||
});
|
||||
|
||||
map.addControl(new mapboxgl.NavigationControl());
|
||||
console.log("Map init done.");
|
||||
}
|
||||
window.addEventListener("load", onLoad);
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.dashboard-container {
|
||||
padding: 20px 0;
|
||||
}
|
||||
.stats-card {
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
|
||||
transition: transform 0.2s;
|
||||
height: 100%;
|
||||
}
|
||||
.stats-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
.map-container {
|
||||
background-color: #e9ecef;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
|
||||
height: 500px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
#map {
|
||||
height: 500px;
|
||||
width:100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#map img {
|
||||
max-width: none;
|
||||
min-width: 0px;
|
||||
height: auto;
|
||||
}
|
||||
.section-title {
|
||||
margin: 30px 0 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
}
|
||||
.last-refreshed {
|
||||
color: #6c757d;
|
||||
}
|
||||
.logo-placeholder {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
background-color: #e9ecef;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.metric-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 10px;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.metric-value {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.syncing {
|
||||
color: #28a745;
|
||||
animation: fa-spin 2s linear infinite;
|
||||
}
|
||||
</style>
|
||||
{{end}}
|
||||
{{define "content"}}
|
||||
<p>District page placeholder</p>
|
||||
{{end}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue