New geojson

react_ui/package.json

@@ -3,6 +3,25 @@
   "version": "2.0.0",
   "private": true,
   "description": "UI for the UiRaS application (V2)",
+  "scripts": {
+    "start": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview",
+    "test": "vitest",
+    "lint": "eslint . --ext .ts --ext .tsx"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
@@ -28,25 +47,6 @@
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"
   },
-  "scripts": {
-    "start": "vite",
-    "build": "tsc && vite build",
-    "serve": "vite preview",
-    "test": "vitest",
-    "lint": "eslint . --ext .ts --ext .tsx"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
   "devDependencies": {
     "@types/loadable__component": "^5.13.4",
     "@typescript-eslint/eslint-plugin": "^5.30.7",

react_ui/src/components/InfoDialog.tsx

@@ -18,7 +18,7 @@
   },
 }));
 
 const DoneItem = styled("span")(({ theme }) => ({
   textDecoration: "line-through",
 }));
 
@@ -67,35 +67,70 @@
         Tietoa uimarantasensoreista
       </BootstrapDialogTitle>
       <DialogContent dividers>
+        <Typography gutterBottom>
+          UiRaS on <a href="https://forumvirium.fi/">Forum Virium Helsingin</a>{" "}
+          ja Helsingin kaupungin vuonna 2020 alkanut kokeilu.
+        </Typography>
         <Typography gutterBottom>
           UiRaS-uimarantasensorit mittaavat veden lämpötilaa parissa kymmenessä
           mittauspisteessä pääkaupunkiseudulla. Mittaustiedot julkaistaan tällä
           sivulla ja lisäksi{" "}
-          <a href="https://iot.fvh.fi/opendata/uiras/">avoimena datana</a> kenen
+          <a href="https://bri3.fvh.io/opendata/uiras/">avoimena datana</a>{" "}
           tahansa kiinnostuneen käyttöön.
         </Typography>
         <Typography gutterBottom>
-          <strong>Huom!</strong> Tämä on uusi <strong>uiras.fvh.io</strong>
-          -sivu, jota kehitetään aktiivisesti lähiviikkoina. Voit ehdottaa uusia
-          toiminnallisuuksia ja lähettää palautetta uimarantasensoreista{" "}
+          Forum Viriumin osalta kokeilu alkaa olla loppusuoralla eikä uusia
+          mittareita enää asenneta. Nämä mittarit ovat rikki, kadonneet tai
+          toimivat epäluotettavasti eikä niistä tarvitse lähettää palautetta:
+          <ul>
+            <li>Aurinkolahti (kadonnut talviuintilaiturin yhteydessä)</li>
+            <li>Eiranranta (useita mittareita hajonnut haastavissa oloissa)</li>
+            <li>
+              Munkkiniemen uimaranta (kadonnut uimaportaiden uusimisen
+              yhteydessä
+            </li>
+            <li>Vetokannas (toimii katkonaisesti)</li>
+          </ul>
+        </Typography>
+        <Typography gutterBottom>
+          Seuraaville Helsigin rannoille on toivottu mittaria, mutta niillä ei
+          ole tällä hetkellä sopivaa asennuspaikkaa: Mustikkamaa, Kivinokka,
+          Kallahdenniemi, Kallahden uimaranta.
+        </Typography>
+
+        <Typography gutterBottom>
+          Voit lähettää palautetta yleisesti uimarantasensoreista{" "}
           <strong>
             <a href="https://forumvirium.fi/uiraspalaute/">
               palautelomakkeella
             </a>
           </strong>
-          .
+          . Helsingin kaupungille voit lähettää palautetta{" "}
+          <a href="https://palautteet.hel.fi/tunnistautuminen-uusi-palaute">
+            kaupungin palautelomakkeella.
+          </a>
         </Typography>
+
         <Typography gutterBottom>
-          Palautetta ei tarvitse lähettää rikkinäisistä sensoreista. Lisäksi
-          seuraaville rannoille on toivottu mittaria, mutta niillä ei ole tällä
-          hetkellä sopivaa asennuspaikkaa: Mustikkamaa, Kivinokka,
-          Kallahdenniemi, Kallahden uimaranta.
+          Espooseen tai Vantaalle ei ole tällä hetkellä suunnitteilla uusia
+          mittauspisteitä UiRaS-kokeilun puitteissa eikä nykyisiä mittareita
+          uusita niiden lopulta hajotessa. Voit kuitenkin lähettää toiveen
+          uusista mittauspisteistä{" "}
+          <a href="https://easiointi.espoo.fi/eFeedback/fi/Feedback/16-Liikunta">
+            Espoon kaupungille
+          </a>{" "}
+          (valitse lomakkeelta Palautteen aihe "Uimarannat ja avannot" ja
+          Palautteen luonne "Toimenpide-ehdotus") tai{" "}
+          <a href="https://asiointi.vantaa.fi/palaute#/form/90000">
+            Vantaan kaupungille
+          </a>{" "}
+          .
         </Typography>
+
         {/*
             explicit component is needed here, because otherwise Typography
             is rendered as <p> (and h4 is not allowed in there)
             TODO: try to use List and ListItem or something
-          */}
         <Typography gutterBottom component={"div"}>
           <h4>Suunniteltuja toimintoja</h4>
           <ul>
@@ -104,18 +139,17 @@
               <DoneItem>mittauspisteet kartalla</DoneItem> (Kiitos{" "}
               <a href="https://github.com/akx">akx</a>)
             </li>
+            <li>linkit listauksesta kartalle ja päin vastoin</li>
             <li>mittauspisteeseen liittyvät lisätiedot</li>
+            <li>rannan sinilevätilanne</li>
             <li>lokikirja</li>
             <li>suosikkirantojen tallennus</li>
             <li>kielituki eli svenska- ja English-versiot</li>
             <li>ehdottamasi toiminto?</li>
           </ul>
         </Typography>
-        <Typography gutterBottom>
-          UiRaS on Forum Virium Helsingin ja Helsingin kaupungin vuonna 2020
-          alkanut kokeilu. Vanha nettisivu löytyy vielä hetken aikaa osoitteessa{" "}
-          <a href="https://uiras-v1.fvh.io/">uiras-v1.fvh.io</a>.
-        </Typography>
+        */}
+
         <Typography gutterBottom>
           Tämä UiRaS-käyttöliittymä on{" "}
           <a

react_ui/src/components/ResponsiveAppBar.tsx

@@ -11,10 +11,15 @@ import * as React from "react";
 
 import { useNavigate } from "react-router-dom";
 import ForumViriumLogo from "../images/FORUM_VIRIUM_logo_white.png";
+import HelsinkiLogo from "../images/Helsinki_logo-w.svg";
 import InfoDialog from "./InfoDialog";
 
 const FvhLogo = styled.img(() => ({
-  maxHeight: "50px",
+  maxHeight: "20px",
+}));
+
+const HkiLogo = styled.img(() => ({
+  maxHeight: "20px",
 }));
 
 const navLinkStyle = { my: 2, color: "white", py: 0 };
@@ -66,6 +71,9 @@ function ResponsiveAppBar() {
           <IconButton href="https://forumvirium.fi">
             <FvhLogo src={ForumViriumLogo} />
           </IconButton>
+          <IconButton href="https://hel.fi">
+            <HkiLogo src={HelsinkiLogo} />
+          </IconButton>
         </Toolbar>
       </Container>
     </AppBar>

react_ui/src/components/ResponsiveAppBarFooter.tsx

@@ -1,20 +1,20 @@
 import styled from "@emotion/styled";
 import AppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import Container from "@mui/material/Container";
 import Toolbar from "@mui/material/Toolbar";
 import * as React from "react";
 
-import HelsinkiLogo from "../images/Helsinki_logo-w.svg";
-import EULogo from "../images/eu_flag.svg";
-import MSLLogo from "../images/logo-mysmartlife.png";
+// import HelsinkiLogo from "../images/Helsinki_logo-w.svg";
+// import EULogo from "../images/eu_flag.svg";
+// import MSLLogo from "../images/logo-mysmartlife.png";
 
 // https://forumvirium.fi/wp-content/themes/forumvirium-child/static/images/footer-bg-wavy.svg
 
-const Logo = styled.img(() => ({
-  maxHeight: "40px",
-  margin: "5px",
-}));
+// const Logo = styled.img(() => ({
+//   maxHeight: "40px",
+//   margin: "5px",
+// }));
 
 function ResponsiveAppBarFooter() {
   return (
@@ -25,9 +25,9 @@
       <Container maxWidth="xl">
         <Toolbar disableGutters>
           <Box sx={{ flexGrow: 0 }}>
-            <Logo alt="Helsinki logo" src={HelsinkiLogo} />
-            <Logo alt="mySmartLife" src={MSLLogo} />
-            <Logo alt="EU flag" src={EULogo} />
+            {/*<Logo alt="Helsinki logo" src={HelsinkiLogo} />*/}
+            {/*<Logo alt="mySmartLife" src={MSLLogo} />*/}
+            {/*<Logo alt="EU flag" src={EULogo} />*/}
           </Box>
         </Toolbar>
       </Container>

react_ui/src/components/UirasListAccordion.tsx

@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
 import loadable from "@loadable/component";
 import ErrorOutlineRoundedIcon from "@mui/icons-material/ErrorOutlineRounded";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import Accordion from "@mui/material/Accordion";
 import AccordionDetails from "@mui/material/AccordionDetails";
 import AccordionSummary from "@mui/material/AccordionSummary";
@@ -64,7 +65,9 @@ const TimeOld = styled.span(() => ({
 
 function Slot({ id, properties }: UirasFeature): JSX.Element {
   const seconds =
-    (new Date().getTime() - parseISO(properties.time).getTime()) / 1000;
+    (new Date().getTime() - parseISO(properties.measurement.time).getTime()) /
+    1000;
+  const infotext = properties.info || "";
   return (
     <Accordion
       TransitionProps={{ unmountOnExit: true }}
@@ -83,30 +86,36 @@ function Slot({ id, properties }: UirasFeature): JSX.Element {
           </Grid>
           <Grid item xs={4}>
             <Temperature>
-              {properties.temp_water < -1.0 ? (
+              {properties.measurement.temp_water < -1.0 ? (
                 <TimeOld style={{ color: "red" }}>‼︎</TimeOld>
               ) : null}
-              {formatTemperature(properties.temp_water)}
-              {properties.temp_water < -1.0 ? <ErrorOutlineRoundedIcon /> : ""}
+              {formatTemperature(properties.measurement.temp_water)}
+              {properties.measurement.temp_water < -1.0 ? (
+                <ErrorOutlineRoundedIcon />
+              ) : (
+                ""
+              )}
+              {infotext != "" ? <InfoOutlinedIcon /> : ""}
             </Temperature>
             <Moment className="text-truncate">
               {seconds > 60 * 60 * 3 ? (
                 <TimeOld style={{ color: "red" }}>‼︎</TimeOld>
               ) : null}
-              <TimeSince iso8601={properties.time} />
+              <TimeSince iso8601={properties.measurement.time} />
             </Moment>
           </Grid>
         </Grid>
       </AccordionSummary>
       <AccordionDetails>
+        {infotext != "" ? <TimeOldText>{infotext}</TimeOldText> : ""}
         {seconds > 60 * 60 * 3 ? (
           <TimeOldText>
             Mittari on poistettu tai sen lähetyksissä on ongelmia.︎
           </TimeOldText>
         ) : (
           ""
         )}
-        {properties.temp_water < -1.0 ? (
+        {properties.measurement.temp_water < -1.0 ? (
           <UirasBroken>
             Mittari on rikki. Tämä on tiedossa eikä siitä tarvitse erikseen
             ilmoittaa, kiitos.
@@ -146,6 +155,20 @@ export default function UirasListAccordion(): JSX.Element {
   const uirasQuery = useUirasV2GeoJSON({
     refreshInterval: dataRefreshInterval,
   });
+  // Remove all Features which have no measurement data in properties
+  if (uirasQuery.data) {
+    uirasQuery.data.features = uirasQuery.data.features.filter(
+      (feature) => feature.properties.measurement
+    );
+  }
+  // or measurement.temp_water is null
+  if (uirasQuery.data) {
+    uirasQuery.data.features = uirasQuery.data.features.filter(
+      (feature: UirasFeature) =>
+        feature.properties.measurement.temp_water !== null
+    );
+  }
+
   if (uirasQuery.error) {
     return <div>Virhe ladattaessa dataa :(</div>;
   }

react_ui/src/components/api.ts

@@ -12,15 +12,15 @@ async function get<T>(url: string) {
 
 export function useUirasV2GeoJSON(options?: SWRConfiguration) {
   return useSwr<GetUirasResponse>(
-    "https://iot.fvh.fi/opendata/uiras/uiras2_v2.geojson",
+    "https://bri3.fvh.io/opendata/uiras/uiras_latest.geojson",
     get,
     options
   );
 }
 
 export function usePerDeviceData(deviceId: string, options?: SWRConfiguration) {
   return useSwr<UirasV2>(
-    `https://iot.fvh.fi/opendata/uiras/${deviceId}_v2.geojson`,
+    `https://bri3.fvh.io/opendata/uiras/${deviceId}.geojson`,
     get,
     options
   );

react_ui/src/components/map/UirasMap.tsx

@@ -42,7 +42,11 @@
     (feature: UirasFeature) => {
       if (!isValidFeature(feature)) return null;
       const el = document.createElement("div");
-      const { temp_water: temp, name } = feature.properties;
+      const { temp_water: temp } = feature.properties.measurement;
+      const { name } = feature.properties;
+      if (temp === null) {
+        return null;
+      }
       el.title = `${name} (${formatTemperature(temp)})`;
       el.style.backgroundColor = deriveHeatColor(temp, minTemp, maxTemp);
       el.className = "uiras-map-marker";
@@ -75,7 +79,7 @@
       const zoom = mapRef.current.getZoom();
       setShowLabels(zoom >= 11.5);
     }
   }, []);
 
   const { containerRef, mapRef } = useMaplibreGL(mapOptions, onZoomEnd);
   useUirasMapMarkers(mapRef);

react_ui/src/hooks/useMinMaxTemp.ts

@@ -9,7 +9,7 @@ export default function useMinMaxTemp(
     if (!features) return [0, 0];
     const temps = features
       .filter(isValidFeature)
-      .map((feature) => feature.properties.temp_water);
+      .map((feature) => feature.properties.measurement.temp_water);
     return [Math.min(...temps), Math.max(...temps)];
   }, [features]);
 }

react_ui/src/types/UiRaSGeoJSON.ts

@@ -11,15 +11,21 @@ export type FeatureLink = {
 
 type FeatureLinks = Record<string, FeatureLink>;
 
+export type Measurement = {
+  time: string;
+  temp_in: number;
+  temp_water: number;
+  batt: number;
+};
+
 export type FeatureProperties = {
   battery: number;
   name: string;
   location: string;
   district: string;
-  temp_internal: number;
-  temp_water: number;
-  time: string;
+  info: string;
   links: FeatureLinks;
+  measurement: Measurement;
 };
 
 export type GeometryCoordinates = [number, number];

react_ui/src/utils/validation.ts

@@ -3,8 +3,13 @@ import { UirasFeature } from "../types/UiRaSGeoJSON";
 
 export function isValidFeature(feature: UirasFeature) {
   const { properties } = feature;
-  const { temp_water: tempWater, time } = properties;
+  const { measurement } = properties;
+  if (!measurement) {
+    return false; // console.log("properties.measurement is missing");
+  }
+  const { temp_water: tempWater, time } = measurement;
   if (tempWater < -1.0) return false;
+  if (tempWater === null) return false;
   const seconds = (new Date().getTime() - parseISO(time).getTime()) / 1000;
   return seconds <= 60 * 60 * 3;
 }

react_ui/yarn.lock

@@ -1140,9 +1140,9 @@ callsites@^3.0.0:
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
 caniuse-lite@^1.0.30001359:
-  version "1.0.30001363"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001363.tgz#26bec2d606924ba318235944e1193304ea7c4f15"
-  integrity sha512-HpQhpzTGGPVMnCjIomjt+jvyUu8vNFo3TaDiZ/RcoTrlOq/5+tC8zHdsbgFB6MxmaY+jCpsH09aD80Bb4Ow3Sg==
+  version "1.0.30001641"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001641.tgz"
+  integrity sha512-Phv5thgl67bHYo1TtMY/MurjkHhV4EDaCosezRXgZ8jzA/Ub+wjxAvbGvjoFENStinwi5kCyOYV3mi5tOGykwA==
 
 caseless@^0.12.0, caseless@~0.12.0:
   version "0.12.0"