@geops/rvf-mobility-web-component 0.1.78 → 0.1.80

package/package.json

@@ -2,7 +2,7 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.78",
+  "version": "0.1.80",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",
@@ -12,7 +12,7 @@
     "jspdf": "^3.0.3",
     "lodash.debounce": "^4.0.8",
     "maplibre-gl": "^5.10.0",
-    "mobility-toolbox-js": "3.4.6",
+    "mobility-toolbox-js": "3.4.7",
     "ol": "^10.6.1",
     "preact": "^10.27.2",
     "preact-custom-element": "^4.5.1",

package/src/MobilityNotifications/MobilityNotifications.tsx

@@ -1,4 +1,5 @@
 import { MocoAPI } from "mobility-toolbox-js/ol";
+import { SeverityEnumeration } from "mobility-toolbox-js/types";
 import { memo, useEffect, useState } from "preact/compat";
 
 import SituationDetails from "../SituationDetails";
@@ -19,6 +20,17 @@ export type MobilityNotificationsProps = Record<
   null | string | undefined
 >;
 
+const severityOrder = {
+  [SeverityEnumeration.NoImpact]: 2,
+  [SeverityEnumeration.Normal]: 5,
+  [SeverityEnumeration.Severe]: 6,
+  [SeverityEnumeration.Slight]: 4,
+  [SeverityEnumeration.Undefined]: 1,
+  [SeverityEnumeration.Unknown]: 0,
+  [SeverityEnumeration.VerySevere]: 7,
+  [SeverityEnumeration.VerySlight]: 3,
+};
+
 function MobilityNotifications({
   apikey,
   lang,
@@ -59,20 +71,53 @@ function MobilityNotifications({
     <I18nContext.Provider value={i18n}>
       <style>{tailwind}</style>
       <div className="flex w-full flex-col gap-6">
-        {situations?.map((situation) => {
-          return (
-            <SituationDetails
-              canToggle={true}
-              headerClassName="text-rvf-h3 font-semibold"
-              iconClassName="w-8 h-8 text-red"
-              key={situation.id}
-              reasonClassName="hidden"
-              situation={situation}
-              timeIntervalClassName="pl-1 text-base py-3 font-semibold text-balance"
-              useShortMonth={false}
-            ></SituationDetails>
-          );
-        })}
+        {situations
+          ?.sort((a, b) => {
+            // sort by startDate
+            const startDateA = a.affectedTimeIntervalsStart;
+            const startDateB = b.affectedTimeIntervalsStart;
+            if (startDateA && startDateB) {
+              // If they start the same day we sort by severity
+              if (startDateA.split("T")[0] === startDateB.split("T")[0]) {
+                // Sort by severity;
+                const severityA =
+                  a.publications.find((pub) => {
+                    return !!pub.severity;
+                  })?.severity || 0;
+                const severityB =
+                  b.publications.find((pub) => {
+                    return !!pub.severity;
+                  })?.severity || 0;
+                return severityOrder[severityA] > severityOrder[severityB]
+                  ? -1
+                  : 1;
+              }
+              return startDateA < startDateB ? -1 : 1;
+            }
+
+            if (!startDateA) {
+              return 1;
+            }
+
+            if (!startDateB) {
+              return -1;
+            }
+          })
+          .map((situation) => {
+            console.log("Rendering situation", situation.id, situation.title);
+            return (
+              <SituationDetails
+                canToggle={true}
+                headerClassName="text-rvf-h3 font-semibold"
+                iconClassName="w-8 h-8 text-red"
+                key={situation.id}
+                reasonClassName="hidden"
+                situation={situation}
+                timeIntervalClassName="pl-1 text-base py-3 font-semibold text-balance"
+                useShortMonth={false}
+              ></SituationDetails>
+            );
+          })}
       </div>
     </I18nContext.Provider>
   );