App: Replace all Sweet-alerts with Interactive-dialogs

Signed-off-by: Arturo Manzoli <[email protected]>

src/App.vue

@@ -303,7 +303,6 @@
 <script setup lang="ts">
 import { onClickOutside, useDebounceFn, useFullscreen, useTimestamp, useWindowSize } from '@vueuse/core'
 import { format } from 'date-fns'
-import Swal from 'sweetalert2'
 import { computed, DefineComponent, markRaw, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
@@ -448,8 +447,6 @@ const mainMenuWidth = computed(() => {
  return { width }
 })
 
-let requestDisarmConfirmationPopup = false
-
 const toggleMainMenu = (): void => {
  if (isMenuOpen.value === true) {
  closeMainMenu()
@@ -458,8 +455,6 @@ const toggleMainMenu = (): void => {
  }
 }
 
-// When a isVehicleArmed change its value a watcher call Swal.close, this flag is
-// used to avoid closing others Swal instances instead of the one intended
 const openMainMenu = (): void => {
  if (vehicleStore.isArmed) {
  showDialog({
@@ -493,7 +488,6 @@ const openMainMenu = (): void => {
  showMainMenu.value = true
  isMenuOpen.value = true
  }
- requestDisarmConfirmationPopup = false
  })
  } else {
  showMainMenu.value = true
@@ -555,13 +549,6 @@ const menuLabelSize = computed(() => {
  return 'text-[10px]'
 })
 
-const isVehicleArmed = computed(() => vehicleStore.isArmed)
-watch(isVehicleArmed, (isArmed) => {
- if (requestDisarmConfirmationPopup && !isArmed) {
- Swal.close()
- }
-})
-
 const mainMenu = ref()
 onClickOutside(mainMenu, () => {
  if (mainMenuStep.value === 1) {
@@ -732,10 +719,6 @@ body.hide-cursor {
  top: -11%;
 }
 
-.swal2-container {
- z-index: 10000;
-}
-
 .fade-enter-active,
 .fade-leave-active {
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);

src/components/EditMenu.vue

@@ -579,7 +579,6 @@
 
 <script setup lang="ts">
 import { useConfirmDialog } from '@vueuse/core'
-import Swal from 'sweetalert2'
 import { v4 as uuid } from 'uuid'
 import { computed, onMounted, ref, toRefs, watch } from 'vue'
 import { nextTick } from 'vue'
@@ -789,7 +788,11 @@ const renameView = (view: View): void => {
 
 const toggleViewVisibility = (view: View): void => {
  if (view.visible && view === store.currentView) {
- Swal.fire({ text: 'You cannot hide the current view.', icon: 'error' })
+ showDialog({
+ message: 'You cannot hide the current view.',
+ variant: 'error',
+ maxWidth: 400,
+ })
  return
  }
  view.visible = !view.visible
@@ -801,14 +804,25 @@ const renameProfile = (profile: Profile): void => {
  profileConfigDialogRevealed.value = true
 }
 
-const resetSavedProfiles = async (): Promise<void> => {
- const result = await Swal.fire({
- text: 'Are you sure you want to reset your profiles to the default ones?',
- showCancelButton: true,
- confirmButtonText: 'Reset',
- icon: 'warning',
+const resetSavedProfiles = (): void => {
+ showDialog({
+ message: 'Are you sure you want to reset your profiles to the default ones?',
+ actions: [
+ {
+ text: 'cancel',
+ action: () => {
+ closeDialog()
+ },
+ },
+ {
+ text: 'reset profiles',
+ action: () => {
+ store.resetSavedProfiles()
+ },
+ },
+ ],
+ variant: 'warning',
  })
- if (result.isConfirmed) store.resetSavedProfiles()
 }
 
 const availableWidgetsContainer = ref()

src/components/mini-widgets/MiniVideoRecorder.vue

@@ -48,9 +48,11 @@
  </div>
  </div>
  <v-dialog v-model="widgetStore.miniWidgetManagerVars(miniWidget.hash).configMenuOpen" width="auto">
- <div class="p-6 m-5 bg-white rounded-md">
- <p class="text-xl font-semibold">Choose a stream to record</p>
- <div class="w-auto h-px my-2 bg-grey-lighten-3" />
+ <div
+ class="flex flex-col items-center p-2 pt-1 m-5 rounded-md gap-y-4"
+ :style="interfaceStore.globalGlassMenuStyles"
+ >
+ <p class="text-xl font-semibold m-4">Choose a stream to record</p>
  <v-select
  :model-value="nameSelectedStream"
  label="Stream name"
@@ -61,24 +63,28 @@
  no-data-text="No streams available."
  hide-details
  return-object
+ theme="dark"
+ class="w-[90%]"
  @update:model-value="updateCurrentStream"
  />
- <div class="flex items-center">
- <button
- class="w-auto p-3 m-2 font-medium transition-all rounded-md shadow-md text-uppercase hover:bg-slate-100"
+ <div class="flex w-full justify-between items-center mt-4">
+ <v-btn
+ class="w-auto text-uppercase"
+ variant="text"
  @click="widgetStore.miniWidgetManagerVars(miniWidget.hash).configMenuOpen = false"
  >
  Cancel
- </button>
- <button
- class="flex items-center p-3 mx-2 font-medium transition-all rounded-md shadow-md w-fit text-uppercase hover:bg-slate-100"
- :class="{ 'bg-slate-200 opacity-30 pointer-events-none': isLoadingStream }"
+ </v-btn>
+ <v-btn
+ class="bg-[#FFFFFF11] hover:bg-[#FFFFFF33]"
+ size="large"
+ :class="{ 'opacity-30 pointer-events-none': isLoadingStream }"
  @click="startRecording"
  >
  <span>Record</span>
  <v-icon v-if="isLoadingStream" class="m-2 animate-spin">mdi-loading</v-icon>
  <div v-else class="w-5 h-5 ml-2 rounded-full bg-red" />
- </button>
+ </v-btn>
  </div>
  </div>
  </v-dialog>
@@ -89,16 +95,19 @@
 import { useMouseInElement, useTimestamp } from '@vueuse/core'
 import { intervalToDuration } from 'date-fns'
 import { storeToRefs } from 'pinia'
-import Swal from 'sweetalert2'
 import { computed, onBeforeMount, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue'
 
+import { useInteractionDialog } from '@/composables/interactionDialog'
 import { isEqual, sleep } from '@/libs/utils'
+import { useAppInterfaceStore } from '@/stores/appInterface'
 import { useVideoStore } from '@/stores/video'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import type { MiniWidget } from '@/types/widgets'
 
 import VideoLibrary from '../VideoLibraryModal.vue'
 
+const { showDialog, closeDialog } = useInteractionDialog()
+const interfaceStore = useAppInterfaceStore()
 const widgetStore = useWidgetManagerStore()
 const videoStore = useVideoStore()
 
@@ -158,14 +167,14 @@ function assertStreamIsSelectedAndAvailable(
  nameSelectedStream.value = selectedStream
 
  if (nameSelectedStream.value === undefined) {
- Swal.fire({ text: 'No stream selected.', icon: 'error' })
+ showDialog({ message: 'No stream selected.', variant: 'error' })
  return
  }
 
  if (namesAvailableStreams.value.includes(nameSelectedStream.value)) return
 
  const errorMsg = `The selected stream is not available. Please check its source or select another stream.`
- Swal.fire({ text: errorMsg, icon: 'error' })
+ showDialog({ message: errorMsg, variant: 'error' })
  throw new Error(errorMsg)
 }
 
@@ -189,7 +198,7 @@ const toggleRecording = async (): Promise<void> => {
 
 const startRecording = (): void => {
  if (nameSelectedStream.value && !videoStore.getStreamData(nameSelectedStream.value)?.connected) {
- Swal.fire({ title: 'Cannot start recording.', text: 'Stream is not connected.', icon: 'error' })
+ showDialog({ title: 'Cannot start recording.', message: 'Stream is not connected.', variant: 'error' })
  return
  }
  assertStreamIsSelectedAndAvailable(nameSelectedStream.value)
@@ -231,7 +240,7 @@ const updateCurrentStream = async (streamName: string | undefined): Promise<void
  }
 
  if (isLoadingStream.value) {
- Swal.fire({ text: 'Could not load media stream.', icon: 'error' })
+ showDialog({ message: 'Could not load media stream.', variant: 'error' })
  return
  }
 
@@ -251,14 +260,27 @@ if (widgetStore.isRealMiniWidget(miniWidget.value)) {
  if (namesAvailableStreams.value.length > 1) {
  const text = `You have multiple streams available, so we chose one randomly to start with.
  If you want to change it, please open the widget configuration.`
- Swal.fire({ title: 'Multiple streams detected', text: text, icon: 'info', confirmButtonText: 'OK' })
+ showDialog({
+ maxWidth: 600,
+ title: 'Multiple streams detected',
+ message: text,
+ variant: 'info',
+ actions: [
+ {
+ text: 'Ok',
+ action: () => {
+ closeDialog()
+ },
+ },
+ ],
+ })
  }
- }
 
- const updatedMediaStream = videoStore.getMediaStream(miniWidget.value.options.streamName)
- // If the widget is not connected to the MediaStream, try to connect it
- if (!isEqual(updatedMediaStream, mediaStream.value)) {
- mediaStream.value = updatedMediaStream
+ const updatedMediaStream = videoStore.getMediaStream(miniWidget.value.options.streamName)
+ // If the widget is not connected to the MediaStream, try to connect it
+ if (!isEqual(updatedMediaStream, mediaStream.value)) {
+ mediaStream.value = updatedMediaStream
+ }
  }
  }, 1000)
 }
@@ -298,7 +320,7 @@ watch(isRecording, () => {
  You have a video recording ongoing.
  Remember to stop it before closing Cockpit, or the record will be lost.
  `
- Swal.fire({ text: alertMsg, icon: 'warning' })
+ showDialog({ message: alertMsg, variant: 'warning' })
  return 'I hope the user does not click on the leave button.'
  }
 })