added color mappings to availability map (#325)

* updated svelte

* fixed compass error

* added color mappings to the availability map

Author: sennahhh

src/components/availabilitymapday1.astro

@@ -9,11 +9,13 @@
   );
   const responseData = await response.json();
 
-  responseData.day1.forEach((spot: { id: string; occupied: any }) => {
+  responseData.day1.forEach((spot: { id: string; occupied: string }) => {
     const spotId = "spot-" + spot.id;
     var elem = document.getElementById(spotId);
-    if (elem !== null && spot.occupied) {
+    if (elem !== null && spot.occupied == "red") {
       elem.style.fill = "#ef403d";
+    } else if (elem !== null && spot.occupied == "orange") {
+      elem.style.fill = "#f99548";
     }
   });
 

src/components/availabilitymapday2.astro

@@ -9,11 +9,13 @@
   );
   const responseData = await response.json();
 
-  responseData.day2.forEach((spot: { id: string; occupied: any }) => {
+  responseData.day2.forEach((spot: { id: string; occupied: string }) => {
     const spotId = "day2-spot-" + spot.id;
     var elem = document.getElementById(spotId);
-    if (elem !== null && spot.occupied) {
+    if (elem !== null && spot.occupied == "red") {
       elem.style.fill = "#ef403d";
+    } else if (elem !== null && spot.occupied == "orange") {
+      elem.style.fill = "#f99548";
     }
   });
 </script>

src/pages/availability.astro

@@ -18,8 +18,10 @@ import Layout from "~/layouts/Layout.astro";
       about securing a spot.
       <br />
       A green dot means that the spot is available to reserve, a red that it is not.
-      A golden dot means it is reserved for the luxury package. It is optional to
-      reserve a spot, otherwise your company will be placed at an appropriate place.
+      An orange spot is a preliminary reserved spot, however, it is still possible
+      to pay the reservation fee to reserve the spot. A golden dot means that the
+      luxury package is needed to be able to reserve it. It is optional to reserve
+      a spot, otherwise your company will be placed at an appropriate place.
       <div class="text-center">
         <div class="font-bold text-lg">Day 1</div>
         <Availabilitymapday1 />