spacebar/website
spacebar/website
Watch
12
0
Fork
You've already forked website
 0
Code Issues 1 Pull requests 1 Projects Releases Packages Wiki Activity Actions

run lint

Browse source
This commit is contained in:
kittentm 2026-05-14 06:52:36 +02:00
commit 1ce7da6a6f
No known key found for this signature in database
GPG key ID: AC43DFDBC1F44A91
4 changed files with 35 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

28
app/components/ServiceCard.vue
View file

@ -2,20 +2,28 @@
<div class="service-card">
<div class="card-header">
<div class="service-info">
<h3 class="service-name">{{ name }}</h3>
<span class="info-tooltip" title="Click for historical uptime metrics">?</span>
<h3 class="service-name">
{{ name }}
</h3>
<span
class="info-tooltip"
title="Click for historical uptime metrics"
>?</span>
</div>
<div class="current-status-dot" :class="status.toLowerCase()"></div>
<div
class="current-status-dot"
:class="status.toLowerCase()"
/>
</div>
<div class="uptime-graph">
<div
v-for="(day, index) in uptimeHistory"
<div
v-for="(day, index) in uptimeHistory"
:key="index"
class="bar"
:class="day.status"
:title="formatTooltip(day)"
></div>
/>
</div>
<div class="card-footer">
@ -23,7 +31,7 @@
<span class="uptime-percentage">{{ uptimePercentage }}% uptime</span>
<span class="time-today">Today</span>
</div>
<div class="status-label">
{{ status }}
</div>
@ -31,9 +39,7 @@
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
defineProps({
name: { type: String, required: true },
status: { type: String, default: 'Normal' },
uptimePercentage: { type: Number, default: 100.00 },
@ -137,4 +143,4 @@ const formatTooltip = (day) => {
font-size: 0.85rem;
color: #8b949e;
}
</style>
</style>

2
app/components/StatusHeader.vue
View file

@ -87,4 +87,4 @@
justify-content: center;
font-size: 0.9rem;
}
</style>
</style>

2
app/layouts/default.vue
View file

@ -9,4 +9,4 @@
<script setup>
import StatusHeader from '~/components/StatusHeader.vue'
</script>
</script>

23
app/pages/status.vue
View file

@ -1,22 +1,31 @@
<template>
<div class="status-dashboard-container">
<div class="dashboard-meta">
<h2 class="title">Current Status</h2>
<h2 class="title">
Current Status
</h2>
<div class="historical-link">
Uptime over the past 90 days. <a href="#">View historical uptime.</a>
</div>
</div>
<div class="status-banner operational">
<svg class="octicon octicon-check" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" fill="currentColor">
<path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm4.78 6.28-5.5 5.5a.75.75 0 0 1-1.06 0l-2.5-2.5a.751.751 0 0 1 .018-1.08.75.75 0 0 1 1.042.02L11 13.44l4.97-4.97a.75.75 0 0 1 1.06 1.06Z"></path>
<svg
class="octicon octicon-check"
viewBox="0 0 24 24"
width="24"
height="24"
aria-hidden="true"
fill="currentColor"
>
<path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm4.78 6.28-5.5 5.5a.75.75 0 0 1-1.06 0l-2.5-2.5a.751.751 0 0 1 .018-1.08.75.75 0 0 1 1.042.02L11 13.44l4.97-4.97a.75.75 0 0 1 1.06 1.06Z" />
</svg>
All Systems Operational
</div>
<div class="services-grid">
<ServiceCard
v-for="service in mockServices"
<ServiceCard
v-for="service in mockServices"
:key="service.id"
:name="service.name"
:status="service.status"
@ -56,7 +65,7 @@ const serviceNames = [
'Sonic & All-Stars Racing Transformed', 'Minecraft: Wii U Edition', 'Fast Racing Neo'
]
//only here until i actually implement health checks, its 6:30am and i havent slept..
// only here until i actually implement health checks, its 6:30am and i havent slept..
const mockServices = ref(
serviceNames.map((name, index) => ({
id: index + 1,
@ -144,4 +153,4 @@ const mockServices = ref(
gap: 8px;
}
}
</style>
</style>