ritzenbergen-frontend/src/views/Bulitipp.vue

<script lang="ts">
import Navbar from "../components/Navbar.vue";
import Footer from "../components/Footer.vue";
import Modal from "../components/Modal.vue";
import Uebersicht from "../components/bulitipp/Uebersicht.vue";
import Rangliste from "../components/bulitipp/Rangliste.vue";
import Paarungsergebnisse from "../components/bulitipp/Paarungsergebnisse.vue";
import Tabelle from "../components/bulitipp/Tabelle.vue";

export default {
  components: {
    Navbar,
    Footer,
    Modal,
    Uebersicht,
    Rangliste,
    Paarungsergebnisse,
    Tabelle
  },
  computed: {
    tippenoffen() {
      return this.$route.path === "/bulitipp/tippen";
    },
    users() {
      return [
        {
          id: 1,
          name: "User 1",
          points: 10,
          kuerzel: "U1",
        },
        {
          id: 2,
          name: "User 2",
          points: 20,
          kuerzel: "U2",
        },
        {
          id: 3,
          name: "User 3",
          points: 10,
          kuerzel: "U3",
        },
        {
          id: 4,
          name: "User 4",
          points: 20,
          kuerzel: "U4",
        },
        {
          id: 5,
          name: "User 5",
          points: 10,
          kuerzel: "U5",
        },
        {
          id: 6,
          name: "User 6",
          points: 20,
          kuerzel: "U6",
        },
      ].sort((a, b) => b.points - a.points);
    },
    teams() {
      return {
        1: {
          name: "Team 1",
        },
        2: {
          name: "Team 2",
        },
        3: {
          name: "Team 3",
        },
        4: {
          name: "Team 4",
        },
        5: {
          name: "Team 5",
        },
        6: {
          name: "Team 6",
        },
        7: {
          name: "Team 7",
        },
        8: {
          name: "Team 8",
        },
        9: {
          name: "Team 9",
        },
        10: {
          name: "Team 10",
        },
        11: {
          name: "Team 11",
        },
        12: {
          name: "Team 12",
        },
        13: {
          name: "Team 13",
        },
        14: {
          name: "Team 14",
        },
        15: {
          name: "Team 15",
        },
        16: {
          name: "Team 16",
        },
        17: {
          name: "Team 17",
        },
        18: {
          name: "Team 18",
        },
      };
    },
    paarungen() {
      return [
        {
          id: 1,
          team1: 1,
          team2: 2,
          result1: 1,
          result2: 0,
        },
        {
          id: 2,
          team1: 3,
          team2: 4,
          result1: 1,
          result2: 0,
        },
        {
          id: 3,
          team1: 5,
          team2: 6,
          result1: 1,
          result2: 0,
        },
        {
          id: 4,
          team1: 7,
          team2: 8,
          result1: 2,
          result2: 1,
        },
        {
          id: 5,
          team1: 9,
          team2: 10,
          result1: 0,
          result2: 0,
        },
        {
          id: 6,
          team1: 11,
          team2: 12,
          result1: 3,
          result2: 2,
        },
        {
          id: 7,
          team1: 13,
          team2: 14,
          result1: 2,
          result2: 2,
        },
        {
          id: 8,
          team1: 15,
          team2: 16,
          result1: 0,
          result2: 1,
        },
        {
          id: 9,
          team1: 17,
          team2: 18,
          result1: 3,
          result2: 3,
        },
      ];
    },
  },
  methods: {
    tippenschliessen() {
      this.$router.push("/bulitipp");
    },
  },
};
</script>
<template>
  <Navbar buttontext="Tippen" mainlink="/bulitipp/tippen" />

  <section
    class="header16 cid-u6k7q0xIhk bulitipp mbr-fullscreen mbr-parallax-background"
    id="hero-17-u6k7q0xIhk"
  >
    <div
      class="mbr-overlay"
      style="opacity: 0.3; background-color: rgb(0, 0, 0)"
    ></div>
    <div class="container-fluid">
      <div class="row">
        <div class="content-wrap col-12 col-md-10">
          <h1
            class="mbr-section-title mbr-fonts-style mbr-white mb-4 display-1"
          >
            <strong>Willkommen im Bundesliga Tippspiel</strong>
          </h1>
          <p class="mbr-fonts-style mbr-text mbr-white mb-4 display-7">
            Saison
          </p>
          <br /><br />
        </div>
      </div>
    </div>
  </section>

  <Modal v-show="tippenoffen" @closemodal="tippenschliessen">
    <h1>Test</h1>
  </Modal>



  <Uebersicht :users="users" />

  <!-- Rangliste -->

  <Rangliste :users="users"/>

  <!-- Paarungsergebnisse -->

  <Paarungsergebnisse :paarungen="paarungen" :teams="teams"/>

  <!-- Punktetabelle -->
  <Tabelle :users="users"/>

  <br />
  <br />
  <br />

  <Footer />
</template>
<style scoped>
@import "../assets/css/bulitipp2.css";
#hero-17-u6k7q0xIhk{
  margin-bottom: 100px;
}
</style>