Irgendwas mit 24 Türchen

ui/package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "bulma": "^0.9.4",
     "core-js": "^3.8.3",
     "vue": "^3.2.13",
     "vue-class-component": "^8.0.0-0"

ui/src/App.vue

@@ -1,31 +1,26 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png" />
+  <div class="container">
-  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
+    <div class="section">
-  <CalendarBild />
+      <h1 class="title has-text-centered is-uppercase">Adventskalender</h1>
-  <CalendarBild />
+      <h2 class="subtitle has-text-centered">Der Gelöt</h2>
+
+      <CalendarDoor v-for="(_, index) in 24" :key="index" :day="index" />
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
 import { Options, Vue } from "vue-class-component";
-import HelloWorld from "./components/HelloWorld.vue";
+import CalendarDoor from "./components/CalendarDoor.vue";
-import CalendarBild from "./components/CalendarBild.vue";
 
 @Options({
   components: {
-    HelloWorld,
+    CalendarDoor,
-    CalendarBild,
   },
 })
 export default class App extends Vue {}
 </script>
 
 <style>
-#app {
+/* @import "@/bulma/"; */
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
 </style>

ui/src/components/CalendarBild.vue

@@ -1,10 +0,0 @@
-<template>
-  <img src="http://localhost:8000/api/days/picture/1" />
-</template>
-
-<script>
-export default {};
-</script>
-
-<style>
-</style>

ui/src/components/CalendarDoor.vue

@@ -0,0 +1,25 @@
+<template>
+  <a
+    class="button"
+    :href="'http://localhost:8000/api/days/picture/' + day"
+    target="_blank"
+  >
+    Türken {{ day + 1 }}
+  </a>
+</template>
+
+<script lang="ts">
+import { Vue, Options } from "vue-class-component";
+
+@Options({
+  props: {
+    day: Number,
+  },
+})
+export default class CalendarDoor extends Vue {
+  day!: number;
+}
+</script>
+
+<style>
+</style>

ui/src/components/HelloWorld.vue

@@ -1,63 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-
-@Options({
-  props: {
-    msg: String
-  }
-})
-export default class HelloWorld extends Vue {
-  msg!: string
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

ui/src/main.ts

@@ -1,4 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 
+import "bulma/css/bulma.css"
+
 createApp(App).mount('#app')

ui/yarn.lock

@@ -2222,6 +2222,11 @@ buffer@^5.5.0:
     base64-js "^1.3.1"
     ieee754 "^1.1.13"
 
+bulma@^0.9.4:
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.4.tgz#0ca8aeb1847a34264768dba26a064c8be72674a1"
+  integrity sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==
+
 bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"