add front end

Katsute · Dec 5, 2022 · f5abc43 · f5abc43
1 parent 5fb5ec0
commit f5abc43
Show file tree

Hide file tree

Showing 9 changed files with 500 additions and 213 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 **CIS 5800 - Information Technology Development and Project Management**
 
-Site that allows users to view upcoming stops and alerts for their current trip, displaying information visually or translated.
+Website that allows users to view upcoming stops and alerts for their current trip, displaying information visually or translated.
 
 ## Installation
 
@@ -20,44 +20,24 @@ Site that allows users to view upcoming stops and alerts for their current trip,
  1. Download `all.zip` from the latest [release](https://github.com/Katsute/Baruch-CIS-5800/releases).
  2. Extract the zip contents into a folder.
 
-<!--
- 2. Download the following static data feeds from <http://web.mta.info/developers/developer-data-terms.html#data>.
-
-    - **New York City Transit Subway**
-    - New York City Transit Bus
-      - **Bronx**
-      - **Brooklyn**
-      - **Manhattan**
-      - **Queens**
-      - **Staten Island**
-    - **Bus Company**
-
- 3. Save these zip files in the same folder as this program. The zip files **must** be named as the following:
-
-    - `google_transit_subway.zip`
-    - `google_transit_bronx.zip`
-    - `google_transit_brooklyn.zip`
-    - `google_transit_manhattan.zip`
-    - `google_transit_queens.zip`
-    - `google_transit_staten_island.zip`
-    - `google_transit_bus_company.zip`
--->
-
 #### 4️⃣ Setup the Program
 
  1. Write the bus token to a file named `bus-token.txt` in the same directory.
  2. Write the subway token to a file named `subway-token.txt` in the same directory.
- 3. Run the jar file from the command line to start the server. **Do not click the jar**, if you click the jar you will have to use task manager to close it.
 
-    ```sh
-    java -jar mta-information-site.jar
-    ```
- 4. Open your browser to `localhost:8080` see the live site.
- 5. Modify site pages in the `site` folder.
+    Your folder should look like this:
+
+    ![setup](https://raw.githubusercontent.com/Katsute/Baruch-CIS-5800/main/setup.png)
 
-Your folder should look like this:
+ 3. Run the jar file from either:
 
-![setup](https://raw.githubusercontent.com/Katsute/Baruch-CIS-5800/main/setup.png)
+    * The command line using `java -jar mta-information-site.jar`
+    * The batch file `run.bat` (Windows)
+    * The shell file `run.sh` (Bash)
+
+    **Do not click the jar file itself,** this will run the application in the background and will require using the task manager to close it.
+
+ 4. Open your browser to `localhost:8080` see the live site.
 
 ### 💼 License
 

diff --git a/pom.xml b/pom.xml
@@ -6,7 +6,7 @@
 
     <groupId>dev.katsute</groupId>
     <artifactId>mta-information-site</artifactId>
-    <version>3.32.0</version>
+    <version>3.37.0</version>
 
     <properties>
         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

diff --git a/setup.png b/setup.png
diff --git a/site/index.html b/site/index.html
diff --git a/site/index.js b/site/index.js
@@ -3,12 +3,20 @@
 const redir = async () => {
     const here = await getLocation();
 
-    // todo
+    const type = document.querySelector(`select[name="mode"]`).value;
+    const route = document.querySelector(`input[name="line"]`).value;
+
+    let direction = +document.querySelector(`select[name="direction"]`).value;
+
+    if(type === "subway")
+        direction = direction === 0 ? 3 : 1;
+
+    const lang = document.querySelector(`select[name="lang"]`).value;
 
     window.location.href =
-        "/tracking" +
+        "/live" +
         `?type=${type}` +
-        `&route=${route}` +
+        `&route=${route.toUpperCase()}` +
         `&direction=${direction}` +
         `&latitude=${here[0]}` +
         `&longitude=${here[1]}` +

diff --git a/site/live.html b/site/live.html
@@ -13,20 +13,22 @@
         <link rel="stylesheet" href="style.css">
     </head>
     <body>
-        <div>
-            <b>Developer Tools:</b>
-
-            [<a href="/">Home</a>]
-            [<a href="?type=bus&route=M1&direction=1">M1 Bus</a> | <a href="?type=bus&route=M1&direction=1&lang=ja">translated</a> | <a href="?type=bus&route=M1&direction=1&lang=ja&mock">mock alerts</a>]
-            [<a href="?type=subway&route=6&direction=1">6 Subway</a> | <a href="?type=subway&route=6&direction=1&lang=ja">translated</a> | <a href="?type=subway&route=6&direction=1&lang=ja&mock">mock alerts</a>]
-
-            <i>Open developer tools for more information</i>
-
-            <hr>
-        </div>
-
         <main>
-
+            <div id="tit">
+                <a href="/">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/MTA_NYC_logo.svg/1862px-MTA_NYC_logo.svg.png" width="100" class="center">
+                </a>
+
+                <h2>Welcome to the MTA Tracking Site</h2>
+            </div>
+
+            <div id="container">
+                <form>
+                    <div id="live-tracking">
+                        <p>content loading, please wait...</p>
+                    </div>
+                </form>
+            </div>
         </main>
 
         <script src="mta.js"></script>

diff --git a/site/style.css b/site/style.css
@@ -5,6 +5,17 @@
     outline: none;
     scroll-behavior: smooth;
 
+    box-sizing: content-box;
+    -ms-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box;
+
+}
+
+*::-webkit-scrollbar {
+
+    display: none;
+
 }
 
 html {
@@ -16,10 +27,17 @@ html {
 body {
 
     height: 100%;
+    margin: 0;
     overflow: auto;
 
 }
 
+main {
+
+    padding: 2rem 0;
+
+}
+
 img {
 
     max-width: 100%;
@@ -30,4 +48,197 @@ a:visited {
 
     color: blue;
 
+}
+
+label {
+
+    color: white;
+
+    font-size: larger;
+    font-weight: bold;
+
+}
+
+form > ul {
+
+    padding-left: 0;
+
+}
+
+input, select, button {
+
+    border-radius: .5rem;
+
+    font-size: large;
+    font-weight: bold;
+
+}
+
+#live-tracking * {
+
+    color: white;
+    text-align: left;
+
+}
+
+#live-tracking ul {
+
+    list-style: unset;
+
+}
+
+#live-tracking ol > li > ul {
+
+    list-style: disc;
+
+}
+
+#live-tracking ol > li:first-of-type > h3::after {
+
+    content: "< NEXT STOP";
+    padding-left: .5rem;
+
+    animation: blink 1s infinite;
+
+}
+
+@keyframes blink {
+
+    0% { color: yellow; }
+    50% { color: white; }
+    100% { color: yellow; }
+
+}
+
+#live-tracking h1 {
+
+    margin: 1rem 0;
+    letter-spacing: .25rem;
+
+}
+
+#live-tracking h3 {
+
+    margin: 0 0 1rem 0;
+
+}
+
+/* --- */
+
+body {
+
+    background-image: url("https://images.hdqwalls.com/wallpapers/new-york-subway-train-4k-ri.jpg");
+
+    background-attachment: fixed;
+    background-size: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+
+}
+
+#tit h2 {
+
+    text-shadow: white 1px 0 10px;
+
+}
+
+h1 {
+
+    text-align: center;
+    letter-spacing: 10px;
+    font-size: 35px;
+    color: #2360A5;
+
+}
+
+h2 {
+
+    text-align: center;
+    color:#2360A5;
+
+}
+
+.center {
+
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+
+}
+
+#container {
+
+    width: 100%;
+    margin: 2rem auto 0 auto;
+
+}
+
+@media (min-width: 576px) {
+
+    #container {
+
+        max-width: 540px;
+
+    }
+
+}
+
+@media (min-width: 768px) {
+
+    #container {
+
+        max-width: 720px;
+
+    }
+
+}
+
+form {
+
+    text-align: center;
+    width: 100%;
+    background: #152233;
+    opacity: 0.93;
+    padding: 16px;
+    border: 3px solid #2360A5;
+
+    border-radius: 1.5rem;
+
+}
+
+form ul {
+
+    list-style: none;
+
+}
+
+input, select{
+
+    margin: 16px;
+    border: 2px solid #2360A5;
+
+    width: 50%;
+
+    padding: 12px;
+
+}
+
+#submit button {
+
+    border: 2px solid #2360A5;
+    padding: 16px 85px;
+    font-weight: bold;
+    font-size: 30px;
+    cursor: pointer;
+    background: #152233;
+    opacity: 1.0;
+    color: white;
+    letter-spacing: 3px;
+
+}
+
+#submit button:hover {
+
+    background-color: #B53737;
+
 }