Add progress indicator

README.md

@@ -1,4 +1,13 @@
-# lbfe-frontend
+### Little Brothers : Med Trans Project
+# VueJS Frontend
+This project is sponsered by the Humane Interface and Design Enterprise (HIDE) at Michigan Technological University (MTU). This project is student led. 
+
+For new developers, please read this entire Readme before getting started. It contains useful tips for getting started, as well as comments on specifics of certain functionalites. 
+
+This service (the '`Frontend`') uses Vuejs 3. We link to this project to MSAL and our custom `Express API` that interacts with the SQLserver database. 
+
+# Developers
+Here we list out some useful information for any new developer getting started with the project. If you haven't already, see the [Getting Started Guide](https://houghtonlittlebrothers.sharepoint.com/:w:/r/sites/mtulbfemedtransproject/Shared%20Documents/Developer%20Space/Getting%20Stated%20Guide.docx?d=w2909ee9daa3a42238df616b11042623b&csf=1&web=1&e=kcNI3a)
 
 ## Project setup
 ```

src/components/progress/ProgressBar.vue

@@ -0,0 +1,51 @@
+<script>
+import ProgressBlock from "./ProgressBlock.vue";
+
+/* eslint-disable */
+export default {
+
+name: "ProgressBar",
+  components: {
+    ProgressBlock
+  }
+}
+</script>
+
+<template>
+<div id="stickyProg">
+    <ol class="progtrckr" data-progtrckr-steps="7">
+        <ProgressBlock done="true" block-name="Picked up"/>
+        <ProgressBlock done="true" block-name="Dropped off"/>
+        <ProgressBlock block-name="Hello world"/>
+        <ProgressBlock block-name="Other"/>
+        <ProgressBlock block-name="Arrived"/>
+    </ol>
+</div>
+</template>
+
+<style lang="scss" scoped>
+ol.progtrckr {
+    display: table;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    table-layout: fixed;
+    width: 100%;
+    margin-bottom: 1%;
+}
+ol.progtrckr[data-progtrckr-steps="2"] li { width: 49%; }
+ol.progtrckr[data-progtrckr-steps="3"] li { width: 33%; }
+ol.progtrckr[data-progtrckr-steps="4"] li { width: 24%; }
+ol.progtrckr[data-progtrckr-steps="5"] li { width: 19%; }
+ol.progtrckr[data-progtrckr-steps="6"] li { width: 16%; }
+ol.progtrckr[data-progtrckr-steps="7"] li { width: 14%; }
+ol.progtrckr[data-progtrckr-steps="8"] li { width: 12%; }
+ol.progtrckr[data-progtrckr-steps="9"] li { width: 11%; }
+
+
+@media (min-width: 880px) {
+    .progtrckr {
+        background-color: white;
+    }
+}
+</style>

src/components/progress/ProgressBlock.vue

@@ -0,0 +1,98 @@
+<script>
+/* eslint-disable */
+export default {
+name: "ProgressBlock",
+  props: {
+    blockName: String,
+    done: {
+        type: Boolean,
+        default: false
+    }
+  },
+  data() {
+    return {
+        isCompleted: this.done // TODO - Set this value dynamically
+    }
+  }
+}
+</script>
+
+<template>
+    <li :class="[isCompleted ? 'progtrckr-done' : 'progtrckr-todo']">{{ blockName }}</li>
+</template>
+
+<style lang="scss" scoped>
+li {
+    display: table-cell;
+    text-align: center;
+    line-height: 3em;
+    white-space: nowrap;
+}
+ol.progtrckr[data-progtrckr-steps="2"] li { width: 49%; }
+ol.progtrckr[data-progtrckr-steps="3"] li { width: 33%; }
+ol.progtrckr[data-progtrckr-steps="4"] li { width: 24%; }
+ol.progtrckr[data-progtrckr-steps="5"] li { width: 19%; }
+ol.progtrckr[data-progtrckr-steps="6"] li { width: 16%; }
+ol.progtrckr[data-progtrckr-steps="7"] li { width: 14%; }
+ol.progtrckr[data-progtrckr-steps="8"] li { width: 12%; }
+ol.progtrckr[data-progtrckr-steps="9"] li { width: 11%; }
+
+li.progtrckr-done {
+                color: black;
+                border-bottom: 4px solid #d31534;
+}
+li.progtrckr-todo {
+                color: silver;
+                border-bottom: 4px solid silver;
+}
+
+li:after {
+                content: "\00a0\00a0";
+}
+li:before {
+    position: relative;
+    bottom: -2.5em;
+    float: left;
+    left: 50%;
+    line-height: 1em;
+    border-bottom-left-radius: 100px;
+    border-bottom-right-radius: 100px;
+}
+li.progtrckr-done:before {
+    content: "\2713";
+    color: white;
+    background-color: #d31534;
+    height: 1.2em;
+    width: 1.2em;
+    line-height: 1.2em;
+    border: none;
+    border-radius: 1.2em;
+}
+li.progtrckr-todo:before {
+    content: "\039F";
+    color: silver;
+    background-color: white;
+    font-size: 1.5em;
+    bottom: -1.6em;
+    border-bottom-left-radius: 100px;
+    border-bottom-right-radius: 100px;    
+}
+
+
+@media (max-width: 880px) {
+    li:after {
+        display: none;
+    }
+    li:before {
+        display: none;
+    }
+    li.progtrckr-todo {
+        color: rgba(0,0,0,0) !important;
+        text-indent: -9999px;
+    }
+    li.progtrckr-done {
+        color: rgba(0,0,0,0) !important;
+        text-indent: -9999px;
+    }
+}
+</style>

src/views/desktop/UpdateLogView.vue

@@ -1,13 +1,17 @@
 <script>
 // TODO - build the form, remove this comment when it is done
 import UpdateForm from "../../components/busforms/UpdateForm.vue";
+import ProgressBar from "../../components/progress/ProgressBar.vue";
+
 export default {
-  components: { UpdateForm },
+  components: { UpdateForm, ProgressBar },
+
 };
 </script>
 
 <template>
   <div class="update">
+    <ProgressBar />
     <UpdateForm />
   </div>
 </template>