ui/src/App.vue

@@ -1,21 +1,18 @@
 <template>
   <div id="app">
     <img class="logo" alt="Lenaistenlogo" src="./assets/logo.png" />
-    <Admin v-if="get_id === 'admin'" />
+    <BDay />
-    <Gratulation v-else />
   </div>
 </template>
 
 <script>
-import Admin from "./components/Admin.vue";
+import BDay from "./components/BDay.vue";
-import Gratulation from "./components/Gratulation.vue";
 
 export default {
   name: "App",
 
   components: {
-    Admin,
+    BDay,
-    Gratulation,
   },
 
   computed: {
@@ -40,7 +37,6 @@ html {
   text-align: center;
   color: #34214f;
   margin-top: 60px;
-  margin-bottom: 60px;
 }
 </style>
 

ui/src/components/Admin.vue

@@ -1,150 +0,0 @@
-<template>
-  <div class="admin">
-    <h1>Geburtstags-Tool</h1>
-
-    <form v-if="!authenticated" @submit="login">
-      <h2>Admin-Login für Geburtstagstool</h2>
-      <input type="text" placeholder="Benutzername" v-model="apiCreds.name" required />
-      <input type="password" placeholder="Passwort" v-model="apiCreds.pass" required />
-
-      <button>Einloggen</button>
-    </form>
-
-    <form v-else-if="!reviewed" @submit="review">
-      <h2>Dateneingabe</h2>
-
-      <h3>Empfänger</h3>
-
-      <select v-model="recipient.title" required>
-        <option value selected>Geschlecht auswählen …</option>
-        <option value="m">männlich</option>
-        <option value="f">weiblich</option>
-      </select>
-      <input type="text" placeholder="Vorname" v-model="recipient.first" required />
-      <input type="text" placeholder="Nachname" v-model="recipient.last" required />
-      <input type="text" placeholder="E-Mail Adresse" v-model="recipient.email" required />
-
-      <h3>Mail</h3>
-
-      <input type="text" placeholder="Betreff" v-model="mail.subject" required />
-      <textarea v-model="mail.body" />
-
-      <button>Vorschau</button>
-    </form>
-
-    <form v-else @submit="send" @reset="back">
-      <h2>Vorschau</h2>
-
-      <button>Sieht gesund aus. Absenden!</button>
-      <button type="reset" class="back">Da fehlt noch was. Zurück!</button>
-    </form>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Admin",
-
-  data: () => ({
-    authenticated: false,
-    reviewed: false,
-
-    apiCreds: {
-      name: "",
-      pass: "",
-    },
-
-    recipient: {
-      title: "",
-      first: "",
-      last: "",
-      email: "",
-    },
-
-    mail: {
-      subject: "Happy Birthday! Es gibt etwas zu feiern!",
-      body: `###ANREDE### ###VORNAME###,
-heute übersenden wir Dir eine Email, weil es etwas zu feiern gibt.
-Zum Geburtstag wünschen wir Dir alles Gute.
-
-Deine Überraschungskarte kannst Du hier abrufen:
-###PHOTO_LINK###
-
-Vergiss aber nicht, Deine Lautsprecher einzuschalten, sonst verpasst Du etwas ;)
-
-Lenaistische Grüße,
-Deine Lenaisten`,
-    },
-  }),
-
-  methods: {
-    login(event) {
-      this.authenticated = true;
-      event.preventDefault();
-    },
-
-    review(event) {
-      this.reviewed = true;
-      event.preventDefault();
-    },
-
-    send(event) {
-      event.preventDefault();
-    },
-
-    back(event) {
-      if (this.reviewed) {
-        this.reviewed = false;
-      } else {
-        this.authenticated = false;
-      }
-      event.preventDefault();
-    },
-  },
-};
-</script>
-
-<style scoped>
-div.admin {
-  margin: auto;
-  max-width: 1024px;
-}
-
-label {
-  font-weight: bold;
-}
-
-input,
-select,
-textarea {
-  width: 100%;
-  padding: 12px 20px;
-  margin: 8px 0;
-  display: inline-block;
-  box-sizing: border-box;
-}
-
-textarea {
-  height: 250px;
-  min-height: 250px;
-  resize: vertical;
-}
-
-button {
-  background-color: #4caf50;
-  color: white;
-  padding: 14px 20px;
-  margin: 8px 0;
-  border: none;
-  cursor: pointer;
-  width: 100%;
-}
-
-button.back {
-  background-color: #f44336;
-}
-
-button:hover {
-  opacity: 0.8;
-}
-</style>

ui/src/components/BDay.vue

@@ -29,7 +29,7 @@
 
 <script>
 export default {
-  name: "Gratulation",
+  name: "BDay",
 
   data: () => ({
     videoQueue: ["part1", "part2"],
@@ -69,7 +69,7 @@ export default {
       return source;
     },
 
-    videoTimeUpdated() {
+    videoTimeUpdated: function () {
       // show play button after 3 seconds, then disable this event
       if (this.player.currentTime > 3) {
         this.playVisible = true;
@@ -77,21 +77,21 @@ export default {
       }
     },
 
-    videoLoaded() {
+    videoLoaded: function () {
       this.placePlay();
       if (this.currentVideo >= 0) {
         this.player.play();
       }
     },
 
-    playClicked() {
+    playClicked: function () {
       this.playVisible = false;
 
       this.currentVideo += 1;
       this.player.source = this.getVideoSource(this.currentVideo);
     },
 
-    placePlay() {
+    placePlay: function () {
       let top = (this.$refs.plyrContainer.offsetHeight - 100) / 2;
       let left = (this.$refs.plyrContainer.offsetWidth - 100) / 2;