CMC fork

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+

.nvmrc

@@ -0,0 +1 @@
+16.19.0

src/App.css

@@ -0,0 +1,213 @@
+/* 
+#################################
+TODO: styles are a mess... fix... them...
+*/
+
+body {
+  margin: 0;
+  padding: 0;
+
+  overflow: hidden; /* TODO: fix this... this is for the loader... */
+}
+
+.container {
+  color: #f7f7f7;
+  padding: 1em;
+}
+
+.sidebar {
+  max-width: 500px;
+  height: 100vh;
+
+  background-color: #719fbd;
+  background-image: linear-gradient(135deg, #719fbd 0%, #6f7192 100%);
+
+  background-size: 400% 400%;
+  animation: gradient 15s ease infinite;
+  height: 100vh;
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.sidebar h2,
+.center {
+  text-align: center;
+}
+
+.move-up {
+  margin-top: -0.7em;
+}
+
+.force-move-up {
+  position: relative;
+  top: -0.85em;
+}
+
+.data {
+  font-family: monospace;
+  display: block;
+  white-space: pre;
+  margin: 1em 0px;
+
+  max-height: 380px;
+
+  overflow-y: scroll;
+}
+
+/* Weather data styling */
+.day {
+  font-weight: 400;
+}
+.temperature {
+  display: block;
+}
+.temperature-front span,
+.precipitation,
+.temperature {
+  color: #beedff;
+  position: relative;
+  font-size: 2.5em;
+  font-weight: 900;
+
+  top: 0.2em;
+
+  padding-left: 0.12em;
+}
+
+.low {
+  color: #e1ffbe;
+}
+
+.data-block {
+  display: flex;
+}
+
+.item {
+  display: block;
+  flex: 1;
+}
+
+.loader {
+  position: relative;
+  background-color: rgba(0, 0, 0, 0.1);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  z-index: 2000;
+}
+
+.buttons {
+  display: flex;
+}
+
+.loader span {
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(5, 5, 5, 0.5);
+  background-color: #719fbd;
+  background-image: linear-gradient(135deg, #719fbd 0%, #6f7192 100%);
+
+  background-size: 400% 400%;
+  animation: gradient 15s ease infinite;
+  height: 100vh;
+
+  color: #beedff;
+
+  text-align: center;
+  vertical-align: middle;
+}
+
+.loader span p {
+  position: relative;
+  float: left;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  color: #beedff;
+  font-size: 2.5em;
+  font-weight: 900;
+}
+
+.btn {
+  display: block;
+  width: 75px;
+
+  padding: 5px 15px 5px 15px;
+  margin: 15px;
+
+  background-color: rgba(0, 0, 0, 0.1);
+  border: 1px solid #beedff;
+
+  font-size: 0.65em;
+
+  flex: 1;
+}
+
+.btn-marker {
+  text-align: center;
+  font-size: 0.95em;
+
+  color: #ffffff;
+
+  background-color: rgba(5, 5, 5, 0.5);
+  background-color: #719fbd;
+  background-image: linear-gradient(135deg, #719fbd 0%, #6f7192 100%);
+
+  cursor: pointer;
+}
+
+.left {
+  float: left;
+}
+.right {
+  float: right;
+}
+
+.info {
+  font-weight: 400;
+  color: rgb(0, 225, 255);
+}
+
+.warning {
+  font-weight: 400;
+  color: rgb(255, 187, 0);
+}
+.error,
+div.loader > span > p.error {
+  color: rgb(214, 29, 29);
+}
+
+.force-bottom {
+  position: absolute;
+  margin: 0 auto;
+  bottom: 15px;
+}
+
+.leaflet-popup-content-wrapper {
+  border-radius: 0;
+
+  background-color: rgba(5, 5, 5, 0.5);
+  background-color: #719fbd;
+  background-image: linear-gradient(135deg, #719fbd 0%, #6f7192 100%);
+
+  background-size: 400% 400%;
+  animation: gradient 15s ease infinite;
+
+  color: #eeeeee;
+}
+.leaflet-container a.leaflet-popup-close-button {
+  color: red;
+}

src/App.js

@@ -1,87 +1,53 @@
-import React, {useEffect, useState} from 'react';
-import Metolib from '@fmidev/metolib';
-import './App.css';
-import {Map, Marker, TileLayer} from "react-leaflet";
-import styled from "styled-components";
-import L from "leaflet";
-import Sidebar from './Sidebar';
-
-const MapContainer = styled(Map)`
-    width: calc(100vw - 300px);
-    height: 100vh;
-    position:absolute;
-    top:0px;
-    left:300px;
-`;
-
-
-// Ugly hack to fix Leaflet icons with leaflet loaders
-delete L.Icon.Default.prototype._getIconUrl;
-L.Icon.Default.mergeOptions({
-  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
-  iconUrl: require('leaflet/dist/images/marker-icon.png'),
-  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
-});
-
+import React, { useEffect, useState } from "react";
+import "./App.css";
+import Sidebar from "./components/Sidebar";
+import MapMain from "./components/MapMain";
+import { fetchObservationLocations } from "./api/fetchObservationLocations";
 
 function App() {
-  const [observationLocations, setObservationLocations] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [loadingText, setLoadingText] = useState("Loading...");
 
+  const [observationLocations, setObservationLocations] = useState([]);
   const [selectedLocation, setSelectedLocation] = useState(null);
 
-  useEffect(function fetchObservationLocations() {
-    const connection = new Metolib.WfsConnection();
-    if (connection.connect('http://opendata.fmi.fi/wfs', 'fmi::observations::weather::cities::multipointcoverage')) {
-      connection.getData({
-        begin: Date.now() - 60e3 * 60 * 24 * 6,
-        end: Date.now(),
-        requestParameter: "t,snowdepth,r_1h",
-        timestep: 60 * 60 * 1000,
-        bbox: "20.6455928891, 59.846373196, 31.5160921567, 70.1641930203",
-        callback: (data, errors) => {
-          if (errors.length > 0) {
-
-            errors.forEach(err => {
-              console.error('FMI API error: ' + err.errorText);
-            });
-            return;
-          }
-
-          setObservationLocations(data.locations
-            .map(loc => {
-              const [lon, lat] = loc.info.position.map(parseFloat);
-              return {...loc, position: {lat, lon}}
-            })
-          );
-
-          connection.disconnect();
-        }
-      });
-    }
-  }, []);
+  useEffect(
+    () =>
+      fetchObservationLocations(
+        setObservationLocations,
+        setLoading,
+        setLoadingText
+      ),
+    []
+  );
 
-  const position = [65, 26];
   const map = (
-    <MapContainer center={position} zoom={6}>
-      <TileLayer
-        url='https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
-        attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>'
-        subdomains='abcd'
-        maxZoom={19}
-      />
-      {observationLocations.map(loc => <Marker position={[loc.position.lat, loc.position.lon]}
-                                               key={loc.info.id} onClick={() => setSelectedLocation(loc.info.id)}>
-      </Marker>)}
-    </MapContainer>
+    <MapMain
+      setSelectedLocation={setSelectedLocation}
+      observationLocations={observationLocations}
+    />
   );
 
   return (
     <div className="App">
-      <Sidebar selectedLocationId={selectedLocation} observationLocations={observationLocations}/>
+      {loading ? (
+        <div className="loader">
+          <span>
+            {loadingText.includes("Error") ? (
+              <p className="error">{loadingText}</p>
+            ) : (
+              <p>{loadingText}</p>
+            )}
+          </span>
+        </div>
+      ) : null}
+      <Sidebar
+        selectedLocationId={selectedLocation}
+        observationLocations={observationLocations}
+      />
       {map}
     </div>
   );
-
 }
 
-export default App;
+export default App;