Initial rewrite of the apps view

2024-12-29 00:36:48 +01:00
parent a42c7e4735
commit 55e0d734df
6 changed files with 164 additions and 14 deletions
@@ -0,0 +1,129 @@
+<template>
+  <div class="content">
+    <h1 class="section-header">{{ $t('apps.title') }}</h1>
+
+    <div class="grid">
+      <a v-for="app in apps" :key="app.id" class="item" :href="'https://' + app.fqdn" target="_blank" v-tooltip="app.fqdn">
+        <img :src="API_ORIGIN + app.iconUrl"/>
+        <div class="label">{{ app.label || app.subdomain || app.fqdn }}</div>
+        <a class="config" :href="`#/app/${app.id}/info`"><Icon icon="fa-solid fa-cog" /></a>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { Button, Icon } from 'pankow';
+
+import AppsModel from '../models/AppsModel.js';
+
+const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
+const accessToken = localStorage.token;
+
+const appsModel = AppsModel.create(API_ORIGIN, accessToken);
+
+export default {
+  name: 'AppsView',
+  components: {
+    Button,
+    Icon,
+  },
+  data() {
+    return {
+      API_ORIGIN,
+      ready: false,
+      apps: [],
+    };
+  },
+  methods: {
+  },
+  async mounted() {
+    this.apps = await appsModel.list();
+    console.log(this.apps)
+    this.ready = true;
+  }
+};
+
+</script>
+
+<style scoped>
+
+.grid {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  transition: 300ms;
+  flex-wrap: wrap;
+  justify-content: start;
+  align-content: start;
+}
+
+.item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 190px;
+  height: 180px;
+  margin: 10px;
+  overflow: hidden;
+  border-radius: 10px;
+  background-color: var(--card-background);
+}
+
+.item:focus,
+.item:hover {
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
+  background-color: var(--pankow-color-background-hover);
+  text-decoration: none;
+}
+
+.item img {
+  width: 80px;
+  height: 80px;
+}
+
+.label {
+  font-size: 18px;
+  font-weight: 100;
+  margin: 10px;
+  color: var(--pankow-text-color);
+}
+
+.item:focus .label,
+.item:hover .label {
+  text-decoration: none;
+  color: var(--accent-color);;
+}
+
+.config {
+  position: absolute;
+  color: var(--pankow-text-color);
+  font-size: 18px;
+  cursor: pointer;
+  width: 50px;
+  height: 50px;
+  border-top-right-radius: 10px;
+  right: 0;
+  top: 0;
+  opacity: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.config:focus,
+.config:hover {
+  text-decoration: none;
+  color: var(--accent-color);;
+  opacity: 1;
+}
+
+.item:focus .config,
+.item:hover .config {
+  opacity: 1;
+}
+
+</style>