zoeynoort/Macrame
1
0
Fork 0
mirror of https://github.com/Macrame-App/Macrame synced 2025-12-29 15:29:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Dashboard page restructured. Moved some elements to the other views.

Browse source
This commit is contained in:
Jesse Malotaux 2025-04-30 18:06:53 +02:00
parent 1cf9029a63
commit 315d169cf9
10 changed files with 363 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

143
fe/src/views/DashboardView.vue
View file

@ -1,97 +1,72 @@
<template>
<div id="dashboard" class="panel">
<h1 class="panel__title">Dashboard</h1>
<div class="panel__content">
<div class="grid gap-1 opacity-50 h-fit">
<div class="panel__title">
<h1>Dashboard</h1>
<div>
<em v-if="isLocal()">This is the server dashboard.</em>
<em v-else>This is the remote dashboard.</em>
</div>
<div v-if="isLocal()">
<h4>Start: Authenticate a device</h4>
<ul>
<li>
Open <strong>{{ server.ip }}:{{ server.port }}</strong> in a browser on your phone.
<div class="p-4 qr-container">
<canvas ref="serverQr"></canvas>
</div>
</li>
<li>Navigate to the Server page. An authentication request will start automatically.</li>
<li>
Open the
<RouterLink to="/devices"> Devices</RouterLink>
page in this window.
</li>
<li>
<div class="inline-flex items-center gap-2">
The device will appear, if not click the
<span class="p-1 border rounded-sm"><IconReload class="size-4" /></span> button.
</div>
</li>
</ul>
<h4>Using a panel</h4>
<ul>
<li>Once authenticated you can access the Test Panel on your device.</li>
<li>Open the Panels page on your device and click the Test Panel.</li>
</ul>
</div>
<div v-else>
<h4>Start: Authenticate this device</h4>
<ul>
<li>
Open
<RouterLink to="/devices"> Server</RouterLink>
to start.
</li>
<li>An authentication request will start automatically.</li>
</ul>
<h4>Using a panel</h4>
<ul>
<li>
Once authenticated you can access the
<RouterLink to="/panel/view/test_panel"> Test Panel</RouterLink>
on your device.
</li>
<li>
Open the
<RouterLink to="/panels">Panels page</RouterLink>
you can edit the panel.
</li>
</ul>
</div>
</div>
<div class="panel__content">
<ServerView v-if="isLocal()" />
<RemoteView v-else />
</div>
</div>
</template>
<script setup>
import { RouterLink } from 'vue-router'
import { isLocal } from '@/services/ApiService'
import { useDeviceStore } from '@/stores/device'
import { onMounted, reactive, ref } from 'vue'
import { IconReload } from '@tabler/icons-vue'
import QRCode from 'qrcode'
const device = useDeviceStore()
const server = reactive({
ip: '',
port: '',
fullPath: '',
})
const serverQr = ref()
onMounted(async () => {
const serverIP = await device.serverGetIP()
server.ip = serverIP
server.port = window.__CONFIG__.MCRM__PORT
server.fullPath = `http://${server.ip}:${server.port}`
QRCode.toCanvas(serverQr.value, server.fullPath, (error) => {
console.log(error)
})
})
import ServerView from '@/components/dashboard/ServerView.vue'
import RemoteView from '@/components/dashboard/RemoteView.vue'
</script>
<style lang="scss" scoped></style>
<style>
@reference "@/assets/main.css";
.dashboard-block {
@apply md:!row-start-1
grid
justify-items-center
gap-4;
&#devices .icon__container,
&#server .icon__container {
@apply bg-sky-300/30
text-sky-400
border-sky-300/60;
}
&#macros .icon__container {
@apply bg-amber-300/30
text-amber-400
border-amber-300/60;
}
&#panels .icon__container {
@apply bg-rose-300/30
text-rose-400
border-rose-300/60;
}
.icon__container {
@apply flex
justify-center
items-center
size-16
aspect-square
rounded-full
border;
svg {
@apply size-8;
}
}
p {
@apply opacity-50
w-42
text-center;
}
}
</style>