ff-admin/src/views/admin/management/version/VersionDisplay.vue

<template>
  <MainTemplate title="Versions-Kontrolle" :useStagedOverviewLink="false">
    <template #diffMain>
      <div class="h-full flex flex-col px-7 overflow-hidden">
        <div class="h-1/2 flex flex-col gap-2 p-2 border border-gray-300 rounded-t-md">
          <div class="flex flex-row justify-between border-b-2 border-gray-300">
            <h1 class="text-xl font-semibold">Client</h1>
            <p>
              V{{ clientVersion }} ({{
                new Date(clientVersionRelease).toLocaleDateString("de", {
                  month: "2-digit",
                  day: "2-digit",
                  year: "numeric",
                  hour: "2-digit",
                  minute: "2-digit",
                })
              }})
            </p>
          </div>
          <div class="grow flex flex-col gap-4 overflow-y-scroll">
            <div v-for="version in newerClientVersions">
              <p>
                <span class="font-semibold text-lg">V{{ version.title }}</span> vom
                {{
                  new Date(version.isoDate).toLocaleDateString("de", {
                    month: "2-digit",
                    day: "2-digit",
                    year: "numeric",
                  })
                }}
              </p>
              <div class="flex flex-col" v-html="version['content:encoded']"></div>
            </div>
            <div v-if="newerClientVersions.length == 0" class="flex items-center justify-center">
              <p>Der Client ist auf der neuesten Version.</p>
            </div>
          </div>
        </div>
        <div class="h-1/2 flex flex-col gap-2 p-2 border border-gray-300 rounded-b-md">
          <div class="flex flex-row justify-between border-b-2 border-gray-300">
            <h1 class="text-xl font-semibold">Server</h1>
            <p>
              V{{ serverVersion }} ({{
                new Date(serverVersionRelease).toLocaleDateString("de", {
                  month: "2-digit",
                  day: "2-digit",
                  year: "numeric",
                  hour: "2-digit",
                  minute: "2-digit",
                })
              }})
            </p>
          </div>
          <div class="grow flex flex-col gap-2 overflow-y-scroll">
            <div v-for="version in newerServerVersions">
              <p>
                <span class="font-semibold text-lg">V{{ version.title }}</span> vom
                {{
                  new Date(version.isoDate).toLocaleDateString("de", {
                    month: "2-digit",
                    day: "2-digit",
                    year: "numeric",
                  })
                }}
              </p>
              <div class="flex flex-col" v-html="version['content:encoded']"></div>
            </div>
            <div v-if="newerServerVersions.length == 0" class="flex items-center justify-center">
              <p>Der Server ist auf der neuesten Version.</p>
            </div>
          </div>
        </div>
      </div>
    </template>
  </MainTemplate>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import MainTemplate from "@/templates/Main.vue";
import clientPackage from "../../../../../package.json";
import type { Releases } from "@/viewmodels/version.models";
</script>

<script lang="ts">
export default defineComponent({
  data() {
    return {
      serverVersion: "" as string,
      serverRss: null as null | Releases,
      clientVersion: "" as string,
      clientRss: null as null | Releases,
    };
  },
  computed: {
    newerServerVersions() {
      if (!this.serverRss) return [];
      return this.serverRss.items.filter((i) => new Date(i.isoDate) > new Date(this.serverVersionRelease));
    },
    newerClientVersions() {
      if (!this.clientRss) return [];
      return this.clientRss.items.filter((i) => new Date(i.isoDate) > new Date(this.clientVersionRelease));
    },
    serverVersionRelease() {
      if (!this.serverRss) return "";
      return this.serverRss.items.find((i) => i.title == this.serverVersion)?.isoDate ?? "";
    },
    clientVersionRelease() {
      if (!this.clientRss) return "";
      return this.clientRss.items.find((i) => i.title == this.clientVersion)?.isoDate ?? "";
    },
  },
  mounted() {
    this.clientVersion = clientPackage.version;
    this.getServerVersion();
    this.getServerFeed();
    this.getClientFeed();
  },
  methods: {
    getServerVersion() {
      this.$http
        .get("/server/version")
        .then((res) => {
          this.serverVersion = res.data.version;
        })
        .catch(() => {});
    },
    getServerFeed() {
      this.$http
        .get("/server/serverrss")
        .then((res) => {
          this.serverRss = res.data;
        })
        .catch(() => {});
    },
    getClientFeed() {
      this.$http
        .get("/server/clientrss")
        .then((res) => {
          this.clientRss = res.data;
        })
        .catch(() => {});
    },
  },
});
</script>