sermoni

"Service monitor" / cronjob status service
Log | Files | Refs

App.vue (3472B)

      1 <template>
      2     <div>
      3         <header :style="headerStyle">
      4             <div id="bar">
      5                 <div @click="logout" style="font-size:1.5em;color:#bbf;cursor:pointer">
      6                     {{ pageTitle }}
      7                 </div> 
      8                 <div v-show="loggedIn" @click="togglePage" style="margin-left: auto;">
      9                     <Eye :service-view="this.serviceView" style="cursor: pointer;"/>
     10                 </div>
     11             </div>
     12         </header>
     13         <main>
     14             <component v-if="page"
     15                        :is="page" 
     16                        @login="login" 
     17                        @error="error = true"/>
     18         </main>
     19     </div>
     20 </template>
     21 
     22 <script>
     23     import Eye from "./Eye.vue";
     24     import Login from "./Login.vue";
     25     import Events from "./Events.vue";
     26     import Services from "./Services.vue";
     27     import api from "./requests.js";
     28     export default {
     29         name: "App",
     30         components: {Login, Eye, Events, Services},
     31         data() {
     32             return {
     33                 pageTitle: "",
     34                 page: null,
     35                 serviceView: false,
     36                 error: false,
     37                 loggedIn: false
     38             };
     39         },
     40         methods: {
     41             login() {
     42                 this.page = Events;
     43                 this.error = false;
     44                 this.loggedIn = true;
     45             },
     46             logout() {
     47                 if (!this.loggedIn) {
     48                     return;
     49                 }
     50                 api.logout(
     51                     success => {
     52                         this.loggedIn = false;
     53                         this.page = Login;
     54                     }
     55                 );
     56             },
     57             togglePage() {
     58                 // Should do nothing when on login page
     59                 if (this.page === Events) {
     60                     this.page = Services;
     61                     this.serviceView = true;
     62                 } else if (this.page === Services) {
     63                     this.page = Events;
     64                     this.serviceView = false;
     65                 }
     66             }
     67         },
     68         computed: {
     69             headerStyle() {
     70                 const bgColor = this.error ? "#fce1e1" : "#eef";
     71                 return {
     72                     "background-color": bgColor
     73                 };
     74             }
     75         },
     76         mounted() {
     77             api.init(
     78                 successData => {
     79                     this.pageTitle = successData.pagetitle;
     80                     this.loggedIn = successData.authenticated;
     81                     if (this.loggedIn) {
     82                         this.page = Events;
     83                     } else {
     84                         this.page = Login;
     85                     }
     86                 },
     87                 errorData => {
     88                     console.error(errorData);
     89                     this.error = true;
     90                 }
     91             )
     92         }
     93     }
     94 </script>
     95 
     96 <style>
     97 body {
     98     font-family: Roboto, sans-serif;
     99     background-color: #FAFAFA;
    100     margin: 0;
    101 }
    102 header {
    103     z-index: 1000;
    104     border-bottom: 1px solid rgba(0,0,0,.075);
    105     -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
    106     box-shadow: 0 0 10px rgba(0,0,0,.1);
    107     position: fixed;
    108     top: 0;
    109     left: 0;
    110     width: 100%;
    111     padding: 0;
    112     height: 4em;
    113     display: flex;
    114     align-items: center; 
    115 }
    116 #bar {
    117     width: 100%;
    118     display: flex; 
    119     margin: 1em; 
    120     align-items: center; 
    121 }
    122 main {
    123     margin: 4em 0 0 0;
    124     width: calc(100%-1em);
    125     min-height: 1em;
    126     padding: 1em;
    127 }
    128 </style>