ui/web/src/components/buttons/ToggleButton.vue

   1 <template>
   2   <Button :class="{ on: state.status }" @click="click()">
   3     <slot></slot>
   4   </Button>
   5 </template>
   6
   7 <script setup lang="ts">
   8 import { ref } from 'vue'
   9 import Button from '@/components/buttons/Button.vue'
  10 import { getFromLocalStorage, setToLocalStorage } from '@/composables'
  11
  12 const props = defineProps<{
  13   id: string
  14   status?: boolean
  15   shared?: boolean
  16   on?: () => void
  17   off?: () => void
  18   onStyle?: string
  19   offStyle?: string
  20 }>()
  21
  22 const $emit = defineEmits(['clicked'])
  23
  24 const id = props.shared === true ? `shared-toggle-button-${props.id}` : `toggle-button-${props.id}`
  25
  26 const state = ref({
  27   status: getFromLocalStorage<boolean>(id, props.status ?? false)
  28 })
  29
  30 const click = (): void => {
  31   if (props.shared === true) {
  32     for (const key in localStorage) {
  33       if (key !== id && key.startsWith('shared-toggle-button-')) {
  34         setToLocalStorage<boolean>(key, false)
  35         state.value.status = getFromLocalStorage<boolean>(key, false)
  36       }
  37     }
  38   }
  39   setToLocalStorage<boolean>(id, !getFromLocalStorage<boolean>(id, props.status ?? false))
  40   state.value.status = getFromLocalStorage<boolean>(id, props.status ?? false)
  41   if (getFromLocalStorage<boolean>(id, props.status ?? false)) {
  42     props.on?.()
  43   } else {
  44     props.off?.()
  45   }
  46   $emit('clicked', getFromLocalStorage<boolean>(id, props.status ?? false))
  47 }
  48 </script>
  49
  50 <style>
  51 .on {
  52   background-color: lightgrey;
  53 }
  54 </style>