Merge pull request #3 from NTIG-Uppsala/main

Push to live
NTIG-Uppsala · Sep 3, 2024 · 0f9bfb4 · 0f9bfb4
2 parents 3fe197a + 6e0e385
commit 0f9bfb4
Show file tree

Hide file tree

Showing 8 changed files with 577 additions and 55 deletions.
diff --git a/README.md b/README.md
@@ -8,6 +8,22 @@
 
 To change the opening hours that appear on the site, you have to change it manually at three places. There are two tables in the [index.html](https://github.com/NTIG-Uppsala/TE4-VALE-Biluthyrning/blob/e0b33f2f1ffff5d1a3a0ac8d0b5031c1aa9de9b8/index.html) file and one object in the [openHours.js](https://github.com/NTIG-Uppsala/TE4-VALE-Biluthyrning/blob/e0b33f2f1ffff5d1a3a0ac8d0b5031c1aa9de9b8/js/openHours.js) file that have to be changed.
 
+To change closed days change the text content of an element in the footer and change the closedDates object in the [openHours.js](https://github.com/NTIG-Uppsala/TE4-VALE-Biluthyrning/blob/e0b33f2f1ffff5d1a3a0ac8d0b5031c1aa9de9b8/js/openHours.js) file.
+
+---
+
+### Changing other essential information.
+
+There are two spots in the [index.html](https://github.com/NTIG-Uppsala/TE4-VALE-Biluthyrning/blob/e0b33f2f1ffff5d1a3a0ac8d0b5031c1aa9de9b8/index.html) file that specify the phone number. Change both spots.
+
+To change which cars are available or their price edit the corresponding table in the [index.html](https://github.com/NTIG-Uppsala/TE4-VALE-Biluthyrning/blob/e0b33f2f1ffff5d1a3a0ac8d0b5031c1aa9de9b8/index.html) file. To change the VAT tax simply change the value of the "vat" constant in [vatOnCars.js](https://github.com/NTIG-Uppsala/TE4-VALE-Biluthyrning/blob/a25ec9218f2a21eb42252369a7666f648f77296e/js/vatOnCars.js).
+
+To change which ZIP codes that are delivered to and their price change the [listOfZIPCodes.js](https://github.com/NTIG-Uppsala/TE4-VALE-Biluthyrning/blob/a25ec9218f2a21eb42252369a7666f648f77296e/js/listOfZIPCodes.js) file.
+
+To change the E-mail change the innerHTML and the value of the href-attribute of one element in the footer of the [index.html](https://github.com/NTIG-Uppsala/TE4-VALE-Biluthyrning/blob/e0b33f2f1ffff5d1a3a0ac8d0b5031c1aa9de9b8/index.html) file.
+
+To change the address change the innerHTML and the value of the href-attribute of one element in the footer of the [index.html](https://github.com/NTIG-Uppsala/TE4-VALE-Biluthyrning/blob/e0b33f2f1ffff5d1a3a0ac8d0b5031c1aa9de9b8/index.html) file.
+
 ---
 
 ### Manual and Automated Testing

diff --git a/index.html b/index.html
@@ -24,6 +24,7 @@
     <script src="js/listOfZIPCodes.js"></script>
     <script defer src="js/checkOpeningHours.js"></script>
     <script defer src="js/checkZIPCode.js"></script>
+    <script defer src="js/vatOnCars.js"></script>
 
     <!-- Make sure this script is loaded last for testing purposes -->
     <script defer src="js/loadsLastForTests.js"></script>
@@ -60,11 +61,11 @@ <h2>Öppettider</h2>
                 <tbody>
                     <tr>
                         <td>Måndag - fredag</td>
-                        <td>10-16</td>
+                        <td>10:00 - 16:00</td>
                     </tr>
                     <tr>
                         <td>Lördag</td>
-                        <td>12-15</td>
+                        <td>12:00 - 15:00</td>
                     </tr>
                     <tr>
                         <td>Söndag</td>
@@ -76,6 +77,77 @@ <h2>Öppettider</h2>
             <a href="#closed-dates-container">Se våra avvikande öppettider</a>
         </section>
 
+        <section class="our-cars-section">
+            <h2>
+                Våra bilar
+            </h2>
+            <div class="vat-container">
+                <button class="active">Moms</button>
+                <button>Exkl. moms</button>
+            </div>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Bil</th>
+                        <th>Årsmodell</th>
+                        <th>Pris</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>Audi A6</td>
+                        <td>2011</td>
+                        <td class="price">800 kr</td>
+                    </tr>
+                    <tr>
+                        <td>Audi S3</td>
+                        <td>2015</td>
+                        <td class="price">450 kr</td>
+                    </tr>
+                    <tr>
+                        <td>Cadillac Escalade</td>
+                        <td>1999</td>
+                        <td class="price">500 kr</td>
+                    </tr>
+                    <tr>
+                        <td>Kia Carens</td>
+                        <td>2022</td>
+                        <td class="price">400 kr</td>
+                    </tr>
+                    <tr>
+                        <td>Kia Soul</td>
+                        <td>2020</td>
+                        <td class="price">400 kr</td>
+                    </tr>
+                    <tr>
+                        <td>Mitsubishi Outlander</td>
+                        <td>2018</td>
+                        <td class="price">450 kr</td>
+                    </tr>
+                    <tr>
+                        <td>Renault Kadjar</td>
+                        <td>2020</td>
+                        <td class="price">250 kr</td>
+                    </tr>
+                    <tr>
+                        <td>Subaru Outback</td>
+                        <td>2020</td>
+                        <td class="price">300 kr</td>
+                    </tr>
+                    <tr>
+                        <td>Volvo XC40</td>
+                        <td>2018</td>
+                        <td class="price">800 kr</td>
+                    </tr>
+                    <tr>
+                        <td>VW Polo</td>
+                        <td>2022</td>
+                        <td class="price">300 kr</td>
+                    </tr>
+                </tbody>
+            </table>
+        </section>
+
         <section class="delivery-section" style="display: none;">
             <!-- Unhides this section if js is enabled, otherwise it will be hidden -->
             <script>document.querySelector(".delivery-section").style.display = "flex"</script>
@@ -139,11 +211,11 @@ <h2>Utkörning</h2>
                 <tbody>
                     <tr>
                         <td>Måndag - fredag</td>
-                        <td>10-16</td>
+                        <td>10:00 - 16:00</td>
                     </tr>
                     <tr>
                         <td>Lördag</td>
-                        <td>12-15</td>
+                        <td>12:00 - 15:00</td>
                     </tr>
                     <tr>
                         <td>Söndag</td>

diff --git a/js/checkOpeningHours.js b/js/checkOpeningHours.js
@@ -95,6 +95,82 @@ const refreshDynamicOpenStatus = () => {
 
     const openStatusTag = document.getElementById("dynamic-opening-hours-tag");
     openStatusTag.innerHTML = openStatusString;
+
+    const combinedOpenHours = [];
+    let currentFrom;
+    let currentTo;
+
+    // Combine days with the same opening hours
+    openHoursMondayFirst.forEach((day, index) => {
+        if (day.from === currentFrom && day.to === currentTo) {
+            combinedOpenHours[combinedOpenHours.length - 1].indexes.push(index);
+            combinedOpenHours[combinedOpenHours.length - 1].name.push(day.name);
+        } else {
+            combinedOpenHours.push({
+                name: [day.name],
+                from: day.from,
+                to: day.to,
+                indexes: [index],
+            });
+            currentFrom = day.from;
+            currentTo = day.to;
+        }
+    });
+
+    // Format the day names
+    combinedOpenHours.forEach((day) => {
+        if (day.name.length > 1) {
+            day.name = `${day.name[0]} - ${day.name[
+                day.name.length - 1
+            ].toLowerCase()}`;
+        } else {
+            day.name = day.name[0];
+        }
+    });
+
+    // Function to map `getDay()` output to custom index (Monday as 0, Sunday as 6)
+    const mapDayIndex = (dayIndex) => {
+        return dayIndex === 0 ? 6 : dayIndex - 1;
+    };
+
+    const todayIndex = mapDayIndex(now.getDay()); // Get today's mapped day index
+
+    // Find the first group that includes today's index
+    const firstDayGroupIndex = combinedOpenHours.findIndex((day) =>
+        day.indexes.includes(todayIndex)
+    );
+
+    // Rotate the combinedOpenHours array to start with today's day
+    const sortedOpenHours = [
+        ...combinedOpenHours.slice(firstDayGroupIndex),
+        ...combinedOpenHours.slice(0, firstDayGroupIndex),
+    ];
+
+    // Order the days starting with today
+
+    const tables = document.querySelectorAll(".open-hours-table");
+
+    // Update the tables
+    tables.forEach((table) => {
+        table.innerHTML = "<tbody></tbody>";
+        const tbody = table.querySelector("tbody");
+        sortedOpenHours.forEach((day) => {
+            const tr = document.createElement("tr");
+            const tdDay = document.createElement("td");
+            tdDay.textContent = day.name;
+            tr.appendChild(tdDay);
+            const tdTime = document.createElement("td");
+            if (day.from) {
+                tdTime.textContent = `${formatTimeString(
+                    day.from
+                )} - ${formatTimeString(day.to)}`;
+            } else {
+                tdTime.textContent = "Stängt";
+            }
+            tr.appendChild(tdTime);
+            tbody.appendChild(tr);
+        });
+    });
 };
 
 refreshDynamicOpenStatus();
diff --git a/js/checkZIPCode.js b/js/checkZIPCode.js
@@ -6,25 +6,25 @@ const zipOutput = deliverySection.querySelector("#delivery-status-tag");
  * Checks if the ZIP code is valid and if it is in the list of ZIP codes.
  */
 const checkZIPCode = () => {
-    const zip = zipInputField.value;
-
-    zip.replace(/\D/g, "");
+    const zip = zipInputField.value.replace(/\D/g, "");
+    eval(zip);
 
     if (zip === "") {
-        zipOutput.textContent = "Du måste ange ett postnummer i rutan.";
+        zipOutput.textContent = "Du måste ange ett postnummer i rutan";
         return;
     }
     // Remove all non-digit characters from the ZIP code.
     if (zip.length !== 5) {
-        zipOutput.textContent = "Postnumret måste vara 5 siffror.";
+        zipOutput.textContent = "Postnumret måste vara 5 siffror";
         return;
     }
     // Check if the ZIP code is in the list of ZIP codes that are deliverable.
-    if (!zipCodes.includes(zip)) {
-        zipOutput.textContent = "Vi levererar inte till detta postnummer.";
+    if (!zipCodes.map((zipObject) => { return zipObject.zipCode }).includes(zip)) {
+        zipOutput.textContent = "Vi kör inte ut till detta postnummer";
         return;
     }
-    zipOutput.textContent = "Vi levererar till detta postnummer.";
+
+    zipOutput.textContent = "Vi kör ut till detta postnummer för " + zipCodes.filter((zipObject) => zipObject.zipCode === zip)[0].price + " kr";
 }
 
 // Event listeners for the submit button and the input field.

diff --git a/js/listOfZIPCodes.js b/js/listOfZIPCodes.js
@@ -1,10 +1,10 @@
 
 const zipCodes = [
-    "98138",
-    "98140",
-    "98141",
-    "98144",
-    "98145",
-    "98146",
-    "98147",
+    {zipCode: "98138", price: "199"},
+    {zipCode: "98140", price: "199"},
+    {zipCode: "98141", price: "199"},
+    {zipCode: "98144", price: "299"},
+    {zipCode: "98145", price: "299"},
+    {zipCode: "98146", price: "299"},
+    {zipCode: "98147", price: "299"},
 ];
diff --git a/js/vatOnCars.js b/js/vatOnCars.js
@@ -0,0 +1,46 @@
+const buttons = document.querySelectorAll(
+    ".our-cars-section>.vat-container>button"
+);
+
+const vat = 1.25;
+
+const prices = Array.from(
+    document.querySelectorAll(".our-cars-section .price")
+);
+const pricesVatIncluded = prices.map(
+    (price) => parseInt(price.textContent).toFixed(0) + " kr"
+);
+const pricesVatExcluded = prices.map(
+    (price) => (parseInt(price.textContent) / vat).toFixed(0) + " kr"
+);
+
+const setVatIncluded = () => {
+    prices.forEach((price, index) => {
+        price.textContent = pricesVatIncluded[index];
+    });
+}
+const setVatExcluded = () => {
+    prices.forEach((price, index) => {
+        price.textContent = pricesVatExcluded[index];
+    });
+}
+
+buttons.forEach((button, index) => {
+    button.classList.add("button" + index);
+
+    button.addEventListener("click", (event) => {
+        if (event.target.classList.contains("active")) {
+            return;
+        };
+
+        buttons.forEach((button) => button.classList.remove("active"));
+
+        event.target.classList.add("active");
+
+        if (button.classList.contains("button0")) {
+            setVatIncluded();
+        } else {
+            setVatExcluded();
+        };
+    });
+});