Added real frontend

Made hostname global and easy to change in docker
2022-06-21 17:48:34 +02:00
parent 3536cf3fcf
commit b952d08aad
52 changed files with 31463 additions and 27016 deletions
@@ -0,0 +1,83 @@
+<template>
+   <div class="extraButtonsDiv">
+      <button @click="resetPlaylist">Reset playlist</button>
+      <button @click="resetPoints">Reset points</button>
+      <button @click="startSoundTest">Sound test</button>
+   </div>
+</template>
+
+<script>
+import arne from '../../arne.js'
+export default {
+   data() {
+      return {
+         emptyPlaylist: [],
+      };
+   },
+   methods: {
+      async resetPoints() {
+         /* await this.APIresetPlaylist(); */
+         this.$store.dispatch("resetPlayerScore");
+         this.$store.dispatch("resetPlayerWelcomed");
+         this.$store.dispatch("setRoundStarted", false);
+      },
+      async resetPlaylist() {
+         await this.APIresetPlaylist();
+         this.$store.dispatch("updatePlaylistHistory", this.emptyPlaylist);
+         this.$store.dispatch("setCurrentlyLoadingTrack", "N/A");
+         this.$store.dispatch("setCurrentTrackHidden", false);
+      },
+      startSoundTest() {
+         this.$emit("start-sound-test");
+      },
+      APIresetPlaylist() {
+         return new Promise((resolve, reject) => {
+            this.axios({
+               method: "get",
+               url: `${arne.hostname}/music/reset`,
+            })
+               .then(() => {
+                  resolve();
+               })
+               .catch(function(error) {
+                  console.log(error);
+                  reject();
+               });
+         });
+      },
+   },
+};
+</script>
+
+<style scoped>
+.extraButtonsDiv {
+   display: flex;
+   margin-top: 2px;
+   margin-left: 10px;
+}
+
+button {
+   display: flex;
+   align-items: center;
+   height: 65%;
+   margin-right: 0.4vw;
+   border-radius: 10px;
+   border-width: 1px;
+}
+
+@media only screen and (max-width: 1000px) {
+   .extraButtonsDiv {
+      display: flex;
+      position: relative;
+      flex-wrap: wrap;
+      justify-content: center;
+   }
+
+   button {
+      width: 51vw;
+      height: 40px;
+      margin-bottom: 10px;
+      justify-content: center;
+   }
+}
+</style>