feat(RNodeFlasherPage): add new RNode Flasher page component and update ToolsPage to link to it
This commit is contained in:
47
meshchatx/src/frontend/components/tools/RNodeFlasherPage.vue
Normal file
47
meshchatx/src/frontend/components/tools/RNodeFlasherPage.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="flex flex-col h-full w-full bg-white dark:bg-zinc-950 overflow-hidden">
|
||||
<!-- header -->
|
||||
<div
|
||||
class="flex items-center px-4 py-2 border-b border-gray-200 dark:border-zinc-800 bg-white/60 dark:bg-zinc-900/50 backdrop-blur-lg z-10 relative"
|
||||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<v-icon icon="mdi-chip" color="purple" size="24"></v-icon>
|
||||
<h1 class="text-xl font-black text-gray-900 dark:text-white">{{ $t("tools.rnode_flasher.title") }}</h1>
|
||||
</div>
|
||||
|
||||
<div class="ml-auto flex items-center space-x-2">
|
||||
<a
|
||||
href="/rnode-flasher/index.html"
|
||||
target="_blank"
|
||||
class="p-2 text-gray-500 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors flex items-center gap-2 text-sm font-medium"
|
||||
title="Open in new tab"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="open-in-new" class="size-5" />
|
||||
<span class="hidden sm:inline">Open in new tab</span>
|
||||
</a>
|
||||
<button
|
||||
class="p-2 text-gray-500 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
|
||||
@click="$router.push({ name: 'tools' })"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="close" class="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- content -->
|
||||
<div class="flex-1 min-h-0 relative">
|
||||
<iframe src="/rnode-flasher/index.html" class="w-full h-full border-0" allow="serial"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MaterialDesignIcon from "../MaterialDesignIcon.vue";
|
||||
|
||||
export default {
|
||||
name: "RNodeFlasherPage",
|
||||
components: {
|
||||
MaterialDesignIcon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -137,7 +137,7 @@
|
||||
<MaterialDesignIcon icon-name="chevron-right" class="tool-card__chevron" />
|
||||
</RouterLink>
|
||||
|
||||
<a target="_blank" href="/rnode-flasher/index.html" class="tool-card glass-card">
|
||||
<RouterLink :to="{ name: 'rnode-flasher' }" class="tool-card glass-card">
|
||||
<div
|
||||
class="tool-card__icon bg-purple-50 text-purple-500 dark:bg-purple-900/30 dark:text-purple-200"
|
||||
>
|
||||
@@ -149,8 +149,18 @@
|
||||
{{ $t("tools.rnode_flasher.description") }}
|
||||
</div>
|
||||
</div>
|
||||
<MaterialDesignIcon icon-name="open-in-new" class="tool-card__chevron" />
|
||||
</a>
|
||||
<div class="flex items-center gap-2">
|
||||
<a
|
||||
href="/rnode-flasher/index.html"
|
||||
target="_blank"
|
||||
class="p-2 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors text-gray-400 hover:text-blue-500"
|
||||
@click.stop
|
||||
>
|
||||
<MaterialDesignIcon icon-name="open-in-new" class="size-5" />
|
||||
</a>
|
||||
<MaterialDesignIcon icon-name="chevron-right" class="tool-card__chevron" />
|
||||
</div>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink :to="{ name: 'debug-logs' }" class="tool-card glass-card border-dashed border-2">
|
||||
<div class="tool-card__icon bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
|
||||
|
||||
Reference in New Issue
Block a user