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,99 @@
+<template>
+   <div class="theMainDiv">
+      <div class="mainFirstRow">
+         <currently-playing></currently-playing>
+         <inspiration-window></inspiration-window>
+      </div>
+      <div class="mainSecondRow">
+         <playlist-history
+            ref="playlistHistory"
+            @play-selected-track="playSelectedTrack"
+         ></playlist-history>
+         <players-window
+            @play-welcome-sound="playWelcomeSound"
+            @play-winning-sound="playWinningSound"
+         ></players-window>
+      </div>
+      <extra-buttons
+         v-if="$parent.displayWhenDesktop"
+         @start-sound-test="startSoundTest"
+      ></extra-buttons>
+      <the-footer
+         ref="theFooter"
+         @scroll-to-bottom-playlist-history="scrollToBottomPlaylistHistory"
+      ></the-footer>
+      <!-- <the-footer ref="theFooter"></the-footer> -->
+   </div>
+</template>
+
+<script>
+import currentlyPlaying from "../items/CurrentlyPlaying.vue";
+import inspirationWindow from "../items/InspirationWindow.vue";
+import playersWindow from "../items/playersWindow.vue";
+import playlistHistory from "../items/playlistHistory.vue";
+import extraButtons from "../items/extraButtons.vue";
+import theFooter from "./TheFooter.vue";
+
+export default {
+   components: {
+      currentlyPlaying,
+      playersWindow,
+      playlistHistory,
+      inspirationWindow,
+      extraButtons,
+      theFooter,
+   },
+   methods: {
+      playSelectedTrack(track) {
+         this.$refs.theFooter.playSpecificTrack(track);
+      },
+      scrollToBottomPlaylistHistory() {
+         this.$refs.playlistHistory.scrollToBottom();
+      },
+      startSoundTest() {
+         this.$refs.theFooter.startSoundTest();
+      },
+      playWelcomeSound() {
+         this.$refs.theFooter.playWelcomeSound();
+      },
+      playWinningSound() {
+         this.$refs.theFooter.playWinningSound();
+      },
+   },
+};
+</script>
+
+<style scoped>
+.theMainDiv {
+   display: flex;
+   flex-wrap: wrap;
+   width: 100%;
+}
+
+.mainFirstRow {
+   display: flex;
+   flex-wrap: nowrap;
+   width: 100%;
+   margin: 0.5vw;
+}
+.mainSecondRow {
+   display: flex;
+   flex-wrap: nowrap;
+   width: 100%;
+   margin: 0 0.5vw;
+}
+
+@media only screen and (max-width: 1000px) {
+   .mainFirstRow {
+      margin: 0;
+      margin-top: 0.5vw;
+   }
+   .mainSecondRow {
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+      margin: 0;
+      margin-top: 0.5vw;
+   }
+}
+</style>