commit

pakut2 · Jan 12, 2021 · abb6863 · abb6863
1 parent 09a93e1
commit abb6863
Show file tree

Hide file tree

Showing 11 changed files with 552 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -1,9 +1,11 @@
-# ZTM App
+# Closer
 
 ### Save most used bus and tram stops from ZTM Gdansk. Display everything in one place for quick comparison.
 
 ### In Search, type name of the stop
 
 ### In Direct Search, type name of the stop following direction ID (01, 02, etc.)
 
+### Local Search displays all stops in 500m radius
+
 ## https://pakut2.ddns.net
diff --git a/app.js b/app.js
@@ -38,6 +38,7 @@ const navSlide = () => {
 
     burger.classList.toggle("toggle");
     nav.classList.add("transition");
+    section.classList.toggle("shadow");
   });
 
   section.addEventListener("click", () => {
@@ -54,6 +55,7 @@ const navSlide = () => {
       });
       burger.classList.toggle("toggle");
       nav.classList.add("transition");
+      section.classList.toggle("shadow");
     }
   });
 };

diff --git a/directSearch.html b/directSearch.html
@@ -19,16 +19,17 @@
     />
     <link rel="stylesheet" href="./directSearchStyle.css" />
     <link rel="icon" type="image/png" href="Assets/Dog.png" />
-    <title>Bus Schedule</title>
+    <title>Closer</title>
   </head>
   <body>
     <nav>
       <div class="logo">
-        <h4>Bus Schedule</h4>
+        <h4>Closer</h4>
       </div>
       <ul class="nav-links">
         <li><a href="index.html">Search</a></li>
         <li><a href="#">Direct Search</a></li>
+        <li><a href="localSearch.html">Local Search</a></li>
       </ul>
       <div class="burger">
         <div class="line1"></div>
@@ -39,7 +40,7 @@ <h4>Bus Schedule</h4>
 
     <section class="section">
       <form>
-        <input type="text" class="stop-input" />
+        <input type="text" class="stop-input" placeholder="Direct Search" />
         <button class="submit-button" type="submit">
           <i class="fas fa-search"></i>
         </button>

diff --git a/directSearchApp.js b/directSearchApp.js
@@ -34,6 +34,7 @@ const navSlide = () => {
 
     burger.classList.toggle("toggle");
     nav.classList.add("transition");
+    section.classList.toggle("shadow");
   });
 
   section.addEventListener("click", () => {
@@ -50,6 +51,7 @@ const navSlide = () => {
       });
       burger.classList.toggle("toggle");
       nav.classList.add("transition");
+      section.classList.toggle("shadow");
     }
   });
 };

diff --git a/directSearchStyle.css b/directSearchStyle.css
@@ -33,7 +33,7 @@ nav {
 .nav-links {
   display: flex;
   justify-content: space-around;
-  width: 30%;
+  width: 35%;
 }
 .nav-links li {
   cursor: pointer;
@@ -72,6 +72,10 @@ li:nth-of-type(2) {
   transition: all 0.6s ease;
 }
 
+.shadow {
+  opacity: 0.5;
+}
+
 /* @media screen and (max-width: 1024px) {
   .nav-links {
     width: 60%;

diff --git a/index.html b/index.html
@@ -25,11 +25,12 @@
   <body>
     <nav class="nav">
       <div class="logo">
-        <h4>Bus Schedule</h4>
+        <h4>Closer</h4>
       </div>
       <ul class="nav-links">
         <li><a href="#">Search</a></li>
         <li><a href="directSearch.html">Direct Search</a></li>
+        <li><a href="localSearch.html">Local Search</a></li>
       </ul>
       <div class="burger">
         <div class="line1"></div>
@@ -40,7 +41,7 @@ <h4>Bus Schedule</h4>
 
     <section class="section">
       <form>
-        <input type="text" class="stop-input" />
+        <input type="text" class="stop-input" placeholder="Search" />
         <button class="submit-button" type="submit">
           <i class="fas fa-search"></i>
         </button>

diff --git a/localSearch.html b/localSearch.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+    />
+    <meta name="theme-color" content="#252525" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
+      integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="./localSearchStyle.css" />
+    <link rel="icon" type="image/png" href="Assets/Dog.png" />
+    <title>Closer</title>
+  </head>
+  <body>
+    <nav class="nav">
+      <div class="logo">
+        <h4>Closer</h4>
+      </div>
+      <ul class="nav-links">
+        <li><a href="index.html">Search</a></li>
+        <li><a href="directSearch.html">Direct Search</a></li>
+        <li><a href="#">Local Search</a></li>
+      </ul>
+      <div class="burger">
+        <div class="line1"></div>
+        <div class="line2"></div>
+        <div class="line3"></div>
+      </div>
+    </nav>
+
+    <section class="section">
+      <div class="stop-container">
+        <ul class="stop-list">
+          <div class="offline indicator">
+            <span class="header">It looks like you're offline.</span>
+            <span class="footer"
+              >The app will continue to work, but you won't get any new data
+              from the internet until you reconnect.</span
+            >
+          </div>
+        </ul>
+      </div>
+    </section>
+    <script src="localSearchApp.js"></script>
+  </body>
+</html>
diff --git a/localSearchApp.js b/localSearchApp.js
@@ -0,0 +1,215 @@
+const prompt = document.querySelector(".offline");
+
+window.addEventListener("load", () => {
+  const handleConnection = () => {
+    if (navigator.onLine) {
+      prompt.classList.add("indicator");
+    } else {
+      prompt.classList.remove("indicator");
+    }
+  };
+
+  window.addEventListener("offline", handleConnection);
+  window.addEventListener("online", handleConnection);
+});
+
+const navSlide = () => {
+  const burger = document.querySelector(".burger");
+  const nav = document.querySelector(".nav-links");
+  const navLinks = document.querySelectorAll(".nav-links li");
+  const section = document.querySelector(".section");
+
+  burger.addEventListener("click", () => {
+    nav.classList.toggle("nav-active");
+
+    navLinks.forEach((link, index) => {
+      if (link.style.animation) {
+        link.style.animation = "";
+      } else {
+        link.style.animation = `navLinkFade 0.5s ease forwards ${
+          index / 7 + 0.3
+        }s`;
+      }
+    });
+
+    burger.classList.toggle("toggle");
+    nav.classList.add("transition");
+    section.classList.toggle("shadow");
+  });
+
+  section.addEventListener("click", () => {
+    if (burger.classList.contains("toggle")) {
+      nav.classList.toggle("nav-active");
+      navLinks.forEach((link, index) => {
+        if (link.style.animation) {
+          link.style.animation = "";
+        } else {
+          link.style.animation = `navLinkFade 0.5s ease forwards ${
+            index / 7 + 0.3
+          }s`;
+        }
+      });
+      burger.classList.toggle("toggle");
+      nav.classList.add("transition");
+      section.classList.toggle("shadow");
+    }
+  });
+};
+
+navSlide();
+
+const calDist = (lat1, lon1, lat2, lon2) => {
+  const R = 6371e3;
+  const phi1 = (lat1 * Math.PI) / 180;
+  const phi2 = (lat2 * Math.PI) / 180;
+  const deltaPhi = ((lat2 - lat1) * Math.PI) / 180;
+  const deltaLambda = ((lon2 - lon1) * Math.PI) / 180;
+
+  const a =
+    Math.sin(deltaPhi / 2) * Math.sin(deltaPhi / 2) +
+    Math.cos(phi1) *
+      Math.cos(phi2) *
+      Math.sin(deltaLambda / 2) *
+      Math.sin(deltaLambda / 2);
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+
+  const distance = R * c;
+  return distance;
+};
+
+const successCallback = async (position) => {
+  //   console.log(position.coords.latitude);
+  //   console.log(position.coords.longitude);
+  const lat1 = position.coords.latitude;
+  const lon1 = position.coords.longitude;
+
+  const stopList = document.querySelector(".stop-list");
+
+  const getIdData = async () => {
+    let API_URL =
+      "https://ckan.multimediagdansk.pl/dataset/c24aa637-3619-4dc2-a171-a23eec8f2172/resource/d3e96eb6-25ad-4d6c-8651-b1eb39155945/download/stopsingdansk.json";
+    const response = await fetch(API_URL);
+    const data = await response.json();
+
+    const { stops, stopId, stopName, stopLat, stopLon } = data;
+
+    let array = [];
+    let dataArr = [];
+
+    for (let i = 0; i < stops.length; i++) {
+      const distance = calDist(lat1, lon1, stops[i].stopLat, stops[i].stopLon);
+      if (distance <= 500) {
+        let ID = stops[i].stopId;
+        // dataArr = [ID, stops[i].stopName];
+        dataArr.push(Math.round(distance));
+        dataArr.push(ID);
+        dataArr.push(stops[i].stopName);
+        array.push(dataArr);
+        dataArr = [];
+      }
+    }
+    return array;
+  };
+
+  const getTimeData = async () => {
+    const array = await getIdData();
+    // console.log(array.sort());
+    array.sort();
+
+    for (let i = 0; i < array.length - 1; i++) {
+      let ID = array[i][1];
+      //console.log(array[i][0]);
+
+      let API_URL = `https://ckan2.multimediagdansk.pl/delays?stopId=${ID}`;
+
+      const response = await fetch(API_URL);
+      const data = await response.json();
+
+      const { delay, estimatedTime, routeId, headsign } = data;
+
+      let times = [];
+      let routeIds = [];
+      let headsigns = [];
+      for (let i = 0; i < delay.length; i++) {
+        times.push(delay[i].estimatedTime);
+        routeIds.push(delay[i].routeId);
+        headsigns.push(delay[i].headsign);
+      }
+      routeIds.push(" ");
+      times.push(" ");
+
+      for (let i = 0; i < routeIds.length; i++) {
+        let value = routeIds[i].toString();
+        let value1 = value.charAt(0);
+        if (value1 === "4" && value.length > 1) {
+          value = value.slice(1);
+          value1 = "N" + value;
+          routeIds[i] = value1;
+        }
+      }
+
+      const cardDiv = document.createElement("div");
+      cardDiv.classList.add("card");
+
+      const stopNameDiv = document.createElement("div");
+      stopNameDiv.classList.add("stop-name-div");
+      cardDiv.appendChild(stopNameDiv);
+
+      const stopNameSpan = document.createElement("span");
+      stopNameSpan.innerText = array[i][2];
+      stopNameSpan.classList.add("stop-name-span");
+      stopNameDiv.appendChild(stopNameSpan);
+
+      const scheduleDiv = document.createElement("div");
+      scheduleDiv.classList.add("schedule-div");
+      cardDiv.appendChild(scheduleDiv);
+
+      const lineSpan = document.createElement("span");
+      lineSpan.innerText = routeIds.join("\n");
+      lineSpan.classList.add("line-span");
+      scheduleDiv.appendChild(lineSpan);
+
+      const timeSpan = document.createElement("span");
+      if (times.length === 1) {
+        scheduleDiv.style.paddingLeft = 0;
+        timeSpan.innerText = "No courses available now.";
+      } else {
+        timeSpan.innerText = times.join("\n");
+      }
+      timeSpan.classList.add("time-span");
+      scheduleDiv.appendChild(timeSpan);
+
+      const dirSpan = document.createElement("span");
+      dirSpan.innerText = headsigns.join("\n");
+      dirSpan.classList.add("dir-span");
+      scheduleDiv.appendChild(dirSpan);
+
+      const distanceDiv = document.createElement("div");
+      distanceDiv.classList.add("distance-div");
+      cardDiv.appendChild(distanceDiv);
+
+      const distanceSpan = document.createElement("span");
+      distanceSpan.innerText = `Distance: ${array[i][0]}m`;
+      distanceSpan.classList.add("distance-span");
+      distanceDiv.appendChild(distanceSpan);
+
+      stopList.appendChild(cardDiv);
+    }
+  };
+
+  getTimeData().catch((error) => {
+    console.error();
+  });
+};
+
+const errorCallback = (error) => {
+  console.log(error.message);
+};
+
+const app = () => {
+  if ("geolocation" in navigator) {
+    navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
+  }
+};
+
+app();