Merge pull request #297 from HelsinkiUniCollab/isakpulkki/popup

UI improvement for popup
HelsinkiUniCollab · Aug 22, 2023 · 891f18c · 891f18c
2 parents 2ef0585 + 8996850
commit 891f18c
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 28 deletions.
diff --git a/recommender-back/src/apis/poi.py b/recommender-back/src/apis/poi.py
@@ -103,7 +103,7 @@ def set_simulated_weather(self, air_temperature, wind_speed, humidity,
                 "Humidity": f"{humidity} %",
                 "Precipitation": f"{precipitation} mm",
                 "Cloud amount": f"{cloud_amount} %",
-                "Air quality": air_quality,
+                "Air quality": f"{air_quality} AQI",
             }
         }
 

diff --git a/recommender-back/src/tests/apis/manager_test.py b/recommender-back/src/tests/apis/manager_test.py
@@ -107,7 +107,7 @@ def test_get_simulated_pois_as_json(self):
                 'Humidity': '10 %',
                 'Precipitation': '5 mm',
                 'Cloud amount': '10 %',
-                'Air quality': '2.0'}
+                'Air quality': '2.0 AQI'}
         self.assertEqual(tested, equals)
 
     @patch('src.db.db.get_collection')

diff --git a/recommender-front/cypress/e2e/recommender.cy.js b/recommender-front/cypress/e2e/recommender.cy.js
@@ -33,7 +33,7 @@ describe('Map and POI features', () => {
     cy.get('.leaflet-marker-icon').first().click();
 
     cy.get('.leaflet-popup-content')
-      .find('ul li')
+      .find('center')
       .should(($lis) => {
         expect($lis.eq(0)).to.contain('20.0 °C');
       });
@@ -43,7 +43,7 @@ describe('Map and POI features', () => {
     cy.get('.leaflet-marker-icon').first().click();
 
     cy.get('.leaflet-popup-content')
-      .find('ul li')
+      .find('center')
       .should(($lis) => {
         expect($lis.eq(0)).to.contain('-5.5 °C');
       });
@@ -99,8 +99,8 @@ describe('TimePickerComponent', () => {
 
   it('should select an hour correctly', () => {
     cy.get('[data-testid="current-time-hour-selector"] div[role="button"]').first().click();
-    cy.get('li[data-value="10"]').click();
-    cy.get('[name="current-time-hour"]').should('have.value', '10');
+    cy.get('li[data-value="00"]').click();
+    cy.get('[name="current-time-hour"]').should('have.value', '00');
   });
 
   it('should select a minute correctly', () => {

diff --git a/recommender-front/src/utils/MarkerUtils.jsx b/recommender-front/src/utils/MarkerUtils.jsx
@@ -1,6 +1,7 @@
 import L from 'leaflet';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import createMarkerIcon from './Icon';
 import DestinationButton from '../components/buttons/DestinationButton';
@@ -18,33 +19,56 @@ const createMarkers = (poiData, time, handleSetDestination) => {
     });
 
     const container = (
-      <>
-        <Typography variant="h5">{poi.name}</Typography>
+      <center>
+        <Typography variant="h6"><strong>{poi.name}</strong></Typography>
         <Typography variant="h8">
-          {poi.catetype}
-          {' '}
-          /
-          {' '}
-          {poi.category}
+          <i>
+            {poi.catetype}
+            {' '}
+            /
+            {' '}
+            {poi.category}
+          </i>
         </Typography>
-        <ul>
+        <Grid
+          container
+          spacing={1}
+          style={{ marginTop: 5 }}
+          alignItems="center"
+          justifyContent="center"
+        >
           {tags.map(([key, value]) => (
-            <li key={key}>
-              <Typography variant="infotext">
-                <strong>{key}</strong>
-                :
-                {' '}
-                {value}
+            key !== 'Score' && (
+            <Grid item xs={4} key={key}>
+              <Typography variant="infotext" style={{ marginBottom: 1 }}>
+                {key}
               </Typography>
-            </li>
+              <h3>{value}</h3>
+            </Grid>
+            )
           ))}
-        </ul>
-        <center>
-          <DestinationButton
-            onClick={() => handleSetDestination(poi.latitude, poi.longitude)}
-          />
-        </center>
-      </>
+        </Grid>
+        <Grid
+          container
+          spacing={1}
+          alignItems="center"
+          justifyContent="center"
+        >
+          <Grid item xs={4} key="Score">
+            <Typography variant="infotext" style={{ marginBottom: 1 }}>
+              Score
+              {' '}
+              <i>(0-1)</i>
+            </Typography>
+            <h3>{tags[tags.length - 1][1]}</h3>
+          </Grid>
+          <Grid item>
+            <DestinationButton
+              onClick={() => handleSetDestination(poi.latitude, poi.longitude)}
+            />
+          </Grid>
+        </Grid>
+      </center>
     );
 
     const scoreTag = tags.find(([key]) => key === 'Score');