ubiquitous-computing-geo-timetracking/frontend/src/App.vue

<template>
  <div class="app">
    <v-app id="geotimetracking">
      <!-- Side navigation menu  -->
      <v-navigation-drawer v-model="drawer" app clipped class="main_accent">
        <v-list dense>
          <v-list-item link to="/">
            <v-list-item-action>
              <v-icon>mdi-view-dashboard</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>Home</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-list-item link to="/timerecords" v-bind:class="{'d-none':!login}">
            <v-list-item-action>
              <v-icon>mdi-clock</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>Time Records</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
            <v-list-item link to="/statistics" v-bind:class="{'d-none':!login}">
            <v-list-item-action>
              <v-icon>mdi-chart-bar</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>Statistics</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-list-item link to="/about">
            <v-list-item-action>
              <v-icon>mdi-information-outline</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>About</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>

      <!-- Top menu bar -->
      <v-app-bar app clipped-left class="main" elevation="10">
        <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
        <v-img src="./assets/logo.svg" max-height="100%" max-width="100" contain></v-img>
        <v-toolbar-title>Geo Timetracking</v-toolbar-title>
        <v-spacer></v-spacer>
        <!-- Modal -->
        <v-row justify="center" >
          <v-dialog v-model="dialog" width="70%"  persistent>
            <template v-slot:activator="{ on }">
              <v-btn color="primary" dark v-on="on">Login</v-btn>
            </template>
            <v-card class="main">
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn  icon @click="dialog = false"><v-icon>mdi-window-close</v-icon></v-btn>
              </v-card-actions>
              <SignIn v-on:signIn="signIn"/>
              <p id="loginError" ></p>
            </v-card>
          </v-dialog>
        </v-row>
        <!-- Menu with account icon -->
        <v-menu v-model="menu" :close-on-content-click="false" :nudge-width="200" offset-y>
          <template v-slot:activator="{ on }">
            <v-btn icon v-on="on">
              <v-icon>mdi-account</v-icon>
            </v-btn>
          </template>

          <v-card>
            <v-list>
              <v-list-item>
                <v-list-item-avatar>
                  <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" />
                </v-list-item-avatar>

                <v-list-item-content>
                  <v-list-item-title>John Doe</v-list-item-title>
                  <v-list-item-subtitle>Admin</v-list-item-subtitle>
                </v-list-item-content>

                <v-list-item-action>

                </v-list-item-action>
              </v-list-item>
            </v-list>

            <v-divider></v-divider>

            <v-list>
              <v-list-item>
                <v-list-item-action>
                  <v-switch

                    color="primary"
                    :input-value="login"
                    @change="login= !login"
                  ></v-switch>
                </v-list-item-action>
                <v-list-item-title>View as Guest</v-list-item-title>
              </v-list-item>
            </v-list>

            <v-card-actions>
              <v-spacer></v-spacer>

              <v-btn text @click="menu = false">Cancel</v-btn>
              <v-btn color="primary" text @click="menu = false">Save</v-btn>
            </v-card-actions>
          </v-card>
        </v-menu>
      </v-app-bar>

      <!-- Routed pages are inserted here -->
      <v-content>
        <router-view />
      </v-content>

      <!-- Footer on bottom -->
      <v-footer app class="main">
        <span>&copy; 2020 Team TacocaT</span>
      </v-footer>
    </v-app>
  </div>
</template>

<script>

import SignIn from "./views/SignIn.vue";
var baseUri = "http://backend:5000";
export default {
  components: {
    SignIn
  },
  props: {
    source: String
  },
  data: () => ({
    drawer: null,
    login: true,
    dialog: false,
    menu: false
    
  }),
  methods: {
    signIn (loginData) {


  var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {
  if (this.status == 200 & this.readyState ==4) {
    sessionStorage.setItem("jwt", this.getResponseHeader("Authorization"));
    location.reload();

    
  }else if(this.status != 200 && this.status !=0) {
  
    document.getElementById("loginError").innerHTML="Login not successfull";
  }
};
  xhttp.open("POST", baseUri + "/login", true);
  xhttp.send('{"username": "' + loginData.username +'", "password": "'+ loginData.password +'"}');
 
    }

  },
  created() {
    this.$vuetify.theme.dark = true;
  }
};
</script>


<style scoped>
.link {
  color: #f1f1f1f1;
  text-decoration: none;
}
.v-application {
  font-family: "Montserrat", sans-serif;
  background-color: var(--v-background-base) !important;
}
</style>