33 lines
1.5 KiB
Vue
33 lines
1.5 KiB
Vue
<script setup>
|
|
import { state } from '../store.js';
|
|
import { lastSeenAnnouncementId, CURRENT_ANNOUNCEMENT_ID } from '../config.js';
|
|
|
|
function dismissAnnouncement() {
|
|
if (lastSeenAnnouncementId.value != CURRENT_ANNOUNCEMENT_ID) {
|
|
lastSeenAnnouncementId.value = CURRENT_ANNOUNCEMENT_ID;
|
|
}
|
|
state.announcementVisible = false;
|
|
}
|
|
</script>
|
|
<template>
|
|
<!-- announcement -->
|
|
<div v-if="state.announcementVisible" class="flex bg-yellow-300 p-2 border-gray-300 border-b">
|
|
<!-- info -->
|
|
<div class="my-auto leading-tight">
|
|
<div class="font-bold">Service Announcement</div>
|
|
<div class="text-sm">
|
|
<span>Changes were made to mqtt.meshtastic.org. Uplink your nodes to <button @click="state.infoModalVisible = true" type="button" class="link">our MQTT server</button> to continue showing on this map.</span>
|
|
</div>
|
|
</div>
|
|
<!-- action buttons -->
|
|
<div class="flex my-auto ml-auto mr-0 sm:mr-2">
|
|
<a @click="dismissAnnouncement" href="javascript:void(0)" class="rounded-full">
|
|
<div class="bg-white hover:bg-gray-100 p-2 rounded-full">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</template> |