Merge pull request #1 from JopBertrams/develop

LoadCheck 1.0
JopBertrams · Jun 22, 2023 · 37af335 · 37af335
2 parents bf6c5a3 + 9b1faf7
commit 37af335
Show file tree

Hide file tree

Showing 32 changed files with 16,418 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}
diff --git a/README.md b/README.md
@@ -1,2 +1,5 @@
 # LoadCheck_Frontend
-Front-end for the LoadCheck application
+
+Front-end for LoadCheck application
+
+Credits to [beyarkay](https://github.com/beyarkay) with the [eskom-calendar](https://github.com/beyarkay/eskom-calendar/) project where the [area_metadata.yaml](src/area_metadata.yaml) file comes from
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>LoadCheck</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "loadcheck-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@azure/msal-browser": "^2.37.0",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/vue-fontawesome": "^3.0.3",
+    "@microsoft/microsoft-graph-client": "^3.0.5",
+    "@vueuse/core": "^10.1.2",
+    "@vueuse/integrations": "^10.2.0",
+    "axios": "^1.4.0",
+    "chart.js": "^4.3.0",
+    "floating-vue": "^2.0.0-beta.20",
+    "fuse.js": "^6.6.2",
+    "mobile-device-detect": "^0.4.3",
+    "secure-ls": "^1.2.6",
+    "vue": "^3.2.47",
+    "vue-router": "^4.2.1",
+    "vuex": "^4.0.2",
+    "vuex-persistedstate": "^4.1.0"
+  },
+  "devDependencies": {
+    "@modyfi/vite-plugin-yaml": "^1.0.4",
+    "@vitejs/plugin-vue": "^4.1.0",
+    "vite": "^4.3.2"
+  }
+}
diff --git a/public/logo.png b/public/logo.png
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="container">
+    <Header v-if="this.$route.name !== '403'" />
+    <router-view />
+    <Footer v-if="this.$route.name !== '403'" />
+  </div>
+</template>
+
+<script>
+import Header from './components/Header.vue';
+import Footer from './components/Footer.vue';
+import { useDark } from '@vueuse/core';
+import { PublicClientApplication } from '@azure/msal-browser';
+
+useDark({
+  storageKey: 'loadcheck-color-scheme',
+});
+
+export default {
+  name: 'App',
+  components: {
+    Header,
+    Footer,
+  },
+  async created() {
+    await this.$store.dispatch(
+      'setMsalInstance',
+      new PublicClientApplication(this.$store.getters.getMsalConfig)
+    );
+
+    if (
+      this.$store.getters.isAuthenticated &&
+      this.$store.getters.getGraphClient == undefined
+    ) {
+      this.$store.dispatch('setAuthProviderOptions');
+      this.$store.dispatch('setAuthProvider');
+      this.$store.dispatch('setGraphClient');
+    }
+
+    // NOT NECESSARY?
+    // this.$store.state.msalInstance
+    //   .handleRedirectPromise()
+    //   .then((tokenResponse) => {
+    //     if (tokenResponse !== null) {
+    //       this.$store.state.msalInstance.setActiveAccount(
+    //         tokenResponse.account
+    //       );
+    //     }
+    //   });
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped>
+.container {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100vh;
+}
+</style>
diff --git a/src/area_metadata.yaml b/src/area_metadata.yaml
diff --git a/src/assets/fonts/AvantGarde-Demi.ttf b/src/assets/fonts/AvantGarde-Demi.ttf
diff --git a/src/assets/fonts/AvantGarde.ttf b/src/assets/fonts/AvantGarde.ttf
diff --git a/src/assets/fonts/BebasNeue.otf b/src/assets/fonts/BebasNeue.otf
diff --git a/src/assets/images/footer.png b/src/assets/images/footer.png
diff --git a/src/assets/images/header.png b/src/assets/images/header.png
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -0,0 +1,66 @@
+<template>
+  <footer>
+    <p>
+      Made with <span>&hearts;</span> for
+      <a href="https://www.belgiumcampus.ac.za/" target="_blank"
+        >Belgium Campus</a
+      >
+      by <a href="https://jopbertrams.nl/" target="_blank">Jop Bertrams</a> -
+      2023
+    </p>
+    <img src="../assets/images/footer.png" alt="Footer" />
+  </footer>
+</template>
+
+<script>
+export default {
+  name: 'Footer',
+};
+</script>
+
+<style scoped>
+footer {
+  position: relative;
+}
+
+footer p {
+  position: absolute;
+  right: 10px;
+  bottom: 3px;
+  font-size: 0.7rem;
+  color: #fff;
+}
+
+footer p span {
+  color: var(--BC-Pink);
+}
+
+footer p a {
+  color: #fff;
+  text-decoration: none;
+}
+
+footer img {
+  width: 100%;
+}
+
+@media (max-width: 768px) {
+  footer img {
+    display: none;
+  }
+
+  footer p {
+    position: relative;
+    right: 0;
+    bottom: 0;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    color: var(--text-color);
+  }
+
+  footer p a {
+    color: var(--text-color);
+  }
+}
+</style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -0,0 +1,55 @@
+<template>
+  <header>
+    <img id="header_image" src="../assets/images/header.png" alt="Header" />
+    <div id="user" v-if="this.$store.getters.isAuthenticated">
+      <p id="name">Welcome {{ this.$store.getters.getAccount.name }}</p>
+      <img
+        id="profile_picture"
+        src="https://st3.depositphotos.com/6672868/13701/v/450/depositphotos_137014128-stock-illustration-user-profile-icon.jpg"
+        alt="Avatar"
+      />
+    </div>
+  </header>
+</template>
+
+<script>
+export default {
+  name: 'Header',
+};
+</script>
+
+<style scoped>
+header {
+  position: relative;
+  overflow: hidden;
+}
+
+header #header_image {
+  width: 100%;
+}
+
+header #user {
+  position: absolute;
+  top: 4rem;
+  right: 1rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+header #user #name {
+  margin-right: 1rem;
+}
+
+header #user #profile_picture {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+}
+
+@media (max-width: 768px) {
+  header #header_image {
+    width: 250%;
+  }
+}
+</style>
diff --git a/src/components/LoadingSymbol.vue b/src/components/LoadingSymbol.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="spinner" :style="cssProps">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LoadingSymbol',
+  props: {
+    color: {
+      type: String,
+      default: 'var(--BC-Blue)',
+    },
+  },
+  computed: {
+    cssProps() {
+      return {
+        '--spinner-color': this.color,
+      };
+    },
+  },
+};
+</script>
+
+<style scoped>
+.spinner {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.spinner div {
+  transform-origin: 40px 40px;
+  animation: spinner 1.2s linear infinite;
+}
+.spinner div:after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  top: 3px;
+  left: 37px;
+  width: 6px;
+  height: 18px;
+  border-radius: 20%;
+  background: var(--spinner-color);
+}
+.spinner div:nth-child(1) {
+  transform: rotate(0deg);
+  animation-delay: -1.1s;
+}
+.spinner div:nth-child(2) {
+  transform: rotate(30deg);
+  animation-delay: -1s;
+}
+.spinner div:nth-child(3) {
+  transform: rotate(60deg);
+  animation-delay: -0.9s;
+}
+.spinner div:nth-child(4) {
+  transform: rotate(90deg);
+  animation-delay: -0.8s;
+}
+.spinner div:nth-child(5) {
+  transform: rotate(120deg);
+  animation-delay: -0.7s;
+}
+.spinner div:nth-child(6) {
+  transform: rotate(150deg);
+  animation-delay: -0.6s;
+}
+.spinner div:nth-child(7) {
+  transform: rotate(180deg);
+  animation-delay: -0.5s;
+}
+.spinner div:nth-child(8) {
+  transform: rotate(210deg);
+  animation-delay: -0.4s;
+}
+.spinner div:nth-child(9) {
+  transform: rotate(240deg);
+  animation-delay: -0.3s;
+}
+.spinner div:nth-child(10) {
+  transform: rotate(270deg);
+  animation-delay: -0.2s;
+}
+.spinner div:nth-child(11) {
+  transform: rotate(300deg);
+  animation-delay: -0.1s;
+}
+.spinner div:nth-child(12) {
+  transform: rotate(330deg);
+  animation-delay: 0s;
+}
+@keyframes spinner {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+</style>