DBC22-1161: removed magic number, unit test fixes

Author: ray-oxd

src/backend/apps/webcam/serializers.py

@@ -6,7 +6,7 @@
 class WebcamSerializer(serializers.ModelSerializer):
     links = serializers.SerializerMethodField()
     group = serializers.SerializerMethodField()
-    highway = serializers.SerializerMethodField()
+    highway_display = serializers.SerializerMethodField()
 
     class Meta:
         model = Webcam
@@ -34,6 +34,6 @@ def get_links(self, obj):
     def get_group(self, obj):
         return Webcam.objects.filter(location=obj.location).order_by('id').first().id
 
-    # default highway to 9999 if it doesn't exist
-    def get_highway(self, obj):
-        return obj.highway if obj.highway != '0' else '9999'
+    # use road name if highway doesn't exist
+    def get_highway_display(self, obj):
+        return obj.highway if obj.highway != '0' else obj.highway_description

src/backend/apps/webcam/tests/test_webcam_serializer.py

@@ -53,6 +53,6 @@ def setUp(self):
 
         self.serializer = WebcamSerializer(self.webcam)
 
-    # 2024/03/26 added 'dbc_mark' and 'credit'
+    # 2024/4/3 added 'highway_display'
     def test_serializer_data(self):
-        assert len(self.serializer.data) == 26
+        assert len(self.serializer.data) == 27

src/frontend/src/Components/cameras/CameraList.js

@@ -35,8 +35,7 @@ export default function CameraList(props) {
     // Webcam data reduced to arrays grouped by highway
     const res = {};
     displayedCameras.forEach((cam) => {
-      // Use highway description if highway doesn't exist
-      const highway = cam.highway != '9999' ? cam.highway : cam.highway_description;
+      const highway = cam.highway_display;
       if (!(highway in res)) {
         res[highway] = [];
       }

src/frontend/src/pages/CameraDetailsPage.js

@@ -244,10 +244,13 @@ export default function CameraDetailsPage() {
                 <p className="body--large">{parse(camera.caption)}</p>
               </div>
               <div className="camera-details__more">
-                <div className="camera-details__more__hwy">
-                  {highwayShield(camera.highway)}
-                  <p className="label--more">Highway {camera.highway}</p>
-                </div>
+                {camera.highway != '0' &&
+                  <div className="camera-details__more__hwy">
+                    {highwayShield(camera.highway)}
+                    <p className="label--more">Highway {camera.highway}</p>
+                  </div>
+                }
+
                 <div className="camera-details__more__elevation">
                   <p className="elevation">
                     <span className="number">{camera.elevation}</span>m

src/frontend/src/pages/CamerasListPage.js

@@ -67,7 +67,7 @@ export default function CamerasListPage() {
 
     // Sort cameras by highway number and highway_cam_order
     finalCameras.sort(function(a, b) {
-      const highwayCompare = collator.compare(a.highway, b.highway);
+      const highwayCompare = collator.compare(a.highway_display, b.highway_display);
       if (highwayCompare == 0) {
         return collator.compare(a.highway_cam_order, b.highway_cam_order);
       }