github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/directeurs/src/App.vue (about)

     1  <template>
     2    <v-app>
     3      <v-app-bar color="primary" app>
     4        <v-app-bar-nav-icon
     5          v-if="isLoggedIn"
     6          @click="menuExpanded = !menuExpanded"
     7        ></v-app-bar-nav-icon>
     8        <v-toolbar-title class="headline text-uppercase">
     9          <v-tooltip>
    10            <template v-slot:activator="{ on }">
    11              <span v-on="on">{{ mainTitle }}</span>
    12            </template>
    13            Version {{ version }}
    14          </v-tooltip>
    15        </v-toolbar-title>
    16        <v-spacer></v-spacer>
    17        <v-btn text href="http://acve.asso.fr" target="_blank">
    18          <span class="mr-2">Site de l'association</span>
    19        </v-btn>
    20        <v-btn
    21          v-if="isLoggedIn"
    22          text
    23          href="http://www.agora.acve.asso.fr/"
    24          target="_blank"
    25        >
    26          <span class="mr-2">Intranet</span>
    27        </v-btn>
    28        <v-btn v-if="isLoggedIn" text :href="linkHelp">
    29          <span class="mr-2">Aide</span>
    30        </v-btn>
    31      </v-app-bar>
    32  
    33      <v-navigation-drawer
    34        v-if="isLoggedIn"
    35        app
    36        :mini-variant="menuExpanded"
    37        permanent
    38      >
    39        <v-layout align-center justify-center row>
    40          <v-avatar @click="menuExpanded = !menuExpanded" size="50">
    41            <v-img margin="auto" :src="require('@/assets/logo.png')" />
    42          </v-avatar>
    43        </v-layout>
    44        <v-list>
    45          <v-list-item
    46            v-for="route in routes"
    47            router
    48            :key="route.meta.title"
    49            :to="route.path"
    50          >
    51            <v-tooltip top>
    52              <template v-slot:activator="{ on }">
    53                <v-list-item-action v-on="on">
    54                  <v-icon>{{ $icons[route.meta.icon] }}</v-icon>
    55                </v-list-item-action>
    56              </template>
    57              {{ route.meta.title }}
    58            </v-tooltip>
    59            <v-list-item-content>{{ route.meta.title }}</v-list-item-content>
    60          </v-list-item>
    61          <v-divider></v-divider>
    62          <v-list-item @click="logout">
    63            <v-tooltip top>
    64              <template v-slot:activator="{ on }">
    65                <v-list-item-action v-on="on">
    66                  <v-icon>{{ $icons["mdi-logout"] }}</v-icon>
    67                </v-list-item-action>
    68              </template>
    69              Se déconnecter
    70            </v-tooltip>
    71            <v-list-item-content>Se déconnecter</v-list-item-content>
    72          </v-list-item>
    73        </v-list>
    74      </v-navigation-drawer>
    75  
    76      <v-main>
    77        <keep-alive v-if="isLoggedIn">
    78          <router-view></router-view>
    79        </keep-alive>
    80        <loggin v-else @loggedIn="onLoggin"></loggin>
    81      </v-main>
    82  
    83      <v-snackbar v-model="success" bottom right :timeout="6000" color="success">
    84        <v-row no-gutters>
    85          <v-col cols="2" class="align-self-center"
    86            ><i>({{ currentTime() }})</i></v-col
    87          >
    88          <v-col class="align-self-center"
    89            ><div v-html="notifications.success" class="ml-2"></div
    90          ></v-col>
    91          <v-col cols="2" class="text-right"
    92            ><v-btn color="black" text icon @click="success = false">
    93              <v-icon>{{ $icons["mdi-close"] }}</v-icon>
    94            </v-btn></v-col
    95          >
    96        </v-row>
    97      </v-snackbar>
    98  
    99      <v-dialog v-model="showError" max-width="500">
   100        <v-card>
   101          <v-card-title class="title error" v-html="errorTitle"></v-card-title>
   102          <v-card-text class="pa-3">
   103            <span v-html="errorMessage" class="subtitle-2"></span>
   104          </v-card-text>
   105        </v-card>
   106      </v-dialog>
   107  
   108      <progress-snack :show="notifications.progress" indeterminate>
   109      </progress-snack>
   110  
   111      <progress-snack
   112        :show="notifications.monitor.show"
   113        :value="notifications.monitor.value"
   114      >
   115        Téléchargement...
   116      </progress-snack>
   117  
   118      <v-footer app inset class="secondary" height="auto" v-if="!isLoggedIn">
   119        <v-card-text class="pa-2 footer-card">
   120          <span class="footer-titre">
   121            <b>A</b>ssociation <b>C</b>hrétienne de <b>V</b>acances et de
   122            <b>L</b>oisirs
   123          </span>
   124          <br />
   125          <span v-if="!isLoggedIn" class="footer-details">
   126            Siège social : La Maison du Rocher - 26150 Chamaloc - tél. 04 75 22 13
   127            88 - www.acve.asso.fr - email: contact@acve.asso.fr
   128            <br />Association loi 1901 - N° Siret: 781 875 851 00037 - code APE:
   129            552EB - Agréments : Centre de Vacances 26 069 1003 - Jeunesse et Sport
   130            : 026ORG0163
   131          </span>
   132        </v-card-text>
   133      </v-footer>
   134    </v-app>
   135  </template>
   136  
   137  <script lang="ts">
   138  import Vue from "vue";
   139  import Component from "vue-class-component";
   140  import { C, LogginData, devMode } from "./logic/controller";
   141  import { routes, routesSimples } from "@/router";
   142  import Loggin from "./components/Loggin.vue";
   143  import ProgressSnack from "./components/ProgressSnack.vue";
   144  
   145  const AppProps = Vue.extend({});
   146  
   147  const devIdCamp = "59";
   148  const devToken =
   149    "PXUK2tIeR6P3lNQH3R7hFhhbMV6j0lRYquI3X-obvzu8qL9_kH13p9wTPPaZ2taYvoimrbADRHWx--QwyeISxEcIm0v8MRG_k4eIe1e-pg6UDPQSpfMIEP8fAS1fCLZYCGMXvldhqWV4ZeE";
   150  
   151  @Component({
   152    components: { Loggin, ProgressSnack }
   153  })
   154  export default class App extends AppProps {
   155    menuExpanded = true;
   156    isLoggedIn = false;
   157    notifications = C.notifications;
   158    C = C;
   159    get version(): string {
   160      return process.env.VUE_APP_VERSION;
   161    }
   162  
   163    get success() {
   164      return this.notifications.success != "";
   165    }
   166    set success(b: boolean) {
   167      if (!b) this.notifications.success = "";
   168    }
   169  
   170    get showError() {
   171      return this.notifications.error != null;
   172    }
   173    set showError(b: boolean) {
   174      if (!b) this.notifications.error = null;
   175    }
   176    get errorTitle() {
   177      if (this.notifications.error == null) return "";
   178      let title = this.notifications.error.kind;
   179      if (this.notifications.error.code != 0) {
   180        title += `- ${this.notifications.error.code}`;
   181      }
   182      return title;
   183    }
   184    get errorMessage() {
   185      if (this.notifications.error == null) return "";
   186      return this.notifications.error.messageHtml;
   187    }
   188  
   189    get camp() {
   190      return C.camp;
   191    }
   192  
   193    get mainTitle() {
   194      if (this.isLoggedIn) {
   195        return "Portail des Directeurs";
   196      } else {
   197        return "ACVE - Portail des Directeurs";
   198      }
   199    }
   200  
   201    get linkHelp() {
   202      return (
   203        "mailto:benoit.kugler@free.fr?subject=[Portail Directeurs]" +
   204        this.camp.nom_camp
   205      );
   206    }
   207  
   208    currentTime() {
   209      const datetime = new Date();
   210      const minn = datetime.getMinutes();
   211      let min = String(minn);
   212      if (minn < 10) {
   213        min = `0${minn}`;
   214      }
   215      return `${datetime.getHours()}:${min}`;
   216    }
   217  
   218    created() {
   219      const hasCookie = C.tryLogginCookie();
   220      if (hasCookie) {
   221        // shortcut loggin screen
   222        this.enter();
   223        return;
   224      }
   225  
   226      if (devMode) {
   227        this.notifications.success = "Connecté sur le camp dev";
   228        this.onLoggin(devIdCamp, {
   229          lien_compta: "www.test.fr",
   230          token: devToken,
   231          camp: { label: "Camp de test", is_simple: false }
   232        });
   233      }
   234    }
   235  
   236    onLoggin(idCamp: string, data: LogginData) {
   237      C.onLogginSuccess(idCamp, data);
   238      this.enter();
   239    }
   240  
   241    private enter() {
   242      this.isLoggedIn = true;
   243  
   244      // add routes based on is_simple
   245      this.$router.addRoutes(this.routes);
   246      // on redirige si l'url n'est pas valide
   247      if (!this.$route.name) {
   248        this.$router.push({ name: "home" });
   249      }
   250    }
   251  
   252    get routes() {
   253      if (this.camp.is_simple) {
   254        return routesSimples;
   255      } else {
   256        return routes;
   257      }
   258    }
   259  
   260    logout() {
   261      C.onLoggout();
   262      // this.isLoggedIn = false;
   263    }
   264  }
   265  </script>
   266  
   267  <style scoped>
   268  .footer-titre {
   269    font-style: italic;
   270    font-size: 90%;
   271  }
   272  
   273  .footer-details {
   274    font-size: 70%;
   275  }
   276  
   277  .footer-card {
   278    line-height: 1.2;
   279  }
   280  </style>