Better page layout
This commit is contained in:
Nicola Spadari
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2">
|
||||
<div class="px-6 pb-10 pt-12 lg:px-8 lg:py-24 sm:pt-16">
|
||||
<div class="px-6 pb-10 pt-12 lg:px-8 lg:pt-22 sm:pt-16">
|
||||
<div class="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
|
||||
<h2 class="text-3xl text-white font-bold tracking-tight">
|
||||
{{ props.title }}
|
||||
@@ -10,7 +10,7 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-6 pb-10 pt-12 lg:px-8 lg:py-24 sm:pt-16">
|
||||
<div class="px-6 pb-10 pt-12 lg:px-8 lg:pt-22 sm:pt-16">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<header class="top-0 z-10">
|
||||
<nav crate flex items-center justify-between py-6>
|
||||
<nav flex items-center justify-between py-6 crate>
|
||||
<div class="flex lg:flex-1">
|
||||
<NuxtLink to="/" class="p-1.5 -m-1.5">
|
||||
<NuxtLink to="/" class="home p-1.5 -m-1.5">
|
||||
<span class="sr-only">{{ name }}</span>
|
||||
<SvgoLogo :font-controlled="false" size-8 />
|
||||
</NuxtLink>
|
||||
@@ -16,10 +16,18 @@
|
||||
</button>
|
||||
</div>
|
||||
<div hidden lg="flex gap-x-12">
|
||||
<NuxtLink to="/command" class="text-sm text-white font-semibold leading-6">Command</NuxtLink>
|
||||
<NuxtLink to="/notification" class="text-sm text-white font-semibold leading-6">Notification</NuxtLink>
|
||||
<NuxtLink to="/os" class="text-sm text-white font-semibold leading-6">OS Information</NuxtLink>
|
||||
<NuxtLink to="/this-page-does-not-exist" class="text-sm text-white font-semibold leading-6">404</NuxtLink>
|
||||
<NuxtLink to="/commands" class="text-sm text-white font-semibold leading-6">
|
||||
Commands
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/notifications" class="text-sm text-white font-semibold leading-6">
|
||||
Notifications
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/os" class="text-sm text-white font-semibold leading-6">
|
||||
OS Informations
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/foo" class="text-sm text-white font-semibold leading-6">
|
||||
404
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div hidden lg="flex flex-1 justify-end">
|
||||
<p class="text-sm text-white font-semibold leading-6">
|
||||
@@ -65,3 +73,9 @@
|
||||
const { name } = useConstants();
|
||||
const tauriVersion = await getTauriVersion();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.router-link-exact-active:not(.home){
|
||||
@apply text-emerald-500;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
<template>
|
||||
<div text-center space-y-5>
|
||||
<p>Hello from Nuxtor - Tauri v{{ version }}</p>
|
||||
<p>Running on {{ currentOS }}</p>
|
||||
|
||||
<p>Shell command result: {{ result }}</p>
|
||||
|
||||
<button @click="runNotification()">
|
||||
send notification
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const currentOS = await platform();
|
||||
const version = await getTauriVersion();
|
||||
|
||||
const result = await Command.create("exec-sh", [
|
||||
"-c",
|
||||
"echo 'Hello World!'"
|
||||
]).execute();
|
||||
|
||||
const runNotification = async () => {
|
||||
let permissionGranted = await isPermissionGranted();
|
||||
|
||||
if (!permissionGranted) {
|
||||
const permission = await requestPermission();
|
||||
permissionGranted = permission === "granted";
|
||||
}
|
||||
|
||||
if (permissionGranted) {
|
||||
sendNotification({
|
||||
title: "Hello Tauri",
|
||||
body: "Notification from tauri"
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,55 +0,0 @@
|
||||
<template>
|
||||
<div class="isolate">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2">
|
||||
<div class="px-6 pb-10 pt-12 lg:px-8 lg:pt-22 sm:pt-16">
|
||||
<div class="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
|
||||
<h2 class="text-3xl text-white font-bold tracking-tight">
|
||||
Command
|
||||
</h2>
|
||||
<p class="mt-6 text-lg text-gray-300 leading-8">
|
||||
Access the system shell. Allows you to spawn child processes and manage files and URLs using their default application.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<form class="px-6 pb-10 pt-12 lg:px-8 lg:pt-22 sm:pt-16" @submit.prevent="sendCommand()">
|
||||
<div class="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
|
||||
<div class="grid grid-cols-1 gap-x-8 gap-y-6">
|
||||
<div>
|
||||
<label for="command-input" class="block text-sm text-white font-semibold leading-6">Command input</label>
|
||||
<div class="mt-2.5">
|
||||
<input id="command-input" v-model="input" type="text" name="command-input" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-emerald-500 focus:ring-inset">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<Btn type="submit">
|
||||
Send command
|
||||
</Btn>
|
||||
</div>
|
||||
<div mt-8>
|
||||
<label for="command-output" class="block text-sm text-white font-semibold leading-6">Command Output</label>
|
||||
<div class="mt-2.5">
|
||||
<textarea id="command-output" v-model="result" name="command-output" rows="10" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-indigo-500 focus:ring-inset" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const input = ref("");
|
||||
const result = ref("");
|
||||
|
||||
const sendCommand = async () => {
|
||||
const response = await Command.create("exec-sh", [
|
||||
"-c",
|
||||
input.value
|
||||
]).execute();
|
||||
|
||||
result.value = JSON.stringify(response, null, 4);
|
||||
|
||||
input.value = "";
|
||||
};
|
||||
</script>
|
||||
46
src/pages/commands.vue
Normal file
46
src/pages/commands.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<LayoutTile
|
||||
title="Commands"
|
||||
description="Access the system shell. Allows you to spawn child processes and manage files and URLs using their default application."
|
||||
>
|
||||
<form @submit.prevent="sendCommand()">
|
||||
<div class="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
|
||||
<div class="grid grid-cols-1 gap-x-8 gap-y-6">
|
||||
<div>
|
||||
<label for="command-input" class="block text-sm text-white font-semibold leading-6">Command input</label>
|
||||
<div class="mt-2.5">
|
||||
<input id="command-input" v-model="input" type="text" name="command-input" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-emerald-500 focus:ring-inset">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<Btn type="submit">
|
||||
Send command
|
||||
</Btn>
|
||||
</div>
|
||||
<div mt-8>
|
||||
<label for="command-output" class="block text-sm text-white font-semibold leading-6">Command Output</label>
|
||||
<div class="mt-2.5">
|
||||
<textarea id="command-output" v-model="result" name="command-output" rows="10" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-indigo-500 focus:ring-inset" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</LayoutTile>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const input = ref("");
|
||||
const result = ref("");
|
||||
|
||||
const sendCommand = async () => {
|
||||
const response = await Command.create("exec-sh", [
|
||||
"-c",
|
||||
input.value
|
||||
]).execute();
|
||||
|
||||
result.value = JSON.stringify(response, null, 4);
|
||||
|
||||
input.value = "";
|
||||
};
|
||||
</script>
|
||||
@@ -1,75 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2">
|
||||
<div class="px-6 pb-10 pt-12 lg:px-8 lg:py-24 sm:pt-16">
|
||||
<div class="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
|
||||
<h2 class="text-3xl text-white font-bold tracking-tight">
|
||||
Notification
|
||||
</h2>
|
||||
<p class="mt-6 text-lg text-gray-300 leading-8">
|
||||
Send native notifications to the client using the notification plugin.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<form class="px-6 pb-10 pt-12 lg:px-8 lg:py-24 sm:pt-16" @submit.prevent="createNotification()">
|
||||
<div class="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
|
||||
<div class="grid grid-cols-1 gap-x-8 gap-y-6">
|
||||
<div>
|
||||
<label for="notification-title" class="block text-sm text-white font-semibold leading-6">Notification title</label>
|
||||
<div class="mt-2.5">
|
||||
<input id="notification-title" v-model="notificationTitle" type="text" name="notification-title" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-emerald-500 focus:ring-inset">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="notification-body" class="block text-sm text-white font-semibold leading-6">Notification body</label>
|
||||
<div class="mt-2.5">
|
||||
<input id="notification-body" v-model="notificationBody" type="text" name="notification-body" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-emerald-500 focus:ring-inset">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<Btn type="submit">
|
||||
Send notification
|
||||
</Btn>
|
||||
</div>
|
||||
|
||||
<p v-if="permissionError" class="mt-3 text-right text-sm text-red-500 font-semibold leading-6">
|
||||
Missing permissions
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const notificationTitle = ref("");
|
||||
const notificationBody = ref("");
|
||||
const permissionError = ref(false);
|
||||
|
||||
const createNotification = async () => {
|
||||
let permissionGranted = await isPermissionGranted();
|
||||
|
||||
if (!permissionGranted) {
|
||||
const permission = await requestPermission();
|
||||
permissionGranted = permission === "granted";
|
||||
}
|
||||
|
||||
if (permissionGranted) {
|
||||
sendNotification({
|
||||
title: notificationTitle.value,
|
||||
body: notificationBody.value
|
||||
});
|
||||
|
||||
notificationTitle.value = "";
|
||||
notificationBody.value = "";
|
||||
} else {
|
||||
permissionError.value = true;
|
||||
|
||||
useTimeoutFn(() => {
|
||||
permissionError.value = false;
|
||||
}, 3000);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
66
src/pages/notifications.vue
Normal file
66
src/pages/notifications.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<LayoutTile
|
||||
title="Notifications"
|
||||
description="Send native notifications to the client using the notification plugin."
|
||||
>
|
||||
<form @submit.prevent="createNotification()">
|
||||
<div class="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
|
||||
<div class="grid grid-cols-1 gap-x-8 gap-y-6">
|
||||
<div>
|
||||
<label for="notification-title" class="block text-sm text-white font-semibold leading-6">Notification title</label>
|
||||
<div class="mt-2.5">
|
||||
<input id="notification-title" v-model="notificationTitle" type="text" name="notification-title" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-emerald-500 focus:ring-inset">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="notification-body" class="block text-sm text-white font-semibold leading-6">Notification body</label>
|
||||
<div class="mt-2.5">
|
||||
<input id="notification-body" v-model="notificationBody" type="text" name="notification-body" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-emerald-500 focus:ring-inset">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<Btn type="submit">
|
||||
Send notification
|
||||
</Btn>
|
||||
</div>
|
||||
|
||||
<p v-if="permissionError" class="mt-3 text-right text-sm text-red-500 font-semibold leading-6">
|
||||
Missing permissions
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</LayoutTile>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const notificationTitle = ref("");
|
||||
const notificationBody = ref("");
|
||||
const permissionError = ref(false);
|
||||
|
||||
const createNotification = async () => {
|
||||
let permissionGranted = await isPermissionGranted();
|
||||
|
||||
if (!permissionGranted) {
|
||||
const permission = await requestPermission();
|
||||
permissionGranted = permission === "granted";
|
||||
}
|
||||
|
||||
if (permissionGranted) {
|
||||
sendNotification({
|
||||
title: notificationTitle.value,
|
||||
body: notificationBody.value
|
||||
});
|
||||
|
||||
notificationTitle.value = "";
|
||||
notificationBody.value = "";
|
||||
} else {
|
||||
permissionError.value = true;
|
||||
|
||||
useTimeoutFn(() => {
|
||||
permissionError.value = false;
|
||||
}, 3000);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user