ff-admin/src/views/account/VersionDisplay.vue

<template>
  <MainTemplate :useStagedOverviewLink="false">
    <template #topBar>
      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
        <h1 class="font-bold text-xl h-8">Versions-Kontrolle</h1>
      </div>
    </template>
    <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 }}</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: "long",
                    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 }}</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: "long",
                    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) => this.compareVersionStrings(this.serverVersion, i.title) < 0);
    },
    newerClientVersions() {
      if (!this.clientRss) return [];
      return this.clientRss.items.filter((i) => this.compareVersionStrings(this.clientVersion, i.title) < 0);
    },
  },
  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(() => {});
    },
    async getServerFeed() {
      this.$http
        .get("/server/serverrss")
        .then((res) => {
          this.serverRss = res.data;
        })
        .catch(() => {});
    },
    async getClientFeed() {
      this.$http
        .get("/server/clientrss")
        .then((res) => {
          this.clientRss = res.data;
        })
        .catch(() => {});
    },
    compareVersionStrings(activeVersion: string, compareVersion: string) {
      const parseVersion = (version: string) => {
        const [main, tag] = version.split("-");
        const [major, minor, patch] = main.split(".").map(Number);
        return { major, minor, patch, tag };
      };

      if (!activeVersion || !compareVersion) return 0;

      const versionA = parseVersion(activeVersion);
      const versionB = parseVersion(compareVersion);

      if (versionA.major !== versionB.major) {
        return versionA.major - versionB.major;
      }
      if (versionA.minor !== versionB.minor) {
        return versionA.minor - versionB.minor;
      }
      if (versionA.patch !== versionB.patch) {
        return versionA.patch - versionB.patch;
      }

      if (versionA.tag && !versionB.tag) return -1;
      if (!versionA.tag && versionB.tag) return 1;
      if (versionA.tag && versionB.tag) {
        const tags = ["alpha", "beta", ""];
        return tags.indexOf(versionA.tag) - tags.indexOf(versionB.tag);
      }

      return 0;
    },
  },
});
</script>