210 lines
14 KiB
Vue
210 lines
14 KiB
Vue
<script setup>
|
|
import { state } from '../store.js';
|
|
import {
|
|
nodesMaxAge,
|
|
nodesDisconnectedAge,
|
|
nodesOfflineAge,
|
|
waypointsMaxAge,
|
|
neighboursMaxDistance,
|
|
goToNodeZoomLevel,
|
|
temperatureFormat,
|
|
autoUpdatePositionInUrl,
|
|
enableMapAnimations,
|
|
} from '../config.js';
|
|
</script>
|
|
|
|
<template>
|
|
<!-- settings sidebar -->
|
|
<div class="relative z-sidebar" role="dialog" aria-modal="true">
|
|
|
|
<!-- overlay -->
|
|
<transition
|
|
enter-active-class="transition-opacity duration-300 ease-linear"
|
|
enter-from-class="opacity-0"
|
|
enter-to-class="opacity-100"
|
|
leave-active-class="transition-opacity duration-300 ease-linear"
|
|
leave-from-class="opacity-100"
|
|
leave-to-class="opacity-0">
|
|
<div v-show="state.settingsVisible" @click="state.settingsVisible = !state.settingsVisible" class="fixed inset-0 bg-gray-900/75"></div>
|
|
</transition>
|
|
|
|
<!-- sidebar -->
|
|
<transition
|
|
enter-active-class="transition duration-300 ease-in-out transform"
|
|
enter-from-class="-translate-x-full"
|
|
enter-to-class="translate-x-0"
|
|
leave-active-class="transition duration-300 ease-in-out transform"
|
|
leave-from-class="translate-x-0"
|
|
leave-to-class="-translate-x-full">
|
|
<div v-show="state.settingsVisible" class="fixed top-0 left-0 bottom-0">
|
|
<div v-if="state.settingsVisible" class="w-screen h-full max-w-md overflow-hidden">
|
|
<div class="flex h-full flex-col bg-white shadow-xl">
|
|
|
|
<!-- slideover header -->
|
|
<div class="p-2 border-b border-gray-200 shadow-sm">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<h2 class="font-bold">Settings</h2>
|
|
<h3 class="text-sm">Changes are only saved in this browser.</h3>
|
|
</div>
|
|
<div class="my-auto ml-3 flex h-7 items-center">
|
|
<a href="javascript:void(0)" class="rounded-full" @click="state.settingsVisible = false">
|
|
<div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
|
|
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<path d="M18 6l-12 12"></path>
|
|
<path d="M6 6l12 12"></path>
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overflow-y-auto divide-y divide-gray-200">
|
|
|
|
<!-- configNodesMaxAgeInSeconds -->
|
|
<div class="p-2">
|
|
<label class="block text-sm font-medium text-gray-900">Nodes Max Age</label>
|
|
<div class="text-xs text-gray-600 mb-2">Nodes not updated within this time are hidden. Reload to update map.</div>
|
|
<select v-model="nodesMaxAge" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
|
|
<option :value="null">Show All</option>
|
|
<option value="900">15 minutes</option>
|
|
<option value="1800">30 minutes</option>
|
|
<option value="3600">1 hour</option>
|
|
<option value="10800">3 hours</option>
|
|
<option value="21600">6 hours</option>
|
|
<option value="43200">12 hours</option>
|
|
<option value="86400">24 hours</option>
|
|
<option value="172800">2 days</option>
|
|
<option value="259200">3 days</option>
|
|
<option value="345600">4 days</option>
|
|
<option value="432000">5 days</option>
|
|
<option value="518400">6 days</option>
|
|
<option value="604800">7 days</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- configNodesDisconnectedAgeInSeconds -->
|
|
<div class="p-2">
|
|
<label class="block text-sm font-medium text-gray-900">Nodes Disconnected Age</label>
|
|
<div class="text-xs text-gray-600 mb-2">Nodes that have not uplinked to MQTT in this time will show as blue icons. Reload to update map.</div>
|
|
<select v-model="nodesDisconnectedAge" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
|
|
<option value="900">15 minutes</option>
|
|
<option value="1800">30 minutes</option>
|
|
<option value="2700">45 minutes</option>
|
|
<option value="3600">1 hour</option>
|
|
<option value="7200">2 hours</option>
|
|
<option value="10800">3 hours</option>
|
|
<option value="21600">6 hours</option>
|
|
<option value="43200">12 hours</option>
|
|
<option value="86400">24 hours</option>
|
|
<option value="172800">2 days</option>
|
|
<option value="259200">3 days</option>
|
|
<option value="345600">4 days</option>
|
|
<option value="432000">5 days</option>
|
|
<option value="518400">6 days</option>
|
|
<option value="604800">7 days</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- configNodesOfflineAgeInSeconds -->
|
|
<div class="p-2">
|
|
<label class="block text-sm font-medium text-gray-900">Nodes Offline Age</label>
|
|
<div class="text-xs text-gray-600 mb-2">Nodes not updated within this time will show as red icons. Reload to update map.</div>
|
|
<select v-model="nodesOfflineAge" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
|
|
<option :value="null">Don't show as offline</option>
|
|
<option value="900">15 minutes</option>
|
|
<option value="1800">30 minutes</option>
|
|
<option value="2700">45 minutes</option>
|
|
<option value="3600">1 hour</option>
|
|
<option value="7200">2 hours</option>
|
|
<option value="10800">3 hours</option>
|
|
<option value="21600">6 hours</option>
|
|
<option value="43200">12 hours</option>
|
|
<option value="86400">24 hours</option>
|
|
<option value="172800">2 days</option>
|
|
<option value="259200">3 days</option>
|
|
<option value="345600">4 days</option>
|
|
<option value="432000">5 days</option>
|
|
<option value="518400">6 days</option>
|
|
<option value="604800">7 days</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- configWaypointsMaxAgeInSeconds -->
|
|
<div class="p-2">
|
|
<label class="block text-sm font-medium text-gray-900">Waypoints Max Age</label>
|
|
<div class="text-xs text-gray-600 mb-2">Waypoints not updated within this time are hidden. Reload to update map.</div>
|
|
<select v-model="waypointsMaxAge" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
|
|
<option :value="null">Show All</option>
|
|
<option value="900">15 minutes</option>
|
|
<option value="1800">30 minutes</option>
|
|
<option value="3600">1 hour</option>
|
|
<option value="10800">3 hours</option>
|
|
<option value="21600">6 hours</option>
|
|
<option value="43200">12 hours</option>
|
|
<option value="86400">24 hours</option>
|
|
<option value="172800">2 days</option>
|
|
<option value="259200">3 days</option>
|
|
<option value="345600">4 days</option>
|
|
<option value="432000">5 days</option>
|
|
<option value="518400">6 days</option>
|
|
<option value="604800">7 days</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- configNeighboursMaxDistanceInMeters -->
|
|
<div class="p-2">
|
|
<label class="block text-sm font-medium text-gray-900">Neighbours Max Distance (meters)</label>
|
|
<div class="text-xs text-gray-600 mb-2">Neighbours further than this are hidden. Reload to update map.</div>
|
|
<input type="number" v-model="neighboursMaxDistance" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
|
|
</div>
|
|
|
|
<!-- configZoomLevelGoToNode -->
|
|
<div class="p-2">
|
|
<label class="block text-sm font-medium text-gray-900">Zoom Level (go to node)</label>
|
|
<div class="text-xs text-gray-600 mb-2">How far to zoom map when navigating to a node.</div>
|
|
<input type="number" v-model="goToNodeZoomLevel" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
|
|
</div>
|
|
|
|
<!-- configTemperatureFormat -->
|
|
<div class="p-2">
|
|
<label class="block text-sm font-medium text-gray-900">Temperature Format</label>
|
|
<div class="text-xs text-gray-600 mb-2">Metrics will be shown in the selected format.</div>
|
|
<select v-model="temperatureFormat" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
|
|
<option value="celsius">Celsius (ºC)</option>
|
|
<option value="fahrenheit">Fahrenheit (ºF)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- configAutoUpdatePositionInUrl -->
|
|
<div class="p-2">
|
|
<div class="flex items-start">
|
|
<div class="flex items-center h-5">
|
|
<input type="checkbox" v-model="autoUpdatePositionInUrl" class="w-4 h-4 border border-gray-300 rounded-sm bg-gray-50 focus:ring-3 focus:ring-blue-300" required>
|
|
</div>
|
|
<label class="ml-2 text-sm font-medium text-gray-900">Auto Update Position in URL</label>
|
|
</div>
|
|
<div class="text-xs text-gray-600">Sets lat/lng/zoom as query parameters.</div>
|
|
</div>
|
|
|
|
<!-- configEnableMapAnimations -->
|
|
<div class="p-2">
|
|
<div class="flex items-start">
|
|
<div class="flex items-center h-5">
|
|
<input type="checkbox" v-model="enableMapAnimations" class="w-4 h-4 border border-gray-300 rounded-sm bg-gray-50 focus:ring-3 focus:ring-blue-300" required>
|
|
</div>
|
|
<label class="ml-2 text-sm font-medium text-gray-900">Enable Map Animations</label>
|
|
</div>
|
|
<div class="text-xs text-gray-600">Map will animate flying to nodes.</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</template> |