Fix layering on LinesExplorerMap

carrismetropolitana · Dec 12, 2023 · c01d021 · c01d021
1 parent 0f56f8d
commit c01d021
Show file tree

Hide file tree

Showing 11 changed files with 206 additions and 132 deletions.
diff --git a/frontend/components/CopyBadge/CopyBadge.module.css b/frontend/components/CopyBadge/CopyBadge.module.css
@@ -16,6 +16,7 @@
   font-weight: 600;
   letter-spacing: 0.5pt;
   line-height: 1;
+  text-wrap: nowrap;
 }
 
 .container:hover {

diff --git a/frontend/components/LinesExplorer/LinesExplorer.js b/frontend/components/LinesExplorer/LinesExplorer.js
@@ -2,12 +2,16 @@
 
 /* * */
 
+import styles from './LinesExplorer.module.css';
 import useSWR from 'swr';
-import Pannel from '@/components/Pannel/Pannel';
+import { useEffect } from 'react';
 import { useTranslations } from 'next-intl';
+import Pannel from '@/components/Pannel/Pannel';
 import LinesExplorerToolbar from '@/components/LinesExplorerToolbar/LinesExplorerToolbar';
 import LinesExplorerContent from '@/components/LinesExplorerContent/LinesExplorerContent';
 import BetaIcon from '@/components/BetaIcon/BetaIcon';
+import { useAnalyticsContext } from '@/contexts/AnalyticsContext';
+import { useLinesExplorerContext } from '@/contexts/LinesExplorerContext';
 
 /* * */
 
@@ -19,17 +23,50 @@ export default function LinesExplorer() {
 
   const t = useTranslations('LinesExplorer');
 
+  const analyticsContext = useAnalyticsContext();
+  const linesExplorerContext = useLinesExplorerContext();
+
   //
-  // B. Fetch data
+  // B. Analytics
 
-  const { isLoading: allLinesLoading, error: allLinesError } = useSWR('https://api.carrismetropolitana.pt/lines');
+  useEffect(() => {
+    analyticsContext.capture('view_lines_explorer');
+  });
+
+  //
+  // C. Fetch data
+
+  const { data: allLinesData, isLoading: allLinesLoading, error: allLinesError } = useSWR('https://api.carrismetropolitana.pt/lines');
   const { isLoading: allMunicipalitiesLoading, error: allMunicipalitiesError } = useSWR('https://api.carrismetropolitana.pt/municipalities/');
+  const { isValidating: allVehiclesValidating } = useSWR('https://api.carrismetropolitana.pt/vehicles');
+
+  //
+  // D. Handle actions
+
+  useEffect(() => {
+    const matchedLineIdFromUrl = window.location.pathname.match(/\/lines\/(.+)/);
+    if (matchedLineIdFromUrl && matchedLineIdFromUrl[1] !== 'all' && allLinesData && !linesExplorerContext.entities.line?.id) {
+      linesExplorerContext.selectLine(matchedLineIdFromUrl[1]);
+    }
+  });
 
   //
-  // c. Render components
+  // E. Render components
 
   return (
-    <Pannel type="A" title={t('pannel_title')} loading={allLinesLoading || allMunicipalitiesLoading} error={allLinesError || allMunicipalitiesError} rightSection={<BetaIcon />}>
+    <Pannel
+      type="A"
+      title={t('pannel_title')}
+      loading={allLinesLoading || allMunicipalitiesLoading}
+      error={allLinesError || allMunicipalitiesError}
+      validating={allVehiclesValidating}
+      rightSection={
+        <>
+          {allVehiclesValidating && <div className={styles.validating}>V</div>}
+          <BetaIcon />
+        </>
+      }
+    >
       <LinesExplorerToolbar />
       <LinesExplorerContent />
     </Pannel>

diff --git a/frontend/components/LinesExplorer/LinesExplorer.module.css b/frontend/components/LinesExplorer/LinesExplorer.module.css
@@ -4,3 +4,11 @@
 .container {
   display: flex;
 }
+
+/* * */
+/* VALIDATING */
+
+.validating {
+  font-weight: 800;
+  opacity: 0.5;
+}
diff --git a/frontend/components/LinesExplorerContent/LinesExplorerContent.js b/frontend/components/LinesExplorerContent/LinesExplorerContent.js
@@ -4,11 +4,13 @@
 
 import { useTranslations } from 'next-intl';
 import styles from './LinesExplorerContent.module.css';
+import { useDebugContext } from '@/contexts/DebugContext';
 import { useLinesExplorerContext } from '@/contexts/LinesExplorerContext';
 import LinesExplorerContentHeader from '@/components/LinesExplorerContentHeader/LinesExplorerContentHeader';
 import LinesExplorerContentPatternPath from '@/components/LinesExplorerContentPatternPath/LinesExplorerContentPatternPath';
 import LinesExplorerMap from '@/components/LinesExplorerMap/LinesExplorerMap';
 import NoDataLabel from '@/components/NoDataLabel/NoDataLabel';
+import LinesExplorerContentDebug from '@/components/LinesExplorerContentDebug/LinesExplorerContentDebug';
 
 /* * */
 
@@ -19,6 +21,8 @@ export default function LinesExplorerContent() {
   // A. Setup variables
 
   const t = useTranslations('LinesExplorerContent');
+
+  const debugContext = useDebugContext();
   const linesExplorerContext = useLinesExplorerContext();
 
   //
@@ -33,6 +37,7 @@ export default function LinesExplorerContent() {
         {linesExplorerContext?.entities?.line?.id ? (
           <>
             <LinesExplorerContentHeader />
+            {linesExplorerContext.entities.pattern?.id && debugContext.isDebug && <LinesExplorerContentDebug />}
             {linesExplorerContext.entities.pattern?.id ? <LinesExplorerContentPatternPath /> : <NoDataLabel text={t('no_selection')} />}
           </>
         ) : (

diff --git a/frontend/components/LinesExplorerContentDebug/LinesExplorerContentDebug.js b/frontend/components/LinesExplorerContentDebug/LinesExplorerContentDebug.js
@@ -0,0 +1,33 @@
+'use client';
+
+/* * */
+
+import styles from './LinesExplorerContentDebug.module.css';
+import CopyBadge from '@/components/CopyBadge/CopyBadge';
+import { useLinesExplorerContext } from '@/contexts/LinesExplorerContext';
+
+/* * */
+
+export default function LinesExplorerContentDebug() {
+  //
+
+  //
+  // A. Setup variables
+
+  const linesExplorerContext = useLinesExplorerContext();
+
+  //
+  // B. Render components
+
+  return (
+    <div className={styles.container}>
+      <CopyBadge label={`pattern_id: ${linesExplorerContext.entities.pattern?.id}`} value={linesExplorerContext.entities.pattern?.id} />
+      <CopyBadge label={`direction: ${linesExplorerContext.entities.pattern?.direction}`} value={linesExplorerContext.entities.pattern?.direction} />
+      <CopyBadge label={`headsign: ${linesExplorerContext.entities.pattern?.headsign}`} value={linesExplorerContext.entities.pattern?.headsign} />
+      <CopyBadge label={`line_color: ${linesExplorerContext.entities.line?.color}`} value={linesExplorerContext.entities.line?.color} />
+      <CopyBadge label={`total stops: ${linesExplorerContext.entities.pattern?.path?.length}`} value={linesExplorerContext.entities.pattern?.path?.length} />
+    </div>
+  );
+
+  //
+}
diff --git a/frontend/components/LinesExplorerContentDebug/LinesExplorerContentDebug.module.css b/frontend/components/LinesExplorerContentDebug/LinesExplorerContentDebug.module.css
@@ -0,0 +1,13 @@
+/* * */
+/* CONTAINER */
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: var(--size-lg);
+  width: 100%;
+  border-bottom: 1px solid var(--gray3);
+  background-color: var(--reference-0);
+  align-items: flex-start;
+}