1.1.1:

4IM: Anpassung Fehlende Teile und Bonusteil
4IM: Öffentliche Ergebnisse

client/src/plugins/router.js

@@ -64,6 +64,12 @@ const routes = [
         props: true
       },
       {
+        path: 'e/:id',
+        name: 'Event',
+        component: () => import('../views/components/event/public'),
+        props: true
+      },
+      {
         path: 'admin/:id',
         name: 'Schulverwaltung',
         component: () => import('../views/components/admin/school'),

client/src/views/components/event/public.vue

@@ -0,0 +1,100 @@
+<template>
+  <v-container
+    fluid
+    tag="section"
+  >
+    <h1>{{ name }}</h1>
+    <v-data-table
+      :headers="ergebnis.headers"
+      :items="ergebnisse"
+      sort-by="time"
+      :items-per-page="-1"
+    >
+      <template #item.time="{item}">
+        {{ item.time | float2_0 }}s
+      </template>
+    </v-data-table>
+  </v-container>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+
+const timeslotquery = '_id time duration team { _id name } result { bonus runtime calctime results { _id teile bonus wechsel bonusteil fehler } }'
+const query = `_id name date _organizer organizer { name } apparatus { _apparatus apparatus { name logo } elements bonus malus } timeslots { ${timeslotquery} }`
+
+export default {
+  name: 'Public',
+
+  props: {
+    id: {
+      type: String,
+      required: true
+    }
+  },
+
+  data: () => ({
+    Event: null,
+    ApparatusFind: [],
+    ergebnis: {
+      headers: [
+        {
+          text: 'Platz',
+          value: 'platz',
+          sortable: false
+        },
+        {
+          text: 'Mannschaft',
+          value: 'team',
+          sortable: false
+        },
+        {
+          text: 'Zeit',
+          value: 'time',
+          sortable: false
+        }
+      ]
+    }
+  }),
+
+  computed: {
+    name () {
+      return this.Event?.name
+    },
+    ergebnisse () {
+      return this.Event?.timeslots?.reduce((acc, curr) => {
+        if (curr.team && curr.result) {
+          acc.push({ team: curr.team.name, time: curr.result.calctime })
+        }
+        return acc
+      }, []).sort((a, b) => a.time < b.time ? -1 : 1).map((m, i) => ({ ...m, platz: i + 1 }))
+    }
+  },
+
+  apollo: {
+    Event: {
+      query: gql`query($event: UUID!) { Event(id: $event) { ${query} } }`,
+      variables () {
+        return {
+          event: this.id
+        }
+      },
+      subscribeToMore: {
+        document: gql`subscription($id: UUID!) { EventUpdated(id: $id) { ${query} } }`,
+        variables () {
+          return {
+            id: this.id
+          }
+        }
+      }
+    },
+    ApparatusFind: {
+      query: gql`query { ApparatusFind { _id name }}`
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

client/src/views/components/start_4im.vue

@@ -8,12 +8,45 @@
     <h2><b>4<span style="font-weight:400;">IN</span>MOTION</b> ist ein Mannschaftswettbewerb, bei dem eine Anzahl von zwei bis vier Personen in einem Team antreten. Es ist dabei unerheblich, ob das Team rein männlich, rein weiblich oder als gemischtes Team zusammengestellt wird.</h2>
     <h3>Ziel des Wettbewerbs ist es, eine möglichst schnelle Zeit in einem Geräte-Parcours zu erzielen. Zusätzlich sind an den einzelnen Geräten turnerische Elemente zu erfüllen.</h3>
     <h3>Der Parcours kann sich aus den unterschiedlichsten Turngeräten zusammensetzen, es sind hierbei vier Geräte zu verwenden. An jedem Gerät müssen fünf Elemente aus der Elementeliste gezeigt werden. Jedes Teammitglied kann ein oder zwei Geräte turnen, allerdings nicht direkt hintereinander. Es zählt die Team-Zeit, nicht die beste Ausführung! Allerdings könnt ihr euch mit einer guten Ausführung einen kleinen Zeitbonus erturnen. So oder so garantiert 4INMOTION Spaß und Action beim gemeinsamen Turnen.</h3>
+    <h2>Vergangene Events:</h2>
+    <v-data-table
+      :headers="[
+        { text: 'Datum', value: 'date', sortable: false },
+        { text: 'Name', value: 'name', sortable: false }
+      ]"
+      :items="e"
+      @click:row="open"
+    />
   </v-container>
 </template>
 
 <script>
+import gql from 'graphql-tag'
+
 export default {
-  name: 'start_4im'
+  name: 'start_4im',
+
+  data: () => ({
+    EventFind: []
+  }),
+
+  computed: {
+    e () {
+      return this.EventFind.filter(e => new Date(e.date).getTime() <= new Date().getTime() + 3600 * 1000 * 24 * 7).sort((a, b) => a.date < b.date ? 1 : -1)
+    }
+  },
+
+  methods: {
+    open (item) {
+      this.$router.push(`/e/${item._id}`)
+    }
+  },
+
+  apollo: {
+    EventFind: {
+      query: gql`query { EventFind { _id name date } }`
+    }
+  }
 }
 </script>