Load current tour status from server

main.js

@@ -13,7 +13,8 @@ import geojsonPOI from './geo/poi.json'
 
 useGeographic();
 
-const styles = {
+async function main() {
+  const styles = {
     lineOrange: new Style({
       stroke: new Stroke({
         color: '#FF9900',
@@ -54,75 +55,77 @@ const styles = {
         }),
       })
     })
-}
+  }
 
-//
+  //
-// Route
+  // Route
-//
+  //
 
-const lastStageFinished = 2;
+  const tourStatus = await fetch('https://r2b22.kip.pe/status.json').then(res => res.json());
-const stagesCompleted = geojsonRoute.features.slice(0, lastStageFinished);
-const stagesAhead = geojsonRoute.features.slice(lastStageFinished);
-const vectorSourceStagesCompleted = new VectorSource();
-const vectorSourceStagesAhead = new VectorSource();
 
-for (const stage of stagesCompleted) {
+  const lastStageFinished = tourStatus.lastStageFinished;
+  const stagesCompleted = geojsonRoute.features.slice(0, lastStageFinished);
+  const stagesAhead = geojsonRoute.features.slice(lastStageFinished);
+  const vectorSourceStagesCompleted = new VectorSource();
+  const vectorSourceStagesAhead = new VectorSource();
+
+  for (const stage of stagesCompleted) {
     vectorSourceStagesCompleted.addFeature(new GeoJSON().readFeature(stage));
-}
+  }
-for (const stage of stagesAhead) {
+  for (const stage of stagesAhead) {
     vectorSourceStagesAhead.addFeature(new GeoJSON().readFeature(stage));
-}
+  }
 
-const stagesCompletedLayer = new VectorLayer({
+  const stagesCompletedLayer = new VectorLayer({
     source: vectorSourceStagesCompleted,
     style: styles.lineOrange
-});
+  });
 
-const stagesAheadLayer = new VectorLayer({
+  const stagesAheadLayer = new VectorLayer({
     source: vectorSourceStagesAhead,
     style: styles.lineGrey
-});
+  });
 
-//
+  //
-// Points of Interest
+  // Points of Interest
-//
+  //
 
-const vectorSourcePOI = new VectorSource({
+  const vectorSourcePOI = new VectorSource({
     features: new GeoJSON().readFeatures(geojsonPOI),
-});
+  });
 
-const poiLayer = new VectorLayer({
+  const poiLayer = new VectorLayer({
     source: vectorSourcePOI,
     style: styles.circleBlack,
-});
+  });
 
-const vectorSourceTrackedPoints = new VectorSource();
+  const vectorSourceTrackedPoints = new VectorSource();
 
-const vanFeature= new Feature({
+  const vanFeature= new Feature({
     geometry: new Point([8.918618, 44.407408]),
     name: 'Support Van',
     trackable: true
-});
+  });
 
-vectorSourceTrackedPoints.addFeature(vanFeature);
+  vectorSourceTrackedPoints.addFeature(vanFeature);
 
-const trackedPointsLayer = new VectorLayer({
+  const trackedPointsLayer = new VectorLayer({
     source: vectorSourceTrackedPoints,
     style: styles.iconVan
-});
+  });
 
-//
+  //
-// Map initialization
+  // Map initialization
-//
+  //
 
-const view = new View({
+  const view = new View({
     center: [10.6, 46.9],
     zoom: 6.6
-})
+  })
 
-window.view = view;
+  window.view = view;
 
-const map = new Map({
+  const map = new Map({
     target: 'map',
     layers: [
       new TileLayer({
@@ -134,41 +137,41 @@ const map = new Map({
       trackedPointsLayer
     ],
     view: view
-});
+  });
 
-//
+  //
-// Center map on current/next stage
+  // Center map on current/next stage
-//
+  //
 
-setTimeout(() => {
+  setTimeout(() => {
     const nextStageFeature = new GeoJSON().readFeature(stagesAhead[0]);
     view.fit(nextStageFeature.getGeometry(), {
       maxZoom: 10,
       duration: 1000
     });
-}, 3000);
+  }, 3000);
 
-//
+  //
-// Popups
+  // Popups
-//
+  //
-const popupEl = document.getElementById('popup');
+  const popupEl = document.getElementById('popup');
 
-const popup = new Overlay({
+  const popup = new Overlay({
     element: popupEl,
     positioning: 'bottom-center',
     stopEvent: false,
-});
+  });
-map.addOverlay(popup);
+  map.addOverlay(popup);
 
-let popover;
+  let popover;
-function disposePopover() {
+  function disposePopover() {
     if (popover) {
       popover.dispose();
       popover = undefined;
     }
-}
+  }
 
-function createPopoverHtml(feature) {
+  function createPopoverHtml(feature) {
     const container = document.createElement('div');
     const title = document.createElement('div');
     title.textContent = feature.get('name');
@@ -183,10 +186,10 @@ function createPopoverHtml(feature) {
     //   linkParent.append(followLink);
     //   container.append(linkParent);
     // }
-}
+  }
 
-// display popup on click
+  // display popup on click
-map.on('click', function (evt) {
+  map.on('click', function (evt) {
     const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
       return feature;
     });
@@ -201,44 +204,44 @@ map.on('click', function (evt) {
       content: createPopoverHtml(feature)
     });
     popover.show();
-});
+  });
 
-// change mouse cursor when over marker
+  // change mouse cursor when over marker
-map.on('pointermove', function (evt) {
+  map.on('pointermove', function (evt) {
     map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel)
       ? 'pointer'
       : '';
-});
+  });
 
-// Close the popup when the map is moved
+  // Close the popup when the map is moved
-map.on('movestart', disposePopover);
+  map.on('movestart', disposePopover);
 
 
-//
+  //
-// Tracking
+  // Tracking
-//
+  //
 
-const updateInterval = 5000;
+  const updateInterval = 5000;
-let followedFeature = vanFeature;
+  // let followedFeature = vanFeature;
-let followedZoomed = false;
+  // let followedZoomed = false;
-// let followedFeature = null;
+  // let followedFeature = null;
 
-function startFollowing(feature, followLink) {
+  function startFollowing(feature, followLink) {
     followedFeature = feature;
     followLink.textContent = 'Stop following';
     // followLink.removeEventListener('click', startFollowing);
     followLink.addEventListener('click', stopFollowing(feature, followLink));
-}
+  }
 
-function stopFollowing(feature, followLink) {
+  function stopFollowing(feature, followLink) {
     followedFeature = null;
     followedZoomed = false;
     followLink.textContent = 'Stop following';
     // followLink.removeEventListener('click', stopFollowing);
     followLink.addEventListener('click', startFollowing(feature, followLink));
-}
+  }
 
-function updateData(startInterval=false) {
+  function updateData(startInterval=false) {
     fetch('https://r2b22.kip.pe/last.json')
       .then(response => response.json())
       .then(data => {
@@ -264,6 +267,9 @@ function updateData(startInterval=false) {
     if (startInterval) {
       setInterval(updateData, updateInterval);
     }
+  }
+
+  updateData(true);
 }
 
-updateData(true);
+main();