feat: implement 'All details' modal

modrinth · Oct 29, 2024 · 24d3a38 · 24d3a38
1 parent f2e4b7e
commit 24d3a38
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 10 deletions.
diff --git a/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue b/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue
@@ -34,10 +34,20 @@
 
     <NewModal
       ref="detailsModal"
-      :header="`${props.serverName ? props.serverName : 'Server'} Details`"
+      :header="`All of ${props.serverName ? props.serverName : 'Server'} info`"
       @close="closeDetailsModal"
     >
-      Under construction 😺
+      <UiServersServerInfoLabels
+        :server-data="serverData"
+        :show-game-label="true"
+        :show-loader-label="true"
+        :uptime-seconds="uptimeSeconds"
+        :column="true"
+        class="mb-6 flex flex-col gap-2"
+      />
+      <ButtonStyled type="standard" color="brand" @click="closeDetailsModal">
+        <button class="w-full">Close</button>
+      </ButtonStyled>
     </NewModal>
 
     <div class="flex flex-row items-center gap-2 rounded-lg">
@@ -112,6 +122,8 @@ const props = defineProps<{
   isActioning: boolean;
   disabled: boolean;
   serverName?: string;
+  serverData: object;
+  uptimeSeconds: number;
 }>();
 
 const router = useRouter();
@@ -258,6 +270,13 @@ watch(
   },
 );
 
+watch(
+  () => router.currentRoute.value.fullPath,
+  () => {
+    closeDetailsModal();
+  },
+);
+
 watch(
   () => props.isActioning,
   (newValue) => {

diff --git a/apps/frontend/src/components/ui/servers/ServerInfoLabels.vue b/apps/frontend/src/components/ui/servers/ServerInfoLabels.vue
@@ -9,12 +9,18 @@
       v-if="showLoaderLabel"
       :loader="serverData.loader!"
       :loader-version="serverData.loader_version ?? ''"
+      :no-separator="column"
     />
     <UiServersServerSubdomainLabel
       v-if="serverData.net.domain"
       :subdomain="serverData.net.domain"
+      :no-separator="column"
+    />
+    <UiServersServerUptimeLabel
+      v-if="uptimeSeconds"
+      :uptime-seconds="uptimeSeconds"
+      :no-separator="column"
     />
-    <UiServersServerUptimeLabel v-if="uptimeSeconds" :uptime-seconds="uptimeSeconds" />
   </div>
 </template>
 
@@ -36,5 +42,9 @@ defineProps({
     type: Number,
     required: false,
   },
+  column: {
+    type: Boolean,
+    required: false,
+  },
 });
 </script>
diff --git a/apps/frontend/src/components/ui/servers/ServerLoaderLabel.vue b/apps/frontend/src/components/ui/servers/ServerLoaderLabel.vue
@@ -4,7 +4,7 @@
     v-tooltip="'Change server loader'"
     class="flex min-w-0 flex-row items-center gap-4 truncate"
   >
-    <div class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>
+    <div v-if="!noSeparator" class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>
     <div class="flex flex-row items-center gap-2">
       <UiServersIconsLoaderIcon :loader="loader" class="flex shrink-0 [&&]:size-5" />
       <NuxtLink
@@ -20,6 +20,7 @@
 
 <script setup lang="ts">
 defineProps<{
+  noSeparator?: boolean;
   loader: string;
   loaderVersion: string;
 }>();

diff --git a/apps/frontend/src/components/ui/servers/ServerSubdomainLabel.vue b/apps/frontend/src/components/ui/servers/ServerSubdomainLabel.vue
@@ -4,7 +4,7 @@
     v-tooltip="'Copy subdomain'"
     class="flex min-w-0 flex-row items-center gap-4 truncate hover:cursor-pointer"
   >
-    <div class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>
+    <div v-if="!noSeparator" class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>
     <div class="flex flex-row items-center gap-2">
       <LinkIcon class="flex size-5 shrink-0" />
       <div
@@ -22,6 +22,7 @@
 import { LinkIcon } from "@modrinth/assets";
 const props = defineProps<{
   subdomain: string;
+  noSeparator?: boolean;
 }>();
 
 const copySubdomain = () => {

diff --git a/apps/frontend/src/components/ui/servers/ServerUptimeLabel.vue b/apps/frontend/src/components/ui/servers/ServerUptimeLabel.vue
@@ -5,12 +5,14 @@
     class="flex min-w-0 flex-row items-center gap-4"
     data-pyro-uptime
   >
-    <div class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>
+    <div v-if="!noSeparator" class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>
 
-    <UiServersTimer class="flex size-5 shrink-0" />
-    <time class="truncate text-sm font-semibold" :aria-label="verboseUptime">
-      {{ formattedUptime }}
-    </time>
+    <div class="flex gap-2">
+      <UiServersTimer class="flex size-5 shrink-0" />
+      <time class="truncate text-sm font-semibold" :aria-label="verboseUptime">
+        {{ formattedUptime }}
+      </time>
+    </div>
   </div>
 </template>
 
@@ -19,6 +21,7 @@ import { computed } from "vue";
 
 const props = defineProps<{
   uptimeSeconds: number;
+  noSeparator?: boolean;
 }>();
 
 const formattedUptime = computed(() => {

diff --git a/apps/frontend/src/pages/servers/manage/[id].vue b/apps/frontend/src/pages/servers/manage/[id].vue
@@ -35,6 +35,9 @@
                 :is-online="isServerRunning"
                 :is-actioning="isActioning"
                 :disabled="isActioning || !!error"
+                :server-name="serverData.name"
+                :server-data="serverData"
+                :uptime-seconds="uptimeSeconds"
                 @action="sendPowerAction"
               />
             </div>