Added real frontend

Made hostname global and easy to change in docker

src/components/items/extraButtons.vue

@@ -2,6 +2,7 @@
    <div class="extraButtonsDiv">
       <button @click="resetPlaylist">Reset playlist</button>
       <button @click="resetPoints">Reset points</button>
+      <button @click="syncGames">Sync games</button>
       <button @click="startSoundTest">Sound test</button>
    </div>
 </template>
@@ -16,7 +17,6 @@ export default {
    },
    methods: {
       async resetPoints() {
-         /* await this.APIresetPlaylist(); */
          this.$store.dispatch("resetPlayerScore");
          this.$store.dispatch("resetPlayerWelcomed");
          this.$store.dispatch("setRoundStarted", false);
@@ -27,6 +27,17 @@ export default {
          this.$store.dispatch("setCurrentlyLoadingTrack", "N/A");
          this.$store.dispatch("setCurrentTrackHidden", false);
       },
+     async syncGames() {
+         await this.APIsyncGames();
+         await this.APIresetPlaylist();
+         this.$store.dispatch("resetPlayerScore");
+         this.$store.dispatch("resetPlayerWelcomed");
+         this.$store.dispatch("setRoundStarted", false);
+         this.$store.dispatch("updatePlaylistHistory", this.emptyPlaylist);
+         this.$store.dispatch("setCurrentlyLoadingTrack", "N/A");
+         this.$store.dispatch("setCurrentTrackHidden", false);
+         this.$store.dispatch("reloadGamesList", true);
+     },
       startSoundTest() {
          this.$emit("start-sound-test");
       },
@@ -45,6 +56,21 @@ export default {
                });
          });
       },
+       APIsyncGames() {
+         return new Promise((resolve, reject) => {
+            this.axios({
+               method: "get",
+               url: `${arne.hostname}/sync`,
+            })
+               .then(() => {
+                  resolve();
+               })
+               .catch(function(error) {
+                  console.log(error);
+                  reject();
+               });
+         });
+      },
    },
 };
 </script>