From d159d2d31b87212022b64fe8b9ed310e3d49a3f4 Mon Sep 17 00:00:00 2001
From: TheYOSH <github.com@theyosh.nl>
Date: Fri, 5 Apr 2024 20:56:25 +0200
Subject: [PATCH] Prettier whitespace

---
 .prettierrc                                   |   2 +-
 gui/App.svelte                                | 684 ++++++++--------
 gui/Error.svelte                              | 258 +++---
 gui/components/common/Button.svelte           |  32 +-
 .../common/CardGraphPeriodTools.svelte        |  10 +-
 .../common/CardSettingsTools.svelte           |   4 +-
 gui/components/common/DoorIcon.svelte         |   4 +-
 gui/components/common/Gauge.svelte            | 176 ++---
 gui/components/common/Graph.svelte            | 430 +++++-----
 gui/components/common/LoginLink.svelte        |   4 +-
 gui/components/common/Player.svelte           |  18 +-
 gui/components/common/Relay.svelte            | 130 +--
 gui/components/common/UserPanel.svelte        |  46 +-
 gui/components/common/Webcam.svelte           | 681 ++++++++--------
 gui/components/enclosure/Enclosure.svelte     |  30 +-
 .../enclosure/EnclosureDoorIcon.svelte        |   4 +-
 gui/components/form/Field.svelte              |  34 +-
 gui/components/form/FileUpload.svelte         |  70 +-
 gui/components/form/FormGroup.svelte          |  14 +-
 gui/components/form/Helper.svelte             |  28 +-
 gui/components/form/Label.svelte              |   6 +-
 gui/components/form/Select.svelte             | 284 +++----
 gui/components/form/Slider.svelte             | 106 +--
 gui/components/form/Switch.svelte             |  36 +-
 gui/components/form/TextArea.svelte           |  26 +-
 gui/components/form/WysiwygArea.svelte        | 134 ++--
 gui/modals/AreaFormModal.svelte               | 742 +++++++++---------
 gui/modals/ButtonFormModal.svelte             | 220 +++---
 gui/modals/ConfirmModal.svelte                |  56 +-
 gui/modals/EnclosureFormModal.svelte          | 300 +++----
 gui/modals/EventFormModal.svelte              | 300 +++----
 gui/modals/LoadingModal.svelte                |  28 +-
 gui/modals/LoginFormModal.svelte              | 106 +--
 gui/modals/MessageModal.svelte                | 336 ++++----
 gui/modals/PlaylistFormModal.svelte           | 254 +++---
 gui/modals/RelayFormModal.svelte              | 256 +++---
 gui/modals/SensorFormModal.svelte             | 292 +++----
 gui/modals/ServiceModal.svelte                | 274 +++----
 gui/modals/WeatherFormModal.svelte            | 198 ++---
 gui/modals/WebcamFormModal.svelte             | 580 +++++++-------
 gui/modals/WebcamMarkerModal.svelte           | 124 +--
 gui/pages/About.svelte                        |  26 +-
 gui/pages/Audiofiles.svelte                   | 264 +++----
 gui/pages/Buttons.svelte                      | 162 ++--
 gui/pages/Calendar.svelte                     | 454 +++++------
 gui/pages/Dashboard.svelte                    | 364 ++++-----
 gui/pages/Enclosures.svelte                   | 172 ++--
 gui/pages/Home.svelte                         |  24 +-
 gui/pages/Log.svelte                          | 174 ++--
 gui/pages/NotFound.svelte                     |  22 +-
 gui/pages/Notifications.svelte                | 220 +++---
 gui/pages/Playlists.svelte                    | 146 ++--
 gui/pages/Relays.svelte                       | 296 +++----
 gui/pages/Sensors.svelte                      | 180 ++---
 gui/pages/Settings.svelte                     | 322 ++++----
 gui/pages/Status.svelte                       | 186 ++---
 gui/pages/Weather.svelte                      | 273 +++----
 gui/pages/Webcams.svelte                      | 162 ++--
 gui/user-controls/ButtonCard.svelte           |  40 +-
 gui/user-controls/Card.svelte                 |  80 +-
 gui/user-controls/EnclosureAccordion.svelte   |   8 +-
 gui/user-controls/EnclosureCard.svelte        |  68 +-
 gui/user-controls/ModalForm.svelte            |  64 +-
 gui/user-controls/RelayCard.svelte            |  42 +-
 gui/user-controls/SensorCard.svelte           |  74 +-
 gui/user-controls/SidebarNavTree.svelte       |   4 +-
 gui/user-controls/WebcamCard.svelte           |  30 +-
 67 files changed, 5592 insertions(+), 5582 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index 10f2242e9..aacab1ee2 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -10,5 +10,5 @@
   "svelteStrictMode": true,
   "svelteAllowShorthand" : true,
   "bracketSameLine": false,
-  "svelteIndentScriptAndStyle": false
+  "svelteIndentScriptAndStyle": true
 }
diff --git a/gui/App.svelte b/gui/App.svelte
index 11107f8da..d818cbdfb 100644
--- a/gui/App.svelte
+++ b/gui/App.svelte
@@ -1,368 +1,368 @@
 <style>
-.fa-stack {
-  width: auto;
-  top: -0.2rem;
-  left: 0rem;
-}
+  .fa-stack {
+    width: auto;
+    top: -0.2rem;
+    left: 0rem;
+  }
 </style>
 
 <script context="module">
-import { locale } from './locale/i18n';
-
-import { dayjs } from 'svelte-time';
-import duration from 'dayjs/esm/plugin/duration';
-dayjs.extend(duration);
-
-// Import Dayjs locales
-import 'dayjs/locale/de';
-import 'dayjs/locale/de-at';
-import 'dayjs/locale/en';
-import 'dayjs/locale/en-gb';
-import 'dayjs/locale/es';
-import 'dayjs/locale/fr';
-import 'dayjs/locale/it';
-import 'dayjs/locale/ja';
-import 'dayjs/locale/nb';
-import 'dayjs/locale/nl';
-import 'dayjs/locale/pl';
-import 'dayjs/locale/pt';
-
-// Reload when language changes.....?
-locale.subscribe((x) => {
-  dayjs.locale(x);
-});
+  import { locale } from './locale/i18n';
+
+  import { dayjs } from 'svelte-time';
+  import duration from 'dayjs/esm/plugin/duration';
+  dayjs.extend(duration);
+
+  // Import Dayjs locales
+  import 'dayjs/locale/de';
+  import 'dayjs/locale/de-at';
+  import 'dayjs/locale/en';
+  import 'dayjs/locale/en-gb';
+  import 'dayjs/locale/es';
+  import 'dayjs/locale/fr';
+  import 'dayjs/locale/it';
+  import 'dayjs/locale/ja';
+  import 'dayjs/locale/nb';
+  import 'dayjs/locale/nl';
+  import 'dayjs/locale/pl';
+  import 'dayjs/locale/pt';
+
+  // Reload when language changes.....?
+  locale.subscribe((x) => {
+    dayjs.locale(x);
+  });
 </script>
 
 <script>
-import { onDestroy, onMount, setContext } from 'svelte';
-import { fade } from 'svelte/transition';
-import { get } from 'svelte/store';
-import Router from 'svelte-spa-router';
-import { _, date, time } from 'svelte-i18n';
-import {
-  TopNavigation,
-  Sidebar,
-  SidebarNavItem,
-  Dropdown,
-  DropdownItem,
-  DropdownButton,
-  DropdownMenu,
-  DropdownDivider,
-} from '@keenmate/svelte-adminlte';
-
-import RoutePages, { onRouteLoaded, Pages, PageUrls } from './pages';
-import { listenPageTitleChanged, customPageTitleUsed } from './stores/page-title';
-import { isDay, lastUpdate, isOnline, doors, isDarkDesktop } from './stores/terrariumpi';
-import { animate_footer_badge } from './helpers/animation-helpers';
-import { websocket } from './providers/websocket';
-import {
-  fetchUpcomingEvents,
-  scanSensors,
-  scanRelays,
-  systemRestart,
-  systemReboot,
-  systemShutdown,
-} from './providers/api';
-import { isAuthenticated, loginModal } from './stores/authentication';
-
-import SidebarNavTree from './user-controls/SidebarNavTree.svelte';
-import { updateSiteBar, toggleSidebarAdminActions } from './helpers/sidebar';
-import { setFavicon } from './helpers/icon-helpers';
-import Time from 'svelte-time';
-import { ApiUrl } from './constants/urls';
-
-import { getCustomConfig } from './config';
-import { default as UserPanel } from './components/common/UserPanel.svelte';
-import { template_sensor_type_icon } from './helpers/icon-helpers';
-import { autoDarkMode } from './helpers/color-helpers';
-
-import ConfirmModal from './modals/ConfirmModal.svelte';
-import LoginModal from './modals/LoginFormModal.svelte';
-import ButtonFormModal from './modals/ButtonFormModal.svelte';
-import RelayFormModal from './modals/RelayFormModal.svelte';
-import SensorFormModal from './modals/SensorFormModal.svelte';
-import WebcamFormModal from './modals/WebcamFormModal.svelte';
-import EnclosureFormModal from './modals/EnclosureFormModal.svelte';
-import PlaylistFormModal from './modals/PlaylistFormModal.svelte';
-import AreaModal from './modals/AreaFormModal.svelte';
-
-import ServiceModal from './modals/ServiceModal.svelte';
-import MessageModal from './modals/MessageModal.svelte';
-
-import { successNotification } from './providers/notification-provider';
-
-let localeLanguage = '';
-let settings = getCustomConfig();
-let pageTitleSubscription;
-let localeSubscription;
-let upcomingEvents = [];
-
-let modalConfirm;
-let showConfirm;
-let hideConfirm;
-let confirmMessage = '';
-let confirmCallback;
-
-let editModal;
-let editModelContent;
-
-$isDay = !settings.is_night;
-$isAuthenticated = settings.logged_in;
-
-const sensor_submenu_sorting = (data) => {
-  data.forEach((menu) => {
-    if (menu.name === 'Sensors') {
-      let light_submenu = menu.subroutes
-        .filter((submenu) => {
-          return ['sensors_light', 'sensors_uva', 'sensors_uvb', 'sensors_uvi'].indexOf(submenu.name) !== -1;
-        })
-        .sort((a, b) => $_(`${a.title}`).localeCompare($_(`${b.title}`)));
-
-      if (light_submenu.length > 0) {
-        let other_menu = menu.subroutes.filter((submenu) => {
-          return ['sensors_light', 'sensors_uva', 'sensors_uvb', 'sensors_uvi'].indexOf(submenu.name) === -1;
-        });
+  import { onDestroy, onMount, setContext } from 'svelte';
+  import { fade } from 'svelte/transition';
+  import { get } from 'svelte/store';
+  import Router from 'svelte-spa-router';
+  import { _, date, time } from 'svelte-i18n';
+  import {
+    TopNavigation,
+    Sidebar,
+    SidebarNavItem,
+    Dropdown,
+    DropdownItem,
+    DropdownButton,
+    DropdownMenu,
+    DropdownDivider,
+  } from '@keenmate/svelte-adminlte';
+
+  import RoutePages, { onRouteLoaded, Pages, PageUrls } from './pages';
+  import { listenPageTitleChanged, customPageTitleUsed } from './stores/page-title';
+  import { isDay, lastUpdate, isOnline, doors, isDarkDesktop } from './stores/terrariumpi';
+  import { animate_footer_badge } from './helpers/animation-helpers';
+  import { websocket } from './providers/websocket';
+  import {
+    fetchUpcomingEvents,
+    scanSensors,
+    scanRelays,
+    systemRestart,
+    systemReboot,
+    systemShutdown,
+  } from './providers/api';
+  import { isAuthenticated, loginModal } from './stores/authentication';
+
+  import SidebarNavTree from './user-controls/SidebarNavTree.svelte';
+  import { updateSiteBar, toggleSidebarAdminActions } from './helpers/sidebar';
+  import { setFavicon } from './helpers/icon-helpers';
+  import Time from 'svelte-time';
+  import { ApiUrl } from './constants/urls';
+
+  import { getCustomConfig } from './config';
+  import { default as UserPanel } from './components/common/UserPanel.svelte';
+  import { template_sensor_type_icon } from './helpers/icon-helpers';
+  import { autoDarkMode } from './helpers/color-helpers';
+
+  import ConfirmModal from './modals/ConfirmModal.svelte';
+  import LoginModal from './modals/LoginFormModal.svelte';
+  import ButtonFormModal from './modals/ButtonFormModal.svelte';
+  import RelayFormModal from './modals/RelayFormModal.svelte';
+  import SensorFormModal from './modals/SensorFormModal.svelte';
+  import WebcamFormModal from './modals/WebcamFormModal.svelte';
+  import EnclosureFormModal from './modals/EnclosureFormModal.svelte';
+  import PlaylistFormModal from './modals/PlaylistFormModal.svelte';
+  import AreaModal from './modals/AreaFormModal.svelte';
+
+  import ServiceModal from './modals/ServiceModal.svelte';
+  import MessageModal from './modals/MessageModal.svelte';
+
+  import { successNotification } from './providers/notification-provider';
+
+  let localeLanguage = '';
+  let settings = getCustomConfig();
+  let pageTitleSubscription;
+  let localeSubscription;
+  let upcomingEvents = [];
+
+  let modalConfirm;
+  let showConfirm;
+  let hideConfirm;
+  let confirmMessage = '';
+  let confirmCallback;
+
+  let editModal;
+  let editModelContent;
+
+  $isDay = !settings.is_night;
+  $isAuthenticated = settings.logged_in;
+
+  const sensor_submenu_sorting = (data) => {
+    data.forEach((menu) => {
+      if (menu.name === 'Sensors') {
+        let light_submenu = menu.subroutes
+          .filter((submenu) => {
+            return ['sensors_light', 'sensors_uva', 'sensors_uvb', 'sensors_uvi'].indexOf(submenu.name) !== -1;
+          })
+          .sort((a, b) => $_(`${a.title}`).localeCompare($_(`${b.title}`)));
+
+        if (light_submenu.length > 0) {
+          let other_menu = menu.subroutes.filter((submenu) => {
+            return ['sensors_light', 'sensors_uva', 'sensors_uvb', 'sensors_uvi'].indexOf(submenu.name) === -1;
+          });
+          menu.subroutes = [
+            {
+              name: 'sensors_light',
+              title: 'sensors.light.menu.title',
+              url: '',
+              breadcrumb: ['Home', 'Sensors'],
+              icon: 'fas ' + template_sensor_type_icon('light'),
+              hide: false,
+              subroutes: light_submenu,
+            },
+            ...other_menu,
+          ];
+        }
         menu.subroutes = [
-          {
-            name: 'sensors_light',
-            title: 'sensors.light.menu.title',
-            url: '',
-            breadcrumb: ['Home', 'Sensors'],
-            icon: 'fas ' + template_sensor_type_icon('light'),
-            hide: false,
-            subroutes: light_submenu,
-          },
-          ...other_menu,
+          ...menu.subroutes.slice(0, -2).sort((a, b) => $_(`${a.title}`).localeCompare($_(`${b.title}`))),
+          ...menu.subroutes.slice(-2),
         ];
       }
-      menu.subroutes = [
-        ...menu.subroutes.slice(0, -2).sort((a, b) => $_(`${a.title}`).localeCompare($_(`${b.title}`))),
-        ...menu.subroutes.slice(-2),
-      ];
-    }
+    });
+  };
+
+  const confirmModal = (message, callback) => {
+    confirmMessage = message;
+    confirmCallback = callback;
+    modalConfirm.show();
+  };
+
+  setContext('confirm', {
+    confirmModal,
   });
-};
-
-const confirmModal = (message, callback) => {
-  confirmMessage = message;
-  confirmCallback = callback;
-  modalConfirm.show();
-};
-
-setContext('confirm', {
-  confirmModal,
-});
-
-setContext('modals', {
-  editArea: (item, cb) => newModal('new_area', item, cb),
-  editButton: (item, cb) => newModal('new_button', item, cb),
-  editEnclosure: (item, cb) => newModal('new_enclosure', item, cb),
-  editPlaylist: (item, cb) => newModal('new_playlist', item, cb),
-  editRelay: (item, cb) => newModal('new_relay', item, cb),
-  editSensor: (item, cb) => newModal('new_sensor', item, cb),
-  editWebcam: (item, cb) => newModal('new_webcam', item, cb),
-  editService: (item, cb) => newModal('new_service', item, cb),
-  editMessage: (item, cb) => newModal('new_message', item, cb),
-});
-
-const newModal = (type, item, cb) => {
-  editModelContent = null;
-
-  switch (type) {
-    case 'new_area':
-      editModelContent = AreaModal;
-      break;
-
-    case 'new_button':
-      editModelContent = ButtonFormModal;
-      break;
-
-    case 'new_enclosure':
-      editModelContent = EnclosureFormModal;
-      break;
-
-    case 'new_playlist':
-      editModelContent = PlaylistFormModal;
-      break;
-
-    case 'new_relay':
-      editModelContent = RelayFormModal;
-      break;
-
-    case 'new_sensor':
-      editModelContent = SensorFormModal;
-      break;
-
-    case 'new_webcam':
-      editModelContent = WebcamFormModal;
-      break;
-
-    case 'new_service':
-      editModelContent = ServiceModal;
-      break;
-
-    case 'new_message':
-      editModelContent = MessageModal;
-      break;
-  }
 
-  if (editModelContent) {
-    setTimeout(() => {
-      editModal.show(item ? item.id : null, cb);
-    }, 150);
-  }
-};
-
-const confirmAction = async () => {
-  try {
-    await confirmCallback();
-    confirmCallback = null;
-  } catch {}
-  hideConfirm();
-};
-
-const menuAction = async (action) => {
-  let title = null;
-  let message = null;
-
-  switch (action) {
-    case 'scan_sensors':
-      await scanSensors((data) => (message = data.message));
-      title = $_('notification.scanning.ok.title');
-      break;
-    case 'scan_relays':
-      await scanRelays((data) => (message = data.message));
-      title = $_('notification.scanning.ok.title');
-      break;
-    case 'system_restart':
-      await systemRestart((data) => (message = data.message));
-      title = $_('notification.restart.ok.title');
-      break;
-    case 'system_reboot':
-      await systemReboot((data) => (message = data.message));
-      title = $_('notification.reboot.ok.title');
-      break;
-    case 'system_shutdown':
-      await systemShutdown((data) => (message = data.message));
-      title = $_('notification.shutdown.ok.title');
-      break;
-  }
-  successNotification(message, title);
-
-  title = null;
-  message = null;
-};
-
-const confirmModalWindow = (type) => {
-  let message = '';
-  let callbackAction = () => menuAction(type);
-
-  switch (type) {
-    case 'scan_sensors':
-      message = $_('modal.confirm.sensors.scan');
-      break;
-    case 'scan_relays':
-      message = $_('modal.confirm.relays.scan');
-      break;
-    case 'system_restart':
-      message = $_('modal.confirm.system.restart');
-      break;
-    case 'system_reboot':
-      if (settings.docker) {
-        callbackAction = null;
-        message = $_('modal.confirm.docker.not_available', {
-          default: 'This feature is not possible in a Docker setup.',
-        });
-      } else {
-        message = $_('modal.confirm.system.reboot', {
-          default: 'This will reboot the Raspberry PI. This can take up to 60 seconds.',
-        });
-      }
-      break;
-    case 'system_shutdown':
-      if (settings.docker) {
-        callbackAction = null;
-        message = $_('modal.confirm.docker.not_available', {
-          default: 'This feature is not possible in a Docker setup.',
-        });
-      } else {
-        message = $_('modal.confirm.system.shutdown', {
-          default: 'This will shutdown the Raspberry PI. Use with care!',
-        });
-      }
-      break;
-  }
+  setContext('modals', {
+    editArea: (item, cb) => newModal('new_area', item, cb),
+    editButton: (item, cb) => newModal('new_button', item, cb),
+    editEnclosure: (item, cb) => newModal('new_enclosure', item, cb),
+    editPlaylist: (item, cb) => newModal('new_playlist', item, cb),
+    editRelay: (item, cb) => newModal('new_relay', item, cb),
+    editSensor: (item, cb) => newModal('new_sensor', item, cb),
+    editWebcam: (item, cb) => newModal('new_webcam', item, cb),
+    editService: (item, cb) => newModal('new_service', item, cb),
+    editMessage: (item, cb) => newModal('new_message', item, cb),
+  });
 
-  confirmModal(message, callbackAction);
-};
+  const newModal = (type, item, cb) => {
+    editModelContent = null;
 
-// Update sensor sub menu sorting
-sensor_submenu_sorting(Pages);
+    switch (type) {
+      case 'new_area':
+        editModelContent = AreaModal;
+        break;
 
-// Auto 'magical' set/remove darkmode ONLY when isDay changed
-$: autoDarkMode($isDay, $isDarkDesktop);
+      case 'new_button':
+        editModelContent = ButtonFormModal;
+        break;
 
-// Update disabled and enabled menu features
-$: toggleSidebarAdminActions($isAuthenticated);
+      case 'new_enclosure':
+        editModelContent = EnclosureFormModal;
+        break;
 
-onMount(() => {
-  try {
-    $websocket = { type: 'client_init' };
-  } catch (e) {
-    console.log('Websocket reconnecting ex', e);
-  }
+      case 'new_playlist':
+        editModelContent = PlaylistFormModal;
+        break;
 
-  // Get initial data
-  fetchUpcomingEvents((data) => {
-    upcomingEvents = data;
-  });
+      case 'new_relay':
+        editModelContent = RelayFormModal;
+        break;
+
+      case 'new_sensor':
+        editModelContent = SensorFormModal;
+        break;
+
+      case 'new_webcam':
+        editModelContent = WebcamFormModal;
+        break;
+
+      case 'new_service':
+        editModelContent = ServiceModal;
+        break;
 
-  /* GUI Hacks */
-  setFavicon(ApiUrl + '/' + settings.favicon);
-  document.querySelector('nav.main-header').classList.add('text-sm');
-  document.querySelector('nav.main-header .d-none.d-sm-inline-block').classList.remove('d-none', 'd-sm-inline-block');
-  document.querySelector('aside.main-sidebar').prepend(document.querySelector('a.brand-link'));
-  document.querySelector('div.sidebar').prepend(document.querySelector('div.user-panel'));
-
-  const sidebar = jQuery('div.sidebar nav.mt-2 ul.nav-sidebar');
-  sidebar.addClass('nav-child-indent nav-flat');
-  sidebar.find('i.disabled').removeClass('disabled').parent().parent().addClass('disabled');
-  sidebar.find('i.fa-sync-alt').slice(2, 3).parent().addClass('text-info');
-  sidebar.find('i.fa-sync-alt').last().parent().addClass('text-warning');
-  sidebar.find('i.fa-power-off:last').parent().addClass('text-danger');
-
-  localeSubscription = locale.subscribe((x) => (localeLanguage = x));
-  pageTitleSubscription = listenPageTitleChanged();
-
-  toggleSidebarAdminActions($isAuthenticated);
-
-  // Reload every 15 minutes
-  const interval = setInterval(
-    () => {
-      fetchUpcomingEvents((data) => {
-        upcomingEvents = data;
-      });
-      animate_footer_badge();
-    },
-    15 * 60 * 1000,
-  );
-
-  //If a function is returned from onMount, it will be called when the component is unmounted.
-  return () => {
-    clearInterval(interval);
+      case 'new_message':
+        editModelContent = MessageModal;
+        break;
+    }
+
+    if (editModelContent) {
+      setTimeout(() => {
+        editModal.show(item ? item.id : null, cb);
+      }, 150);
+    }
+  };
+
+  const confirmAction = async () => {
+    try {
+      await confirmCallback();
+      confirmCallback = null;
+    } catch {}
+    hideConfirm();
+  };
+
+  const menuAction = async (action) => {
+    let title = null;
+    let message = null;
+
+    switch (action) {
+      case 'scan_sensors':
+        await scanSensors((data) => (message = data.message));
+        title = $_('notification.scanning.ok.title');
+        break;
+      case 'scan_relays':
+        await scanRelays((data) => (message = data.message));
+        title = $_('notification.scanning.ok.title');
+        break;
+      case 'system_restart':
+        await systemRestart((data) => (message = data.message));
+        title = $_('notification.restart.ok.title');
+        break;
+      case 'system_reboot':
+        await systemReboot((data) => (message = data.message));
+        title = $_('notification.reboot.ok.title');
+        break;
+      case 'system_shutdown':
+        await systemShutdown((data) => (message = data.message));
+        title = $_('notification.shutdown.ok.title');
+        break;
+    }
+    successNotification(message, title);
+
+    title = null;
+    message = null;
   };
-});
 
-onDestroy(() => {
-  if (localeSubscription) localeSubscription();
-  if (pageTitleSubscription) pageTitleSubscription();
-});
+  const confirmModalWindow = (type) => {
+    let message = '';
+    let callbackAction = () => menuAction(type);
+
+    switch (type) {
+      case 'scan_sensors':
+        message = $_('modal.confirm.sensors.scan');
+        break;
+      case 'scan_relays':
+        message = $_('modal.confirm.relays.scan');
+        break;
+      case 'system_restart':
+        message = $_('modal.confirm.system.restart');
+        break;
+      case 'system_reboot':
+        if (settings.docker) {
+          callbackAction = null;
+          message = $_('modal.confirm.docker.not_available', {
+            default: 'This feature is not possible in a Docker setup.',
+          });
+        } else {
+          message = $_('modal.confirm.system.reboot', {
+            default: 'This will reboot the Raspberry PI. This can take up to 60 seconds.',
+          });
+        }
+        break;
+      case 'system_shutdown':
+        if (settings.docker) {
+          callbackAction = null;
+          message = $_('modal.confirm.docker.not_available', {
+            default: 'This feature is not possible in a Docker setup.',
+          });
+        } else {
+          message = $_('modal.confirm.system.shutdown', {
+            default: 'This will shutdown the Raspberry PI. Use with care!',
+          });
+        }
+        break;
+    }
+
+    confirmModal(message, callbackAction);
+  };
 
-function routeLoaded({ detail: route }) {
-  if (get(customPageTitleUsed)) return;
+  // Update sensor sub menu sorting
+  sensor_submenu_sorting(Pages);
 
-  return onRouteLoaded(route);
-}
+  // Auto 'magical' set/remove darkmode ONLY when isDay changed
+  $: autoDarkMode($isDay, $isDarkDesktop);
+
+  // Update disabled and enabled menu features
+  $: toggleSidebarAdminActions($isAuthenticated);
+
+  onMount(() => {
+    try {
+      $websocket = { type: 'client_init' };
+    } catch (e) {
+      console.log('Websocket reconnecting ex', e);
+    }
+
+    // Get initial data
+    fetchUpcomingEvents((data) => {
+      upcomingEvents = data;
+    });
+
+    /* GUI Hacks */
+    setFavicon(ApiUrl + '/' + settings.favicon);
+    document.querySelector('nav.main-header').classList.add('text-sm');
+    document.querySelector('nav.main-header .d-none.d-sm-inline-block').classList.remove('d-none', 'd-sm-inline-block');
+    document.querySelector('aside.main-sidebar').prepend(document.querySelector('a.brand-link'));
+    document.querySelector('div.sidebar').prepend(document.querySelector('div.user-panel'));
+
+    const sidebar = jQuery('div.sidebar nav.mt-2 ul.nav-sidebar');
+    sidebar.addClass('nav-child-indent nav-flat');
+    sidebar.find('i.disabled').removeClass('disabled').parent().parent().addClass('disabled');
+    sidebar.find('i.fa-sync-alt').slice(2, 3).parent().addClass('text-info');
+    sidebar.find('i.fa-sync-alt').last().parent().addClass('text-warning');
+    sidebar.find('i.fa-power-off:last').parent().addClass('text-danger');
+
+    localeSubscription = locale.subscribe((x) => (localeLanguage = x));
+    pageTitleSubscription = listenPageTitleChanged();
+
+    toggleSidebarAdminActions($isAuthenticated);
+
+    // Reload every 15 minutes
+    const interval = setInterval(
+      () => {
+        fetchUpcomingEvents((data) => {
+          upcomingEvents = data;
+        });
+        animate_footer_badge();
+      },
+      15 * 60 * 1000,
+    );
+
+    //If a function is returned from onMount, it will be called when the component is unmounted.
+    return () => {
+      clearInterval(interval);
+    };
+  });
+
+  onDestroy(() => {
+    if (localeSubscription) localeSubscription();
+    if (pageTitleSubscription) pageTitleSubscription();
+  });
+
+  function routeLoaded({ detail: route }) {
+    if (get(customPageTitleUsed)) return;
+
+    return onRouteLoaded(route);
+  }
 </script>
 
 <div class="wrapper">
diff --git a/gui/Error.svelte b/gui/Error.svelte
index 2c3cef2a6..e8ed85cf1 100644
--- a/gui/Error.svelte
+++ b/gui/Error.svelte
@@ -1,5 +1,5 @@
 <style>
-/* @font-face {
+  /* @font-face {
 	font-family: 'Montserrat';
 	font-style: normal;
 	font-weight: 700;
@@ -7,157 +7,157 @@
 	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 } */
 
-:global {
-  * {
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-  }
-
-  body {
-    padding: 0;
-    margin: 0;
-  }
-}
-
-#error-page {
-  display: flex;
-  flex-direction: column;
-  padding: 1rem;
-  background-color: #c21b17;
-  min-height: 100vh;
-}
-
-#error-page .header {
-  /* For logo */
-}
-
-#error-page .header img {
-  max-width: calc(30vw - 2rem);
-}
-
-#error-page .error {
-  /* For error box */
-
-  align-self: center;
-  flex: 1;
-
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  max-width: 30rem;
-  font-family: 'Montserrat', sans-serif;
-}
-
-#error-page .error .error-status-code {
-  font-size: 220px;
-  font-weight: 900;
-  margin: 0px;
-  color: #fff;
-  line-height: 0.9;
-  text-transform: uppercase;
-  letter-spacing: 10px;
-}
-
-#error-page .error p {
-  font-size: 22px;
-  font-weight: 700;
-  text-transform: uppercase;
-  color: #fff;
-  margin-top: 20px;
-  margin-bottom: 15px;
-}
-
-#error-page .error .links {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-#error-page .error .links a {
-  font-weight: 700;
-  text-decoration: none;
-  background-color: transparent;
-  border: 2px solid transparent;
-  text-transform: uppercase;
-  padding: 13px 25px;
-  font-size: 18px;
-  border-radius: 40px;
-  margin: 7px;
-  -webkit-transition: 0.2s all;
-  transition: 0.2s all;
-}
-
-#error-page .error .links a:hover {
-  opacity: 0.9;
-}
-
-#error-page .error .links .home-btn {
-  color: rgba(255, 0, 36, 0.7);
-  background: #fff;
-}
-
-#error-page .error .links .contact-btn {
-  border: 2px solid rgba(255, 255, 255, 0.9);
-  color: rgba(255, 255, 255, 0.9);
-}
-
-/* XLarge */
-@media screen and (max-width: 1600px) {
-  #error-page .header img {
-    max-width: calc(35vw - 2rem);
+  :global {
+    * {
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+    }
+
+    body {
+      padding: 0;
+      margin: 0;
+    }
   }
-}
 
-/* Large */
-@media screen and (max-width: 1200px) {
-  #error-page .header img {
-    max-width: calc(40vw - 2rem);
+  #error-page {
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+    background-color: #c21b17;
+    min-height: 100vh;
   }
-}
 
-/* Medium */
-@media screen and (max-width: 992px) {
-  #error-page .header img {
-    max-width: calc(60vw - 2rem);
+  #error-page .header {
+    /* For logo */
   }
-}
 
-/* Small */
-@media screen and (max-width: 768px) {
   #error-page .header img {
-    max-width: calc(75vw - 2rem);
+    max-width: calc(30vw - 2rem);
+  }
+
+  #error-page .error {
+    /* For error box */
+
+    align-self: center;
+    flex: 1;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    max-width: 30rem;
+    font-family: 'Montserrat', sans-serif;
   }
 
   #error-page .error .error-status-code {
-    font-size: 160px;
+    font-size: 220px;
+    font-weight: 900;
+    margin: 0px;
+    color: #fff;
+    line-height: 0.9;
+    text-transform: uppercase;
+    letter-spacing: 10px;
   }
 
   #error-page .error p {
-    font-size: 15px;
+    font-size: 22px;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: #fff;
+    margin-top: 20px;
+    margin-bottom: 15px;
   }
-}
 
-/* XSmall */
-@media screen and (max-width: 576px) {
-  #error-page .header img {
-    max-width: calc(90vw - 2rem);
+  #error-page .error .links {
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
-  #error-page .error .error-status-code {
-    font-size: 120px;
+  #error-page .error .links a {
+    font-weight: 700;
+    text-decoration: none;
+    background-color: transparent;
+    border: 2px solid transparent;
+    text-transform: uppercase;
+    padding: 13px 25px;
+    font-size: 18px;
+    border-radius: 40px;
+    margin: 7px;
+    -webkit-transition: 0.2s all;
+    transition: 0.2s all;
   }
 
-  #error-page .error p {
-    font-size: 15px;
+  #error-page .error .links a:hover {
+    opacity: 0.9;
+  }
+
+  #error-page .error .links .home-btn {
+    color: rgba(255, 0, 36, 0.7);
+    background: #fff;
+  }
+
+  #error-page .error .links .contact-btn {
+    border: 2px solid rgba(255, 255, 255, 0.9);
+    color: rgba(255, 255, 255, 0.9);
+  }
+
+  /* XLarge */
+  @media screen and (max-width: 1600px) {
+    #error-page .header img {
+      max-width: calc(35vw - 2rem);
+    }
+  }
+
+  /* Large */
+  @media screen and (max-width: 1200px) {
+    #error-page .header img {
+      max-width: calc(40vw - 2rem);
+    }
+  }
+
+  /* Medium */
+  @media screen and (max-width: 992px) {
+    #error-page .header img {
+      max-width: calc(60vw - 2rem);
+    }
+  }
+
+  /* Small */
+  @media screen and (max-width: 768px) {
+    #error-page .header img {
+      max-width: calc(75vw - 2rem);
+    }
+
+    #error-page .error .error-status-code {
+      font-size: 160px;
+    }
+
+    #error-page .error p {
+      font-size: 15px;
+    }
+  }
+
+  /* XSmall */
+  @media screen and (max-width: 576px) {
+    #error-page .header img {
+      max-width: calc(90vw - 2rem);
+    }
+
+    #error-page .error .error-status-code {
+      font-size: 120px;
+    }
+
+    #error-page .error p {
+      font-size: 15px;
+    }
   }
-}
 </style>
 
 <script>
-export let code = 500;
-export let message = '';
-export let email = '';
+  export let code = 500;
+  export let message = '';
+  export let email = '';
 </script>
 
 <div id="error-page">
diff --git a/gui/components/common/Button.svelte b/gui/components/common/Button.svelte
index a936b8ab1..5c4e73237 100644
--- a/gui/components/common/Button.svelte
+++ b/gui/components/common/Button.svelte
@@ -1,27 +1,27 @@
 <style>
-h1.button {
-  font-size: 8rem;
-}
+  h1.button {
+    font-size: 8rem;
+  }
 </style>
 
 <script>
-import { onMount } from 'svelte';
+  import { onMount } from 'svelte';
 
-import { buttons } from '../../stores/terrariumpi';
+  import { buttons } from '../../stores/terrariumpi';
 
-export let button;
+  export let button;
 
-// Set the initial relay value
-$buttons[button.id] = {
-  value: button.value,
-  error: button.error,
-  last_update: new Date(),
-  changed: true,
-};
+  // Set the initial relay value
+  $buttons[button.id] = {
+    value: button.value,
+    error: button.error,
+    last_update: new Date(),
+    changed: true,
+  };
 
-onMount(() => {
-  $buttons[button.id].last_update = new Date();
-});
+  onMount(() => {
+    $buttons[button.id].last_update = new Date();
+  });
 </script>
 
 <h1 class="pt-3 button">
diff --git a/gui/components/common/CardGraphPeriodTools.svelte b/gui/components/common/CardGraphPeriodTools.svelte
index 0a4718be8..93e701658 100644
--- a/gui/components/common/CardGraphPeriodTools.svelte
+++ b/gui/components/common/CardGraphPeriodTools.svelte
@@ -1,11 +1,11 @@
 <script>
-import { _ } from 'svelte-i18n';
+  import { _ } from 'svelte-i18n';
 
-import { graphs } from '../../stores/terrariumpi';
-import { toggleGraphPeriod } from '../../helpers/graph-helpers';
+  import { graphs } from '../../stores/terrariumpi';
+  import { toggleGraphPeriod } from '../../helpers/graph-helpers';
 
-export let id;
-export let replaced = false;
+  export let id;
+  export let replaced = false;
 </script>
 
 <div class="btn-group">
diff --git a/gui/components/common/CardSettingsTools.svelte b/gui/components/common/CardSettingsTools.svelte
index aff4d9694..e78504684 100644
--- a/gui/components/common/CardSettingsTools.svelte
+++ b/gui/components/common/CardSettingsTools.svelte
@@ -1,6 +1,6 @@
 <script>
-import { isAuthenticated } from '../../stores/authentication';
-import LoginLink from './LoginLink.svelte';
+  import { isAuthenticated } from '../../stores/authentication';
+  import LoginLink from './LoginLink.svelte';
 </script>
 
 <div class="btn-group" class:d-none="{$isAuthenticated && $$slots.default === undefined}">
diff --git a/gui/components/common/DoorIcon.svelte b/gui/components/common/DoorIcon.svelte
index 69de214c2..fab61e7ae 100644
--- a/gui/components/common/DoorIcon.svelte
+++ b/gui/components/common/DoorIcon.svelte
@@ -1,6 +1,6 @@
 <script>
-import { doors } from '../../stores/terrariumpi';
-export let door_id;
+  import { doors } from '../../stores/terrariumpi';
+  export let door_id;
 </script>
 
 {#if !door_id || !$doors.doors[door_id] || ($doors.doors[door_id] && $doors.doors[door_id].closed)}
diff --git a/gui/components/common/Gauge.svelte b/gui/components/common/Gauge.svelte
index 6c06c7850..b016c6801 100644
--- a/gui/components/common/Gauge.svelte
+++ b/gui/components/common/Gauge.svelte
@@ -5,107 +5,107 @@
 </style>
 
 <script>
-import { onMount } from 'svelte';
-import Gauge from 'gaugeJS';
+  import { onMount } from 'svelte';
+  import Gauge from 'gaugeJS';
 
-import { sensors, updateSensor } from '../../stores/terrariumpi';
-import { get_template_color } from '../../helpers/color-helpers';
-import { roundToPrecision } from '../../helpers/number-helpers';
-import { formatBytes } from '../../helpers/file-size-helpers';
-import { getCustomConfig } from '../../config';
-import { isDarkInterface } from '../../stores/terrariumpi';
+  import { sensors, updateSensor } from '../../stores/terrariumpi';
+  import { get_template_color } from '../../helpers/color-helpers';
+  import { roundToPrecision } from '../../helpers/number-helpers';
+  import { formatBytes } from '../../helpers/file-size-helpers';
+  import { getCustomConfig } from '../../config';
+  import { isDarkInterface } from '../../stores/terrariumpi';
 
-let settings = getCustomConfig();
+  let settings = getCustomConfig();
 
-export let id;
-export let type;
-export let value = 0;
+  export let id;
+  export let type;
+  export let value = 0;
 
-export let alarm_min = 100;
-export let alarm_max = 800;
-export let limit_min = 0;
-export let limit_max = 1000;
+  export let alarm_min = 100;
+  export let alarm_max = 800;
+  export let limit_min = 0;
+  export let limit_max = 1000;
 
-export let warning = false;
-export let error = false;
-export let excluded = false;
-export let minmax = true;
+  export let warning = false;
+  export let error = false;
+  export let excluded = false;
+  export let minmax = true;
 
-// Set the initial gauge value
-updateSensor({
-  id: id,
-  value: value,
-  alarm_min: alarm_min,
-  alarm_max: alarm_max,
-  limit_min: limit_min,
-  limit_max: limit_max,
-  measure_min: value,
-  measure_max: value,
-  alarm: warning || alarm_min > value || alarm_max < value,
-  error: error,
-  excluded: excluded,
-});
+  // Set the initial gauge value
+  updateSensor({
+    id: id,
+    value: value,
+    alarm_min: alarm_min,
+    alarm_max: alarm_max,
+    limit_min: limit_min,
+    limit_max: limit_max,
+    measure_min: value,
+    measure_max: value,
+    alarm: warning || alarm_min > value || alarm_max < value,
+    error: error,
+    excluded: excluded,
+  });
 
-const total_area = limit_max - limit_min;
-const opts = {
-  angle: 0,
-  lineWidth: 0.6,
-  pointer: {
-    length: 0.8,
-    strokeWidth: 0.07,
-    color: '#1D212A',
-  },
-  limitMax: false,
-  limitMin: true,
-  strokeColor: '#F0F3F3',
-  generateGradient: true,
-  highDpiSupport: true,
-  percentColors: [
-    [0.0, get_template_color('text-danger', false, true)],
-    [(alarm_min - limit_min) / total_area, get_template_color('text-warning', false, true)],
-    [((alarm_min + alarm_max) / 2 - limit_min) / total_area, get_template_color('text-success', false, true)],
-    [(alarm_max - limit_min) / total_area, get_template_color('text-warning', false, true)],
-    [1.0, get_template_color('text-danger', false, true)],
-  ],
-};
-
-if (settings.graph_show_min_max_gauge && minmax && $sensors[id]['measure_min'] && $sensors[id]['measure_max']) {
-  opts.staticLabels = {
-    labels: [$sensors[id]['measure_min'], $sensors[id]['measure_max']],
-    font: '10px Helvetica Neue,sans-serif',
-    color: $isDarkInterface ? '#adb5bd' : '#6c757d',
-    fractionDigits: 2,
+  const total_area = limit_max - limit_min;
+  const opts = {
+    angle: 0,
+    lineWidth: 0.6,
+    pointer: {
+      length: 0.8,
+      strokeWidth: 0.07,
+      color: '#1D212A',
+    },
+    limitMax: false,
+    limitMin: true,
+    strokeColor: '#F0F3F3',
+    generateGradient: true,
+    highDpiSupport: true,
+    percentColors: [
+      [0.0, get_template_color('text-danger', false, true)],
+      [(alarm_min - limit_min) / total_area, get_template_color('text-warning', false, true)],
+      [((alarm_min + alarm_max) / 2 - limit_min) / total_area, get_template_color('text-success', false, true)],
+      [(alarm_max - limit_min) / total_area, get_template_color('text-warning', false, true)],
+      [1.0, get_template_color('text-danger', false, true)],
+    ],
   };
-}
 
-let gauge;
-let gauge_value = 'filesize' ? formatBytes(0) : roundToPrecision(0) + ' ' + settings.units[type].value;
+  if (settings.graph_show_min_max_gauge && minmax && $sensors[id]['measure_min'] && $sensors[id]['measure_max']) {
+    opts.staticLabels = {
+      labels: [$sensors[id]['measure_min'], $sensors[id]['measure_max']],
+      font: '10px Helvetica Neue,sans-serif',
+      color: $isDarkInterface ? '#adb5bd' : '#6c757d',
+      fractionDigits: 2,
+    };
+  }
+
+  let gauge;
+  let gauge_value = 'filesize' ? formatBytes(0) : roundToPrecision(0) + ' ' + settings.units[type].value;
 
-onMount(() => {
-  gauge = new Gauge.Gauge(document.getElementById(`gauge_${id}`)).setOptions(opts); // create sexy gauge!
-  gauge.maxValue = $sensors[id]['limit_max']; // set max gauge value
-  gauge.setMinValue($sensors[id]['limit_min']); // set min value
-});
+  onMount(() => {
+    gauge = new Gauge.Gauge(document.getElementById(`gauge_${id}`)).setOptions(opts); // create sexy gauge!
+    gauge.maxValue = $sensors[id]['limit_max']; // set max gauge value
+    gauge.setMinValue($sensors[id]['limit_min']); // set min value
+  });
 
-// TODO: Not sure if we need to update min and max values in reactive mode... needs rethinking. As when you change this, you will reload the page.... and re-setup
-$: {
-  if (gauge && $sensors[id].changed) {
-    if (settings.graph_show_min_max_gauge && minmax && $sensors[id].measure_min && $sensors[id].measure_max) {
-      gauge.options.staticLabels = {
-        labels: [$sensors[id].measure_min, $sensors[id].measure_max],
-        font: '10px Helvetica Neue,sans-serif',
-        color: $isDarkInterface ? '#adb5bd' : '#6c757d',
-        fractionDigits: 2,
-      };
+  // TODO: Not sure if we need to update min and max values in reactive mode... needs rethinking. As when you change this, you will reload the page.... and re-setup
+  $: {
+    if (gauge && $sensors[id].changed) {
+      if (settings.graph_show_min_max_gauge && minmax && $sensors[id].measure_min && $sensors[id].measure_max) {
+        gauge.options.staticLabels = {
+          labels: [$sensors[id].measure_min, $sensors[id].measure_max],
+          font: '10px Helvetica Neue,sans-serif',
+          color: $isDarkInterface ? '#adb5bd' : '#6c757d',
+          fractionDigits: 2,
+        };
+      }
+      gauge.set($sensors[id].value); // set actual value
+      gauge_value =
+        type === 'filesize'
+          ? formatBytes($sensors[id].value)
+          : roundToPrecision($sensors[id].value) + ' ' + settings.units[type].value;
+      $sensors[id].changed = false;
     }
-    gauge.set($sensors[id].value); // set actual value
-    gauge_value =
-      type === 'filesize'
-        ? formatBytes($sensors[id].value)
-        : roundToPrecision($sensors[id].value) + ' ' + settings.units[type].value;
-    $sensors[id].changed = false;
   }
-}
 </script>
 
 <canvas id="gauge_{id}" class="gauge"></canvas>
diff --git a/gui/components/common/Graph.svelte b/gui/components/common/Graph.svelte
index 005e47bfb..7f409d492 100644
--- a/gui/components/common/Graph.svelte
+++ b/gui/components/common/Graph.svelte
@@ -1,241 +1,241 @@
 <script>
-import { onMount } from 'svelte';
-import { Line } from 'svelte-chartjs';
-import {
-  Chart as ChartJS,
-  Title,
-  Tooltip,
-  Legend,
-  TimeScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Filler,
-} from 'chart.js';
-ChartJS.register(Title, Tooltip, Legend, TimeScale, LinearScale, PointElement, LineElement, Filler);
-import 'chartjs-adapter-dayjs-4';
-import { _ } from 'svelte-i18n';
-
-import { smoothing } from '../../helpers/graph-helpers';
-import { graphDefaultOpts, graphTypes } from '../../constants/graph';
-import { fetchGraphData } from '../../providers/api';
-import { graphs, updateSensor } from '../../stores/terrariumpi';
-import { getCustomConfig } from '../../config';
-
-export let id;
-export let type;
-export let mode;
-
-let settings = getCustomConfig();
-
-const _dynamicColor = (type, context) => {
-  if (!context.raw) {
-    return;
-  }
-  if (context.raw.value < context.raw.alarm_min) {
-    return 'border' === type ? graphTypes.alarm_min.colors.line : graphTypes.alarm_min.colors.background;
-  }
-  if (context.raw.value > context.raw.alarm_max) {
-    return 'border' === type ? graphTypes.alarm_max.colors.line : graphTypes.alarm_max.colors.background;
-  }
-  return 'border' === type ? graphTypes.value.colors.line : graphTypes.value.colors.background;
-};
-
-const dynamicBackgroundColor = (context) => {
-  return _dynamicColor('background', context);
-};
-
-const dynamicBorderColor = (context) => {
-  return _dynamicColor('border', context);
-};
-
-const updateGraph = (new_data, init) => {
-  init = init || false;
-
-  // Inverse the magnetic door data for better graphing
-  if (mode === 'buttons' && type === 'magnetic') {
-    new_data = new_data.map((item) => {
-      item.value = item.value === 1 ? 0 : 1;
-      return item;
-    });
-  }
+  import { onMount } from 'svelte';
+  import { Line } from 'svelte-chartjs';
+  import {
+    Chart as ChartJS,
+    Title,
+    Tooltip,
+    Legend,
+    TimeScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Filler,
+  } from 'chart.js';
+  ChartJS.register(Title, Tooltip, Legend, TimeScale, LinearScale, PointElement, LineElement, Filler);
+  import 'chartjs-adapter-dayjs-4';
+  import { _ } from 'svelte-i18n';
+
+  import { smoothing } from '../../helpers/graph-helpers';
+  import { graphDefaultOpts, graphTypes } from '../../constants/graph';
+  import { fetchGraphData } from '../../providers/api';
+  import { graphs, updateSensor } from '../../stores/terrariumpi';
+  import { getCustomConfig } from '../../config';
+
+  export let id;
+  export let type;
+  export let mode;
+
+  let settings = getCustomConfig();
+
+  const _dynamicColor = (type, context) => {
+    if (!context.raw) {
+      return;
+    }
+    if (context.raw.value < context.raw.alarm_min) {
+      return 'border' === type ? graphTypes.alarm_min.colors.line : graphTypes.alarm_min.colors.background;
+    }
+    if (context.raw.value > context.raw.alarm_max) {
+      return 'border' === type ? graphTypes.alarm_max.colors.line : graphTypes.alarm_max.colors.background;
+    }
+    return 'border' === type ? graphTypes.value.colors.line : graphTypes.value.colors.background;
+  };
 
-  if (['wattage', 'magnetic', 'motion', 'ldr', 'remote'].indexOf(type) !== -1) {
-    // Add a duplicate record on the 'end' with the current time stamp. This will keep the graph updating at every refresh
-    let last_item = new_data[new_data.length - 1];
-    last_item.timestamp = new Date();
-    new_data.push(last_item);
-  }
+  const dynamicBackgroundColor = (context) => {
+    return _dynamicColor('background', context);
+  };
 
-  if (mode === 'sensors' && settings.graph_smooth_value > 0) {
-    let smoothed_data = smoothing(
-      new_data.map((point) => {
-        return point.value;
-      }),
-      settings.graph_smooth_value,
-    );
-    for (let counter = 0; counter < new_data.length; counter++) {
-      new_data[counter].value = smoothed_data[counter];
+  const dynamicBorderColor = (context) => {
+    return _dynamicColor('border', context);
+  };
+
+  const updateGraph = (new_data, init) => {
+    init = init || false;
+
+    // Inverse the magnetic door data for better graphing
+    if (mode === 'buttons' && type === 'magnetic') {
+      new_data = new_data.map((item) => {
+        item.value = item.value === 1 ? 0 : 1;
+        return item;
+      });
     }
-  }
 
-  if (init) {
-    graphData = {
-      labels: null,
-      datasets: [],
-    };
+    if (['wattage', 'magnetic', 'motion', 'ldr', 'remote'].indexOf(type) !== -1) {
+      // Add a duplicate record on the 'end' with the current time stamp. This will keep the graph updating at every refresh
+      let last_item = new_data[new_data.length - 1];
+      last_item.timestamp = new Date();
+      new_data.push(last_item);
+    }
 
-    for (let graphValue in new_data[0]) {
-      if (graphValue === 'timestamp' || (graphValue === 'value' && ['sensors', 'buttons'].indexOf(mode) === -1)) {
-        continue;
+    if (mode === 'sensors' && settings.graph_smooth_value > 0) {
+      let smoothed_data = smoothing(
+        new_data.map((point) => {
+          return point.value;
+        }),
+        settings.graph_smooth_value,
+      );
+      for (let counter = 0; counter < new_data.length; counter++) {
+        new_data[counter].value = smoothed_data[counter];
       }
+    }
 
-      let dataset = {
-        graphType:
-          ['sensors', 'buttons'].indexOf(mode) !== -1 ? type : graphValue === 'flow' ? 'water_flow' : graphValue, // TODO: Make the flow field to water_flow field in the API
-        label: $_(graphTypes[mode === 'buttons' ? type : graphValue].label),
-        tension: mode === 'sensors' ? 0.4 : 0,
-        data: new_data,
-        parsing: {
-          xAxisKey: 'timestamp',
-          yAxisKey: graphValue,
-        },
-        yAxisID: 'y',
-        fill: mode !== 'sensors',
-        stepped: mode !== 'sensors',
-        borderColor: graphTypes[mode === 'buttons' ? type : graphValue].colors.line,
-        backgroundColor: graphTypes[mode === 'buttons' ? type : graphValue].colors.background,
+    if (init) {
+      graphData = {
+        labels: null,
+        datasets: [],
       };
 
-      if (graphValue === 'flow') {
-        dataset.yAxisID = 'y2';
+      for (let graphValue in new_data[0]) {
+        if (graphValue === 'timestamp' || (graphValue === 'value' && ['sensors', 'buttons'].indexOf(mode) === -1)) {
+          continue;
+        }
+
+        let dataset = {
+          graphType:
+            ['sensors', 'buttons'].indexOf(mode) !== -1 ? type : graphValue === 'flow' ? 'water_flow' : graphValue, // TODO: Make the flow field to water_flow field in the API
+          label: $_(graphTypes[mode === 'buttons' ? type : graphValue].label),
+          tension: mode === 'sensors' ? 0.4 : 0,
+          data: new_data,
+          parsing: {
+            xAxisKey: 'timestamp',
+            yAxisKey: graphValue,
+          },
+          yAxisID: 'y',
+          fill: mode !== 'sensors',
+          stepped: mode !== 'sensors',
+          borderColor: graphTypes[mode === 'buttons' ? type : graphValue].colors.line,
+          backgroundColor: graphTypes[mode === 'buttons' ? type : graphValue].colors.background,
+        };
+
+        if (graphValue === 'flow') {
+          dataset.yAxisID = 'y2';
+        }
+        graphData.datasets.push(dataset);
+
+        if (graphValue === 'value') {
+          graphData.datasets[graphData.datasets.length - 1].pointRadius = 1;
+
+          graphData.datasets[graphData.datasets.length - 1].pointBorderColor = dynamicBorderColor;
+          graphData.datasets[graphData.datasets.length - 1].pointBackgroundColor = dynamicBackgroundColor;
+        }
       }
-      graphData.datasets.push(dataset);
-
-      if (graphValue === 'value') {
-        graphData.datasets[graphData.datasets.length - 1].pointRadius = 1;
-
-        graphData.datasets[graphData.datasets.length - 1].pointBorderColor = dynamicBorderColor;
-        graphData.datasets[graphData.datasets.length - 1].pointBackgroundColor = dynamicBackgroundColor;
+    } else {
+      graphOpts.animation = { duration: 0 };
+      for (let counter = 0; counter < graphData.datasets.length; counter++) {
+        graphData.datasets[counter].data = new_data;
       }
-    }
-  } else {
-    graphOpts.animation = { duration: 0 };
-    for (let counter = 0; counter < graphData.datasets.length; counter++) {
-      graphData.datasets[counter].data = new_data;
-    }
-    graphData.labels = new_data.map((point) => {
-      return point.timestamp;
-    });
-  }
-
-  if (mode === 'sensors') {
-    if (settings.graph_limit_min_max) {
-      let last = new_data.length - 1;
-      graphOpts.scales.y.min =
-        new_data[last].alarm_min - Math.abs(new_data[last].alarm_min === 0 ? 20 : new_data[last].alarm_min * 0.2);
-      graphOpts.scales.y.max =
-        new_data[last].alarm_max + Math.abs(new_data[last].alarm_max === 0 ? 20 : new_data[last].alarm_max * 0.2);
-      graphOpts.scales.y.ticks.includeBounds = false;
-    }
-    if (settings.graph_show_min_max_gauge) {
-      let values = new_data.map((point) => {
-        return point.value;
-      });
-      updateSensor({
-        id: id,
-        measure_min: Math.min(...values),
-        measure_max: Math.max(...values),
+      graphData.labels = new_data.map((point) => {
+        return point.timestamp;
       });
     }
-  }
 
-  if ($graphs[id].period === 'day') {
-    graphOpts.scales.x.time.unit = 'minute';
-    graphOpts.scales.x.time.displayFormats.minute = 'LT';
-  } else if ($graphs[id].period === 'week') {
-    graphOpts.scales.x.time.unit = 'hour';
-    graphOpts.scales.x.time.displayFormats.hour = 'dd LT';
-  } else if ($graphs[id].period === 'month') {
-    graphOpts.scales.x.time.unit = 'hour';
-    graphOpts.scales.x.time.displayFormats.hour = 'D/M LT';
-  } else if ($graphs[id].period === 'year') {
-    graphOpts.scales.x.time.unit = 'day';
-    graphOpts.scales.x.time.displayFormats.day = 'D/M LT';
-  }
-};
-
-// Init graph through store
-$graphs[id] = {
-  period: 'day',
-  changed: true, // This will trigger the initial loading when the page loads :)
-};
-
-// Make a clone of the general graph settings ??? Not really working :(
-let graphOpts = { ...graphDefaultOpts };
-graphOpts.scales.y2.display = ['relays'].indexOf(mode) !== -1;
-graphOpts.scales.y.ticks.stepSize = ['buttons'].indexOf(mode) !== -1 ? 1 : null;
-graphOpts.scales.y.min = ['buttons', 'relays'].indexOf(mode) !== -1 ? 0 : null;
-graphOpts.scales.y2.min = ['relays'].indexOf(mode) !== -1 ? 0 : null;
-
-let graphData;
-let loading = true;
-let nodata = false;
-
-onMount(() => {
-  // Start the graph updater once every 1 minute
-  const interval = setInterval(async () => {
-    if (!loading) {
-      let new_data;
-      await fetchGraphData(
-        mode,
-        id,
-        $graphs[id].period,
-        (data) =>
-          (new_data = data.map((point) => {
-            point.timestamp *= 1000;
-            return point;
-          })),
-      );
-      nodata = new_data.length === 0;
-
-      if (!nodata) {
-        updateGraph(new_data, false);
+    if (mode === 'sensors') {
+      if (settings.graph_limit_min_max) {
+        let last = new_data.length - 1;
+        graphOpts.scales.y.min =
+          new_data[last].alarm_min - Math.abs(new_data[last].alarm_min === 0 ? 20 : new_data[last].alarm_min * 0.2);
+        graphOpts.scales.y.max =
+          new_data[last].alarm_max + Math.abs(new_data[last].alarm_max === 0 ? 20 : new_data[last].alarm_max * 0.2);
+        graphOpts.scales.y.ticks.includeBounds = false;
+      }
+      if (settings.graph_show_min_max_gauge) {
+        let values = new_data.map((point) => {
+          return point.value;
+        });
+        updateSensor({
+          id: id,
+          measure_min: Math.min(...values),
+          measure_max: Math.max(...values),
+        });
       }
     }
-  }, 60 * 1000);
 
-  return () => {
-    clearInterval(interval);
+    if ($graphs[id].period === 'day') {
+      graphOpts.scales.x.time.unit = 'minute';
+      graphOpts.scales.x.time.displayFormats.minute = 'LT';
+    } else if ($graphs[id].period === 'week') {
+      graphOpts.scales.x.time.unit = 'hour';
+      graphOpts.scales.x.time.displayFormats.hour = 'dd LT';
+    } else if ($graphs[id].period === 'month') {
+      graphOpts.scales.x.time.unit = 'hour';
+      graphOpts.scales.x.time.displayFormats.hour = 'D/M LT';
+    } else if ($graphs[id].period === 'year') {
+      graphOpts.scales.x.time.unit = 'day';
+      graphOpts.scales.x.time.displayFormats.day = 'D/M LT';
+    }
   };
-});
-
-$: {
-  if ($graphs[id].changed) {
-    (async () => {
-      $graphs[id].changed = false;
-      loading = true;
-      let new_data;
-      await fetchGraphData(
-        mode,
-        id,
-        $graphs[id].period,
-        (data) =>
-          (new_data = data.map((point) => {
-            point.timestamp *= 1000;
-            return point;
-          })),
-      );
-      nodata = new_data.length === 0;
 
-      if (!nodata) {
-        updateGraph(new_data, true);
+  // Init graph through store
+  $graphs[id] = {
+    period: 'day',
+    changed: true, // This will trigger the initial loading when the page loads :)
+  };
+
+  // Make a clone of the general graph settings ??? Not really working :(
+  let graphOpts = { ...graphDefaultOpts };
+  graphOpts.scales.y2.display = ['relays'].indexOf(mode) !== -1;
+  graphOpts.scales.y.ticks.stepSize = ['buttons'].indexOf(mode) !== -1 ? 1 : null;
+  graphOpts.scales.y.min = ['buttons', 'relays'].indexOf(mode) !== -1 ? 0 : null;
+  graphOpts.scales.y2.min = ['relays'].indexOf(mode) !== -1 ? 0 : null;
+
+  let graphData;
+  let loading = true;
+  let nodata = false;
+
+  onMount(() => {
+    // Start the graph updater once every 1 minute
+    const interval = setInterval(async () => {
+      if (!loading) {
+        let new_data;
+        await fetchGraphData(
+          mode,
+          id,
+          $graphs[id].period,
+          (data) =>
+            (new_data = data.map((point) => {
+              point.timestamp *= 1000;
+              return point;
+            })),
+        );
+        nodata = new_data.length === 0;
+
+        if (!nodata) {
+          updateGraph(new_data, false);
+        }
       }
+    }, 60 * 1000);
 
-      loading = false;
-    })();
+    return () => {
+      clearInterval(interval);
+    };
+  });
+
+  $: {
+    if ($graphs[id].changed) {
+      (async () => {
+        $graphs[id].changed = false;
+        loading = true;
+        let new_data;
+        await fetchGraphData(
+          mode,
+          id,
+          $graphs[id].period,
+          (data) =>
+            (new_data = data.map((point) => {
+              point.timestamp *= 1000;
+              return point;
+            })),
+        );
+        nodata = new_data.length === 0;
+
+        if (!nodata) {
+          updateGraph(new_data, true);
+        }
+
+        loading = false;
+      })();
+    }
   }
-}
 </script>
 
 {#if loading}
diff --git a/gui/components/common/LoginLink.svelte b/gui/components/common/LoginLink.svelte
index 969a2b96b..4a5a55821 100644
--- a/gui/components/common/LoginLink.svelte
+++ b/gui/components/common/LoginLink.svelte
@@ -1,7 +1,7 @@
 <script>
-import { _ } from 'svelte-i18n';
+  import { _ } from 'svelte-i18n';
 
-import { showLogin } from '../../stores/authentication';
+  import { showLogin } from '../../stores/authentication';
 </script>
 
 <a
diff --git a/gui/components/common/Player.svelte b/gui/components/common/Player.svelte
index 5b4712a70..8cca19e7d 100644
--- a/gui/components/common/Player.svelte
+++ b/gui/components/common/Player.svelte
@@ -1,19 +1,19 @@
 <script context="module">
-let current;
+  let current;
 </script>
 
 <script>
-import { isDarkInterface } from '../../stores/terrariumpi';
+  import { isDarkInterface } from '../../stores/terrariumpi';
 
-export let src;
+  export let src;
 
-let audio;
-let paused = true;
+  let audio;
+  let paused = true;
 
-const stopOthers = () => {
-  if (current && current !== audio) current.pause();
-  current = audio;
-};
+  const stopOthers = () => {
+    if (current && current !== audio) current.pause();
+    current = audio;
+  };
 </script>
 
 <audio bind:this="{audio}" bind:paused on:play="{stopOthers}" controls preload="none" class="d-none" {src}></audio>
diff --git a/gui/components/common/Relay.svelte b/gui/components/common/Relay.svelte
index 97e0fbad6..339fcd247 100644
--- a/gui/components/common/Relay.svelte
+++ b/gui/components/common/Relay.svelte
@@ -1,85 +1,85 @@
 <style>
-.dimmer {
-  position: relative;
-}
+  .dimmer {
+    position: relative;
+  }
 
-.dimmer .dimmer-disabled {
-  position: absolute;
-  z-index: 999;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-}
-input.dial.disabled {
-  cursor: not-allowed;
-}
+  .dimmer .dimmer-disabled {
+    position: absolute;
+    z-index: 999;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+  }
+  input.dial.disabled {
+    cursor: not-allowed;
+  }
 </style>
 
 <script>
-import { onMount, getContext } from 'svelte';
+  import { onMount, getContext } from 'svelte';
 
-import { isAuthenticated } from '../../stores/authentication';
-import { relays } from '../../stores/terrariumpi';
-import { get_template_color } from '../../helpers/color-helpers';
-import { roundToPrecision } from '../../helpers/number-helpers';
+  import { isAuthenticated } from '../../stores/authentication';
+  import { relays } from '../../stores/terrariumpi';
+  import { get_template_color } from '../../helpers/color-helpers';
+  import { roundToPrecision } from '../../helpers/number-helpers';
 
-export let relay;
+  export let relay;
 
-const { toggleAction } = getContext('relayActions');
+  const { toggleAction } = getContext('relayActions');
 
-let loaded = false;
-let dimmer;
-onMount(() => {
-  if (relay.dimmer) {
-    dimmer = jQuery(`input#${relay.id}`);
-    dimmer.knob({
-      format: function (value) {
-        return roundToPrecision(value) + '%';
-      },
-      fgColor: get_template_color('text-success', false, true),
-      bgColor: get_template_color('text-secondary', false, true),
-      release: function (event) {
-        if ($isAuthenticated) {
-          // Bug in knob. When trigger a change, the release is fired.
-          // So we check if the data value 'update' is 1 if the change should be fired to the backend
-          if (1 === dimmer.data('update')) {
-            let old_value = this.val();
-            let value = Math.round(event);
-            if (old_value !== value) {
-              toggleAction(relay, value);
+  let loaded = false;
+  let dimmer;
+  onMount(() => {
+    if (relay.dimmer) {
+      dimmer = jQuery(`input#${relay.id}`);
+      dimmer.knob({
+        format: function (value) {
+          return roundToPrecision(value) + '%';
+        },
+        fgColor: get_template_color('text-success', false, true),
+        bgColor: get_template_color('text-secondary', false, true),
+        release: function (event) {
+          if ($isAuthenticated) {
+            // Bug in knob. When trigger a change, the release is fired.
+            // So we check if the data value 'update' is 1 if the change should be fired to the backend
+            if (1 === dimmer.data('update')) {
+              let old_value = this.val();
+              let value = Math.round(event);
+              if (old_value !== value) {
+                toggleAction(relay, value);
+              }
             }
           }
-        }
-      },
-    });
-    dimmer
-      .data('update', 1)
-      .prop('readonly', true)
-      .siblings('canvas')
-      .addClass(!$isAuthenticated ? ' disabled' : '');
-  }
-  loaded = true;
-});
+        },
+      });
+      dimmer
+        .data('update', 1)
+        .prop('readonly', true)
+        .siblings('canvas')
+        .addClass(!$isAuthenticated ? ' disabled' : '');
+    }
+    loaded = true;
+  });
 
-$: {
-  if (loaded && $relays[relay.id].changed) {
-    if (relay.dimmer) {
-      if (parseInt(dimmer.val()) !== $relays[relay.id].value) {
-        dimmer.data('update', 0);
-        dimmer.val($relays[relay.id].value);
+  $: {
+    if (loaded && $relays[relay.id].changed) {
+      if (relay.dimmer) {
+        if (parseInt(dimmer.val()) !== $relays[relay.id].value) {
+          dimmer.data('update', 0);
+          dimmer.val($relays[relay.id].value);
 
-        setTimeout(() => {
-          dimmer.trigger('change');
-          dimmer.data('update', 1);
-        }, 0.1 * 1000);
+          setTimeout(() => {
+            dimmer.trigger('change');
+            dimmer.data('update', 1);
+          }, 0.1 * 1000);
+        }
       }
+      $relays[relay.id].changed = false;
     }
-    $relays[relay.id].changed = false;
   }
-}
 
-$: jQuery(`div.${relay.id} canvas`).toggleClass('disabled', !$isAuthenticated);
+  $: jQuery(`div.${relay.id} canvas`).toggleClass('disabled', !$isAuthenticated);
 </script>
 
 {#if relay.dimmer}
diff --git a/gui/components/common/UserPanel.svelte b/gui/components/common/UserPanel.svelte
index 47b169bf9..d920005ab 100644
--- a/gui/components/common/UserPanel.svelte
+++ b/gui/components/common/UserPanel.svelte
@@ -1,32 +1,32 @@
 <style>
-div.user-panel {
-  overflow: visible;
-}
-div.image img.img-thumbnail {
-  width: 3rem;
-  max-width: none;
-}
-div.image img.christmashat {
-  position: absolute;
-  z-index: 1039;
-  width: 3rem;
-  left: 1rem;
-  top: -1rem;
-}
+  div.user-panel {
+    overflow: visible;
+  }
+  div.image img.img-thumbnail {
+    width: 3rem;
+    max-width: none;
+  }
+  div.image img.christmashat {
+    position: absolute;
+    z-index: 1039;
+    width: 3rem;
+    left: 1rem;
+    top: -1rem;
+  }
 </style>
 
 <script>
-import { _ } from 'svelte-i18n';
-import { getContext } from 'svelte';
+  import { _ } from 'svelte-i18n';
+  import { getContext } from 'svelte';
 
-import { isAuthenticated, doLogout } from '../../stores/authentication';
-import { default as currentUserStore } from '../../stores/current-user';
-import { getCustomConfig } from '../../config';
-import { ApiUrl } from '../../constants/urls';
-import LoginLink from '../common/LoginLink.svelte';
+  import { isAuthenticated, doLogout } from '../../stores/authentication';
+  import { default as currentUserStore } from '../../stores/current-user';
+  import { getCustomConfig } from '../../config';
+  import { ApiUrl } from '../../constants/urls';
+  import LoginLink from '../common/LoginLink.svelte';
 
-let settings = getCustomConfig();
-const { confirmModal } = getContext('confirm');
+  let settings = getCustomConfig();
+  const { confirmModal } = getContext('confirm');
 </script>
 
 <a href="/" class="brand-link">
diff --git a/gui/components/common/Webcam.svelte b/gui/components/common/Webcam.svelte
index 50e5812d9..393be829e 100644
--- a/gui/components/common/Webcam.svelte
+++ b/gui/components/common/Webcam.svelte
@@ -1,110 +1,110 @@
 <svelte:options accessors />
 
 <style>
-strong {
-  display: block;
-  text-align: center;
-}
+  strong {
+    display: block;
+    text-align: center;
+  }
 </style>
 
 <script>
-import { onMount, onDestroy, getContext } from 'svelte';
-import { date, time, _ } from 'svelte-i18n';
-import { LeafletMap, TileLayer, Marker, Tooltip, DivIcon } from 'svelte-leafletjs';
-import 'leaflet/dist/leaflet.css';
-
-import { Fancybox } from '@fancyapps/ui';
-import '@fancyapps/ui/dist/fancybox/fancybox.css';
-
-import { sensors, updateSensor } from '../../stores/terrariumpi';
-import { fetchSensors, fetchWebcamArchive } from '../../providers/api';
-import { getCustomConfig } from '../../config';
-import { roundToPrecision } from '../../helpers/number-helpers';
-import { ApiUrl } from '../../constants/urls';
-import { fancyAppsLanguage } from '../../constants/ui';
-import { errorNotification } from '../../providers/notification-provider';
-import LoadingModal from '../../modals/LoadingModal.svelte';
-
-import L from 'leaflet';
-import 'leaflet-fullscreen';
-
-import hls from 'hls.js';
-
-export let webcam;
-export let edit = false;
-
-export const getWebcamMap = () => {
-  return map.getMap();
-};
-
-export const getIconOptions = () => {
-  return iconOptions;
-};
-
-const { setLoading } = getContext('loading');
-
-let updateMarkers = () => {};
-let showMarkerModal = () => {};
-
-if (edit) {
-  try {
-    let { showModal, markerLocations } = getContext('webcamMarker');
-    updateMarkers = markerLocations;
-    showMarkerModal = showModal;
-  } catch (e) {
-    console.log('No context available....', e);
+  import { onMount, onDestroy, getContext } from 'svelte';
+  import { date, time, _ } from 'svelte-i18n';
+  import { LeafletMap, TileLayer, Marker, Tooltip, DivIcon } from 'svelte-leafletjs';
+  import 'leaflet/dist/leaflet.css';
+
+  import { Fancybox } from '@fancyapps/ui';
+  import '@fancyapps/ui/dist/fancybox/fancybox.css';
+
+  import { sensors, updateSensor } from '../../stores/terrariumpi';
+  import { fetchSensors, fetchWebcamArchive } from '../../providers/api';
+  import { getCustomConfig } from '../../config';
+  import { roundToPrecision } from '../../helpers/number-helpers';
+  import { ApiUrl } from '../../constants/urls';
+  import { fancyAppsLanguage } from '../../constants/ui';
+  import { errorNotification } from '../../providers/notification-provider';
+  import LoadingModal from '../../modals/LoadingModal.svelte';
+
+  import L from 'leaflet';
+  import 'leaflet-fullscreen';
+
+  import hls from 'hls.js';
+
+  export let webcam;
+  export let edit = false;
+
+  export const getWebcamMap = () => {
+    return map.getMap();
+  };
+
+  export const getIconOptions = () => {
+    return iconOptions;
+  };
+
+  const { setLoading } = getContext('loading');
+
+  let updateMarkers = () => {};
+  let showMarkerModal = () => {};
+
+  if (edit) {
+    try {
+      let { showModal, markerLocations } = getContext('webcamMarker');
+      updateMarkers = markerLocations;
+      showMarkerModal = showModal;
+    } catch (e) {
+      console.log('No context available....', e);
+    }
   }
-}
-
-const settings = getCustomConfig();
-const max_zoom = Math.log2(Math.pow(2, Math.ceil(Math.log2(Math.max(webcam.width, webcam.height)))) / 256);
-
-const mapOptions = {
-  center: [0, 0],
-  zoom: 1,
-  fullscreenControl: true,
-};
-
-export const iconOptions = {
-  iconUrl: 'img/marker-icon-2x.png',
-  shadowUrl: 'img/marker-shadow.png',
-  iconSize: [25, 41],
-  shadowSize: [45, 41],
-};
-
-export const toolTipOptions = {
-  permanent: true,
-  direction: 'auto',
-  opacity: 0.5,
-};
-
-export const popUpOptions = {
-  autoClose: false,
-  closeOnEscapeKey: false,
-  closeOnClick: false,
-  closeButton: false,
-};
-
-export const markerOptions = {
-  draggable: edit,
-};
-
-const tileUrl = `${ApiUrl}/webcam/{id}/tiles/tile_{z}_{x}_{y}.jpg?_{time}`;
-
-const tileLayerOptions = {
-  time: function () {
-    return new Date().valueOf();
-  },
-  id: webcam.id,
-  noWrap: true,
-  continuousWorld: false,
-  minZoom: 0,
-  maxZoom: max_zoom + 1,
-  maxNativeZoom: max_zoom,
-};
-
-const generatePulsatingMarker = (radius, color) => {
-  const cssStyle = `
+
+  const settings = getCustomConfig();
+  const max_zoom = Math.log2(Math.pow(2, Math.ceil(Math.log2(Math.max(webcam.width, webcam.height)))) / 256);
+
+  const mapOptions = {
+    center: [0, 0],
+    zoom: 1,
+    fullscreenControl: true,
+  };
+
+  export const iconOptions = {
+    iconUrl: 'img/marker-icon-2x.png',
+    shadowUrl: 'img/marker-shadow.png',
+    iconSize: [25, 41],
+    shadowSize: [45, 41],
+  };
+
+  export const toolTipOptions = {
+    permanent: true,
+    direction: 'auto',
+    opacity: 0.5,
+  };
+
+  export const popUpOptions = {
+    autoClose: false,
+    closeOnEscapeKey: false,
+    closeOnClick: false,
+    closeButton: false,
+  };
+
+  export const markerOptions = {
+    draggable: edit,
+  };
+
+  const tileUrl = `${ApiUrl}/webcam/{id}/tiles/tile_{z}_{x}_{y}.jpg?_{time}`;
+
+  const tileLayerOptions = {
+    time: function () {
+      return new Date().valueOf();
+    },
+    id: webcam.id,
+    noWrap: true,
+    continuousWorld: false,
+    minZoom: 0,
+    maxZoom: max_zoom + 1,
+    maxNativeZoom: max_zoom,
+  };
+
+  const generatePulsatingMarker = (radius, color) => {
+    const cssStyle = `
       width: ${radius}px;
       height: ${radius}px;
       margin-left: -${radius / 4}px;
@@ -114,264 +114,265 @@ const generatePulsatingMarker = (radius, color) => {
       color: ${color};
       box-shadow: 0 0 0 ${color};
     `;
-  return L.divIcon({
-    html: `<span style="${cssStyle}" class="pulse"/>`,
-    // empty class name to prevent the default leaflet-div-icon to apply
-    className: '',
-  });
-};
-
-const pulsateMarkers = () => {
-  let pulse_markers = document.querySelectorAll('.pulse');
-  pulse_markers.forEach((item) => {
-    item.classList.remove('pulse');
-  });
+    return L.divIcon({
+      html: `<span style="${cssStyle}" class="pulse"/>`,
+      // empty class name to prevent the default leaflet-div-icon to apply
+      className: '',
+    });
+  };
 
-  setTimeout(() => {
+  const pulsateMarkers = () => {
+    let pulse_markers = document.querySelectorAll('.pulse');
     pulse_markers.forEach((item) => {
-      item.classList.add('pulse');
+      item.classList.remove('pulse');
     });
-  }, 10);
-};
-
-const pulsatingIcon = generatePulsatingMarker(25, 'red');
-
-let tileLayer;
-let map;
-let videoplayer;
-let hlsplayer;
-
-const ExtraWebcamControls = L.Control.extend({
-  options: {
-    position: 'topleft',
-    archive: true,
-  },
-  initialize: function (options) {
-    // constructor
-    L.Util.setOptions(this, options);
-  },
-  onAdd: function (map) {
-    const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
-
-    const raw_image = L.DomUtil.create('a', 'leaflet-bar-part', container);
-    raw_image.href = `${ApiUrl}/webcam/${webcam.id}/${webcam.id}_raw.jpg`;
-    raw_image.title = $_('webcams.controls.save_raw_image', { default: 'Save RAW image' });
-    raw_image.target = '_blank';
-    L.DomUtil.create('i', 'fas fa-camera', raw_image);
-
-    if (!edit && webcam.archive.state !== 'disabled') {
-      const archive_link = L.DomUtil.create('a', 'leaflet-bar-part', container);
-      archive_link.href = '#';
-      archive_link.title = $_('webcams.controls.archive', { default: 'Archive' });
-      L.DomEvent.on(
-        archive_link,
-        'click',
-        (e) => {
-          e.stopPropagation();
-          e.preventDefault();
-          webcamArchive();
-        },
-        this,
-      );
-      L.DomUtil.create('i', 'fas fa-archive', archive_link);
-    }
 
-    if (webcam.markers.length > 0) {
-      const markers_link = L.DomUtil.create('a', 'leaflet-bar-part', container);
-      markers_link.href = '#';
-      markers_link.title = $_('webcams.controls.show_markers', { default: 'Show markers' });
-      L.DomEvent.on(
-        markers_link,
-        'click',
-        (e) => {
-          e.stopPropagation();
-          e.preventDefault();
-          map._panes.shadowPane.classList.toggle('d-none');
-          map._panes.markerPane.classList.toggle('d-none');
-          map._panes.tooltipPane.classList.toggle('d-none');
-        },
-        this,
-      );
-      L.DomUtil.create('i', 'fas fa-info', markers_link);
-    }
+    setTimeout(() => {
+      pulse_markers.forEach((item) => {
+        item.classList.add('pulse');
+      });
+    }, 10);
+  };
 
-    if (edit) {
-      const marker_drop = L.DomUtil.create('a', 'leaflet-bar-part', container);
-      marker_drop.href = '#';
-      marker_drop.title = $_('webcams.controls.new_marker', { default: 'Add marker' });
-      L.DomEvent.on(
-        marker_drop,
-        'click',
-        (e) => {
-          e.stopPropagation();
-          e.preventDefault();
-          showMarkerModal();
-        },
-        this,
-      );
-      L.DomUtil.create('i', 'fas fa-map-marker', marker_drop);
+  const pulsatingIcon = generatePulsatingMarker(25, 'red');
+
+  let tileLayer;
+  let map;
+  let videoplayer;
+  let hlsplayer;
+
+  const ExtraWebcamControls = L.Control.extend({
+    options: {
+      position: 'topleft',
+      archive: true,
+    },
+    initialize: function (options) {
+      // constructor
+      L.Util.setOptions(this, options);
+    },
+    onAdd: function (map) {
+      const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
+
+      const raw_image = L.DomUtil.create('a', 'leaflet-bar-part', container);
+      raw_image.href = `${ApiUrl}/webcam/${webcam.id}/${webcam.id}_raw.jpg`;
+      raw_image.title = $_('webcams.controls.save_raw_image', { default: 'Save RAW image' });
+      raw_image.target = '_blank';
+      L.DomUtil.create('i', 'fas fa-camera', raw_image);
+
+      if (!edit && webcam.archive.state !== 'disabled') {
+        const archive_link = L.DomUtil.create('a', 'leaflet-bar-part', container);
+        archive_link.href = '#';
+        archive_link.title = $_('webcams.controls.archive', { default: 'Archive' });
+        L.DomEvent.on(
+          archive_link,
+          'click',
+          (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            webcamArchive();
+          },
+          this,
+        );
+        L.DomUtil.create('i', 'fas fa-archive', archive_link);
+      }
+
+      if (webcam.markers.length > 0) {
+        const markers_link = L.DomUtil.create('a', 'leaflet-bar-part', container);
+        markers_link.href = '#';
+        markers_link.title = $_('webcams.controls.show_markers', { default: 'Show markers' });
+        L.DomEvent.on(
+          markers_link,
+          'click',
+          (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            map._panes.shadowPane.classList.toggle('d-none');
+            map._panes.markerPane.classList.toggle('d-none');
+            map._panes.tooltipPane.classList.toggle('d-none');
+          },
+          this,
+        );
+        L.DomUtil.create('i', 'fas fa-info', markers_link);
+      }
+
+      if (edit) {
+        const marker_drop = L.DomUtil.create('a', 'leaflet-bar-part', container);
+        marker_drop.href = '#';
+        marker_drop.title = $_('webcams.controls.new_marker', { default: 'Add marker' });
+        L.DomEvent.on(
+          marker_drop,
+          'click',
+          (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            showMarkerModal();
+          },
+          this,
+        );
+        L.DomUtil.create('i', 'fas fa-map-marker', marker_drop);
+      }
+
+      if (!edit && webcam.is_live) {
+        const toggle_audio = L.DomUtil.create('a', 'leaflet-bar-part', container);
+        toggle_audio.href = '#';
+        toggle_audio.title = $_('webcams.controls.toggle_volume', { default: 'Toggle volume' });
+        L.DomEvent.on(
+          toggle_audio,
+          'click',
+          (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            if (videoplayer) {
+              videoplayer.muted = !videoplayer.muted;
+              e.target.classList.remove('fa-volume-up');
+              e.target.classList.remove('fa-volume-mute');
+              e.target.classList.add(videoplayer.muted ? 'fa-volume-up' : 'fa-volume-mute');
+            }
+          },
+          this,
+        );
+        L.DomUtil.create('i', 'fas fa-volume-up', toggle_audio);
+      }
+      return container;
+    },
+  });
+
+  if (webcam.markers && webcam.markers.length > 0) {
+    let sensors_loaded = true;
+    for (let x = 0; x < webcam.markers.length; x++) {
+      sensors_loaded =
+        sensors_loaded &&
+        webcam.markers[x].sensors.some((sensor_id) => $sensors[sensor_id] && $sensors[sensor_id].type);
+      if (!sensors_loaded) {
+        (async () => {
+          fetchSensors(false, (data) => {
+            data.forEach((sensor) => {
+              updateSensor(sensor);
+            });
+          });
+        })();
+        break;
+      }
     }
+  }
 
-    if (!edit && webcam.is_live) {
-      const toggle_audio = L.DomUtil.create('a', 'leaflet-bar-part', container);
-      toggle_audio.href = '#';
-      toggle_audio.title = $_('webcams.controls.toggle_volume', { default: 'Toggle volume' });
-      L.DomEvent.on(
-        toggle_audio,
-        'click',
-        (e) => {
-          e.stopPropagation();
-          e.preventDefault();
-          if (videoplayer) {
-            videoplayer.muted = !videoplayer.muted;
-            e.target.classList.remove('fa-volume-up');
-            e.target.classList.remove('fa-volume-mute');
-            e.target.classList.add(videoplayer.muted ? 'fa-volume-up' : 'fa-volume-mute');
+  let webcamArchiveLoadingModal = null;
+  const webcamArchive = () => {
+    let image_archive = [];
+    let counter = 0;
+
+    async function loadImages(archive_date) {
+      archive_date = archive_date || new Date();
+
+      fetchWebcamArchive(
+        webcam.id,
+        archive_date.getFullYear(),
+        (archive_date.getMonth() < 9 ? '0' : '') + (archive_date.getMonth() + 1),
+        (archive_date.getDate() < 10 ? '0' : '') + archive_date.getDate(),
+
+        (data) => {
+          image_archive = [
+            ...image_archive,
+            ...data.archive_images.map((image) => {
+              let image_date = new Date(image.slice(-14, -4) * 1000);
+              return {
+                src: `${ApiUrl}/${image.slice(1)}`,
+                thumb: `${ApiUrl}/${image.slice(1)}`,
+                type: 'image',
+                caption: $date(image_date, { format: 'full' }) + ' ' + $time(image_date, { format: 'medium' }),
+              };
+            }),
+          ];
+
+          webcamArchiveLoadingModal.setMessage(
+            $_('webcams.archive.modal.loading.status', {
+              default: 'Currently loaded {total} images ... ({percentage}%)',
+              values: { total: image_archive.length, percentage: (counter / 10) * 100 },
+            }),
+          );
+
+          if (counter++ < 10) {
+            loadImages(new Date(archive_date.getTime() - 24 * 60 * 60 * 1000));
+          } else if (image_archive.length > 0) {
+            new Fancybox(image_archive, {
+              l10n: fancyAppsLanguage(),
+            });
+            webcamArchiveLoadingModal.hide();
+          } else {
+            errorNotification($_('webcams.archive.no_images', { default: 'No archive images available' }));
           }
         },
-        this,
       );
-      L.DomUtil.create('i', 'fas fa-volume-up', toggle_audio);
-    }
-    return container;
-  },
-});
-
-if (webcam.markers && webcam.markers.length > 0) {
-  let sensors_loaded = true;
-  for (let x = 0; x < webcam.markers.length; x++) {
-    sensors_loaded =
-      sensors_loaded && webcam.markers[x].sensors.some((sensor_id) => $sensors[sensor_id] && $sensors[sensor_id].type);
-    if (!sensors_loaded) {
-      (async () => {
-        fetchSensors(false, (data) => {
-          data.forEach((sensor) => {
-            updateSensor(sensor);
-          });
-        });
-      })();
-      break;
     }
-  }
-}
-
-let webcamArchiveLoadingModal = null;
-const webcamArchive = () => {
-  let image_archive = [];
-  let counter = 0;
-
-  async function loadImages(archive_date) {
-    archive_date = archive_date || new Date();
-
-    fetchWebcamArchive(
-      webcam.id,
-      archive_date.getFullYear(),
-      (archive_date.getMonth() < 9 ? '0' : '') + (archive_date.getMonth() + 1),
-      (archive_date.getDate() < 10 ? '0' : '') + archive_date.getDate(),
-
-      (data) => {
-        image_archive = [
-          ...image_archive,
-          ...data.archive_images.map((image) => {
-            let image_date = new Date(image.slice(-14, -4) * 1000);
-            return {
-              src: `${ApiUrl}/${image.slice(1)}`,
-              thumb: `${ApiUrl}/${image.slice(1)}`,
-              type: 'image',
-              caption: $date(image_date, { format: 'full' }) + ' ' + $time(image_date, { format: 'medium' }),
-            };
-          }),
-        ];
-
-        webcamArchiveLoadingModal.setMessage(
-          $_('webcams.archive.modal.loading.status', {
-            default: 'Currently loaded {total} images ... ({percentage}%)',
-            values: { total: image_archive.length, percentage: (counter / 10) * 100 },
-          }),
-        );
 
-        if (counter++ < 10) {
-          loadImages(new Date(archive_date.getTime() - 24 * 60 * 60 * 1000));
-        } else if (image_archive.length > 0) {
-          new Fancybox(image_archive, {
-            l10n: fancyAppsLanguage(),
-          });
-          webcamArchiveLoadingModal.hide();
-        } else {
-          errorNotification($_('webcams.archive.no_images', { default: 'No archive images available' }));
-        }
-      },
+    // Open loading modal
+    webcamArchiveLoadingModal.setMessage(
+      $_('webcams.archive.modal.loading.title', { default: 'Starting loading webcam archive images ...' }),
     );
-  }
-
-  // Open loading modal
-  webcamArchiveLoadingModal.setMessage(
-    $_('webcams.archive.modal.loading.title', { default: 'Starting loading webcam archive images ...' }),
-  );
-  webcamArchiveLoadingModal.show();
-  loadImages();
-};
-
-onMount(() => {
-  map.getMap().addControl(new ExtraWebcamControls());
-
-  if (webcam.is_live) {
-    let hls_url =
-      webcam.hardware.indexOf('remote') !== -1 ? webcam.address : `${ApiUrl}/webcam/${webcam.id}/stream.m3u8`;
-    L.videoOverlay(
-      hls_url,
-      L.latLngBounds([
-        [150, -180],
-        [-150, 180],
-      ]),
-      {
-        autoplay: true,
-        muted: true,
-        keepAspectRatio: true,
-      },
-    )
-      .on('add', (event) => {
-        videoplayer = event.sourceTarget._image;
-        if (!videoplayer.canPlayType('application/vnd.apple.mpegurl')) {
-          hlsplayer = new hls({ debug: false });
-          hlsplayer.loadSource(hls_url);
-          hlsplayer.attachMedia(videoplayer);
-          hlsplayer.on(hls.Events.MANIFEST_PARSED, function () {
-            videoplayer.play();
-          });
-        }
-      })
-      .addTo(map.getMap());
-  }
-
-  // Fix for class names starting with a number (based on UUID) https://stackoverflow.com/a/39004242
-  const lastUpdate = document.querySelector(`div.card.${webcam.id} small span`.replace(/\.(\d)/gm, `\.\\3$1 `));
-  lastUpdate.innerText = $date(new Date(), { format: 'long' }) + ' ' + $time(new Date(), { format: 'short' });
+    webcamArchiveLoadingModal.show();
+    loadImages();
+  };
 
-  let interval = null;
-  interval = setInterval(() => {
-    if (!webcam.is_live) {
-      tileLayer.getTileLayer().redraw();
-      pulsateMarkers();
+  onMount(() => {
+    map.getMap().addControl(new ExtraWebcamControls());
+
+    if (webcam.is_live) {
+      let hls_url =
+        webcam.hardware.indexOf('remote') !== -1 ? webcam.address : `${ApiUrl}/webcam/${webcam.id}/stream.m3u8`;
+      L.videoOverlay(
+        hls_url,
+        L.latLngBounds([
+          [150, -180],
+          [-150, 180],
+        ]),
+        {
+          autoplay: true,
+          muted: true,
+          keepAspectRatio: true,
+        },
+      )
+        .on('add', (event) => {
+          videoplayer = event.sourceTarget._image;
+          if (!videoplayer.canPlayType('application/vnd.apple.mpegurl')) {
+            hlsplayer = new hls({ debug: false });
+            hlsplayer.loadSource(hls_url);
+            hlsplayer.attachMedia(videoplayer);
+            hlsplayer.on(hls.Events.MANIFEST_PARSED, function () {
+              videoplayer.play();
+            });
+          }
+        })
+        .addTo(map.getMap());
     }
+
+    // Fix for class names starting with a number (based on UUID) https://stackoverflow.com/a/39004242
+    const lastUpdate = document.querySelector(`div.card.${webcam.id} small span`.replace(/\.(\d)/gm, `\.\\3$1 `));
     lastUpdate.innerText = $date(new Date(), { format: 'long' }) + ' ' + $time(new Date(), { format: 'short' });
-  }, 30 * 1000);
 
-  setLoading(false);
-  return () => {
-    clearInterval(interval);
-  };
-});
-
-onDestroy(() => {
-  if (videoplayer) {
-    videoplayer.pause();
-    videoplayer.src = '';
-    if (hlsplayer) {
-      hlsplayer.destroy();
+    let interval = null;
+    interval = setInterval(() => {
+      if (!webcam.is_live) {
+        tileLayer.getTileLayer().redraw();
+        pulsateMarkers();
+      }
+      lastUpdate.innerText = $date(new Date(), { format: 'long' }) + ' ' + $time(new Date(), { format: 'short' });
+    }, 30 * 1000);
+
+    setLoading(false);
+    return () => {
+      clearInterval(interval);
+    };
+  });
+
+  onDestroy(() => {
+    if (videoplayer) {
+      videoplayer.pause();
+      videoplayer.src = '';
+      if (hlsplayer) {
+        hlsplayer.destroy();
+      }
     }
-  }
-});
+  });
 </script>
 
 <LeafletMap bind:this="{map}" options="{mapOptions}">
diff --git a/gui/components/enclosure/Enclosure.svelte b/gui/components/enclosure/Enclosure.svelte
index a6d584220..99c7766a3 100644
--- a/gui/components/enclosure/Enclosure.svelte
+++ b/gui/components/enclosure/Enclosure.svelte
@@ -1,23 +1,23 @@
 <style>
-table.table-sm td:last-child {
-  width: 1.5rem;
-  position: absolute;
-  right: 0px;
-  margin-right: 1.25rem;
-}
+  table.table-sm td:last-child {
+    width: 1.5rem;
+    position: absolute;
+    right: 0px;
+    margin-right: 1.25rem;
+  }
 </style>
 
 <script>
-import { capitalizeFirstLetter } from '../../helpers/string-helpers';
-import { template_sensor_type_color, template_sensor_type_icon } from '../../helpers/icon-helpers';
-import { roundToPrecision } from '../../helpers/number-helpers';
-import { _, time } from 'svelte-i18n';
-import { dayjs } from 'svelte-time';
-import { getCustomConfig } from '../../config';
-import { ApiUrl } from '../../constants/urls';
+  import { capitalizeFirstLetter } from '../../helpers/string-helpers';
+  import { template_sensor_type_color, template_sensor_type_icon } from '../../helpers/icon-helpers';
+  import { roundToPrecision } from '../../helpers/number-helpers';
+  import { _, time } from 'svelte-i18n';
+  import { dayjs } from 'svelte-time';
+  import { getCustomConfig } from '../../config';
+  import { ApiUrl } from '../../constants/urls';
 
-let settings = getCustomConfig();
-export let enclosure = { areas: [] };
+  let settings = getCustomConfig();
+  export let enclosure = { areas: [] };
 </script>
 
 <div style="background : url({ApiUrl}/{enclosure.image}); background-size : cover">
diff --git a/gui/components/enclosure/EnclosureDoorIcon.svelte b/gui/components/enclosure/EnclosureDoorIcon.svelte
index a0488061e..4351fd94f 100644
--- a/gui/components/enclosure/EnclosureDoorIcon.svelte
+++ b/gui/components/enclosure/EnclosureDoorIcon.svelte
@@ -1,6 +1,6 @@
 <script>
-import { doors } from '../../stores/terrariumpi';
-export let enclosure_id;
+  import { doors } from '../../stores/terrariumpi';
+  export let enclosure_id;
 </script>
 
 {#if !enclosure_id || !$doors.enclosures[enclosure_id] || ($doors.enclosures[enclosure_id] && $doors.enclosures[enclosure_id].closed)}
diff --git a/gui/components/form/Field.svelte b/gui/components/form/Field.svelte
index 653934777..a40401fec 100644
--- a/gui/components/form/Field.svelte
+++ b/gui/components/form/Field.svelte
@@ -1,26 +1,26 @@
 <script>
-import FormGroup from './FormGroup.svelte';
-import { getRandomString } from '../../helpers/string-helpers';
+  import FormGroup from './FormGroup.svelte';
+  import { getRandomString } from '../../helpers/string-helpers';
 
-export let type;
+  export let type;
 
-export let name;
-export let id = name + getRandomString(6); // Create a unique ID
-export let label = null;
-export let placeholder = label;
+  export let name;
+  export let id = name + getRandomString(6); // Create a unique ID
+  export let label = null;
+  export let placeholder = label;
 
-export let value = null;
-export let min = null;
-export let max = null;
-export let step = null;
+  export let value = null;
+  export let min = null;
+  export let max = null;
+  export let step = null;
 
-export let required = null;
-export let readonly = false;
-export let help = null;
-export let invalid = null;
-export let disabled = false;
+  export let required = null;
+  export let readonly = false;
+  export let help = null;
+  export let invalid = null;
+  export let disabled = false;
 
-export let horizontal = null;
+  export let horizontal = null;
 </script>
 
 <FormGroup {id} {label} {required} {help} {invalid} {horizontal} class="{$$props.class || ''}">
diff --git a/gui/components/form/FileUpload.svelte b/gui/components/form/FileUpload.svelte
index 24cb8313e..5de3cd4d2 100644
--- a/gui/components/form/FileUpload.svelte
+++ b/gui/components/form/FileUpload.svelte
@@ -1,52 +1,52 @@
 <style>
-.input-group-text {
-  padding: 0px;
-}
+  .input-group-text {
+    padding: 0px;
+  }
 
-:global(.dark-mode .input-group-text i.fas) {
-  color: white;
-}
+  :global(.dark-mode .input-group-text i.fas) {
+    color: white;
+  }
 </style>
 
 <script>
-import bsCustomFileInput from 'bs-custom-file-input';
-import { onMount } from 'svelte';
-import { _ } from 'svelte-i18n';
+  import bsCustomFileInput from 'bs-custom-file-input';
+  import { onMount } from 'svelte';
+  import { _ } from 'svelte-i18n';
 
-import FormGroup from './FormGroup.svelte';
-import { getRandomString } from '../../helpers/string-helpers';
+  import FormGroup from './FormGroup.svelte';
+  import { getRandomString } from '../../helpers/string-helpers';
 
-export let name;
-export let label;
+  export let name;
+  export let label;
 
-export let id = name + getRandomString(6); // Create a unique ID when not entered manual
-export let placeholder = null;
-export let value;
+  export let id = name + getRandomString(6); // Create a unique ID when not entered manual
+  export let placeholder = null;
+  export let value;
 
-export let required = null;
-export let readonly = null;
+  export let required = null;
+  export let readonly = null;
 
-export let help = null;
-export let invalid = null;
-export let accept = null;
-export let horizontal = null;
+  export let help = null;
+  export let invalid = null;
+  export let accept = null;
+  export let horizontal = null;
 
-let filename_placeholder;
-let deleteFile = false;
+  let filename_placeholder;
+  let deleteFile = false;
 
-value = value || placeholder;
-onMount(() => {
-  bsCustomFileInput.init();
-  return () => {
-    bsCustomFileInput.destroy();
-  };
-});
+  value = value || placeholder;
+  onMount(() => {
+    bsCustomFileInput.init();
+    return () => {
+      bsCustomFileInput.destroy();
+    };
+  });
 
-$: {
-  if (filename_placeholder && value) {
-    filename_placeholder.textContent = value;
+  $: {
+    if (filename_placeholder && value) {
+      filename_placeholder.textContent = value;
+    }
   }
-}
 </script>
 
 <FormGroup {id} {label} {required} {help} {invalid} {horizontal} class="{$$props.class || ''}">
diff --git a/gui/components/form/FormGroup.svelte b/gui/components/form/FormGroup.svelte
index a0c5ccb33..641acb317 100644
--- a/gui/components/form/FormGroup.svelte
+++ b/gui/components/form/FormGroup.svelte
@@ -1,14 +1,14 @@
 <script>
-import Label from './Label.svelte';
+  import Label from './Label.svelte';
 
-export let id;
-export let label = null;
-export let required = null;
+  export let id;
+  export let label = null;
+  export let required = null;
 
-export let help = null;
-export let invalid = null;
+  export let help = null;
+  export let invalid = null;
 
-export let horizontal = false;
+  export let horizontal = false;
 </script>
 
 <div class="form-group row">
diff --git a/gui/components/form/Helper.svelte b/gui/components/form/Helper.svelte
index 7810929ee..b3df987de 100644
--- a/gui/components/form/Helper.svelte
+++ b/gui/components/form/Helper.svelte
@@ -1,24 +1,24 @@
 <style>
-.text-muted {
-  font-size: 50% !important;
-}
+  .text-muted {
+    font-size: 50% !important;
+  }
 </style>
 
 <script>
-import { _ } from 'svelte-i18n';
+  import { _ } from 'svelte-i18n';
 
-export let showMessage = false;
-export let button = true;
-export let moreInfo = null;
+  export let showMessage = false;
+  export let button = true;
+  export let moreInfo = null;
 
-let buttonBold = false;
+  let buttonBold = false;
 
-const toggleHelp = () => {
-  for (let helptext of document.querySelectorAll('form small.text-muted')) {
-    helptext.classList.toggle('d-none');
-  }
-  buttonBold = !buttonBold;
-};
+  const toggleHelp = () => {
+    for (let helptext of document.querySelectorAll('form small.text-muted')) {
+      helptext.classList.toggle('d-none');
+    }
+    buttonBold = !buttonBold;
+  };
 </script>
 
 {#if button}
diff --git a/gui/components/form/Label.svelte b/gui/components/form/Label.svelte
index fe6d7c9ad..94f9d8fce 100644
--- a/gui/components/form/Label.svelte
+++ b/gui/components/form/Label.svelte
@@ -1,7 +1,7 @@
 <script>
-export let id;
-export let label = null;
-export let required = false;
+  export let id;
+  export let label = null;
+  export let required = false;
 </script>
 
 <label for="{id}" class="col col-form-label text-truncate"
diff --git a/gui/components/form/Select.svelte b/gui/components/form/Select.svelte
index d83643f20..2ff4d3252 100644
--- a/gui/components/form/Select.svelte
+++ b/gui/components/form/Select.svelte
@@ -1,170 +1,170 @@
 <script>
-import { onMount, createEventDispatcher } from 'svelte';
+  import { onMount, createEventDispatcher } from 'svelte';
 
-import { template_sensor_type_icon } from '../../helpers/icon-helpers';
-import { getRandomString } from '../../helpers/string-helpers';
-import FormGroup from './FormGroup.svelte';
-import { arrIdentical } from '../../helpers/number-helpers';
+  import { template_sensor_type_icon } from '../../helpers/icon-helpers';
+  import { getRandomString } from '../../helpers/string-helpers';
+  import FormGroup from './FormGroup.svelte';
+  import { arrIdentical } from '../../helpers/number-helpers';
 
-export let name;
-export let id = name + getRandomString(6); // Create a unique ID
-export let label = null;
-export let placeholder = label;
+  export let name;
+  export let id = name + getRandomString(6); // Create a unique ID
+  export let label = null;
+  export let placeholder = label;
 
-export let value = null;
-export let options = [];
+  export let value = null;
+  export let options = [];
 
-export let multiple = false;
-export let required = null;
-export let readonly = false;
-export let help = null;
-export let invalid = null;
+  export let multiple = false;
+  export let required = null;
+  export let readonly = false;
+  export let help = null;
+  export let invalid = null;
 
-export let horizontal = null;
-export let sort = false;
-export let disabled = null;
+  export let horizontal = null;
+  export let sort = false;
+  export let disabled = null;
 
-if (multiple) name += '[]';
+  if (multiple) name += '[]';
 
-const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-const changeAction = (data) => {
-  dispatch('change', data);
-};
+  const changeAction = (data) => {
+    dispatch('change', data);
+  };
 
-const iconFormat = (state) => {
-  if (!state.id || state.id === '') {
-    return state.text;
-  }
-
-  let icon = false;
-  if ((icon = template_sensor_type_icon(state.id))) {
-    let span = document.createElement('span');
-    span.innerHTML = '<i class="mr-1 fa-fw ' + icon + '"></i> ' + state.text;
-    return span;
-  }
-
-  return state.text;
-};
-
-let old_value;
-const updateValue = (new_value, force) => {
-  force = force || false;
-  try {
-    let update = false;
-
-    if (multiple) {
-      update = !arrIdentical(old_value, new_value);
-    } else {
-      update = old_value !== new_value;
+  const iconFormat = (state) => {
+    if (!state.id || state.id === '') {
+      return state.text;
     }
 
-    if (select && (force || update)) {
-      old_value = value;
-      // Again some strange race condition with select2
-      setTimeout(() => {
-        if (select) {
-          select.val(value).trigger('change.select2');
-        }
-      }, 10);
-    }
-  } catch {}
-};
-
-let old_options = [];
-const updateOptions = (options, force) => {
-  if (
-    options &&
-    (!arrIdentical(
-      options.map((item) => {
-        return item.value + item.disabled;
-      }),
-      old_options.map((item) => {
-        return item.value + item.disabled;
-      }),
-    ) ||
-      force)
-  ) {
-    let selected = select?.val() ?? [];
-    if (sort) {
-      options.sort((a, b) => {
-        a = a.text.toLowerCase();
-        b = b.text.toLowerCase();
-        if (a < b) return -1;
-        else if (a > b) return 1;
-      });
+    let icon = false;
+    if ((icon = template_sensor_type_icon(state.id))) {
+      let span = document.createElement('span');
+      span.innerHTML = '<i class="mr-1 fa-fw ' + icon + '"></i> ' + state.text;
+      return span;
     }
 
-    if (select) {
-      select.find('option').remove();
-      if (!multiple) {
-        select.append(new Option('', '', false, false));
+    return state.text;
+  };
+
+  let old_value;
+  const updateValue = (new_value, force) => {
+    force = force || false;
+    try {
+      let update = false;
+
+      if (multiple) {
+        update = !arrIdentical(old_value, new_value);
+      } else {
+        update = old_value !== new_value;
       }
 
-      options.map((item) => {
-        let option = new Option(item.text, item.value, false, selected.indexOf(item.value) !== -1);
-        option.disabled = item.disabled ?? false;
-        select.append(option);
-      });
+      if (select && (force || update)) {
+        old_value = value;
+        // Again some strange race condition with select2
+        setTimeout(() => {
+          if (select) {
+            select.val(value).trigger('change.select2');
+          }
+        }, 10);
+      }
+    } catch {}
+  };
 
-      old_options = options;
-    }
-  }
-};
-
-let select;
-let old_data;
-onMount(() => {
-  select = jQuery(select);
-  select
-    .select2({
-      placeholder: `${placeholder}`,
-      dropdownParent: select.parents('form'),
-      minimumResultsForSearch: 10,
-      templateResult: iconFormat,
-      templateSelection: iconFormat,
-    })
-    .on('change.select2', (event) => {
-      let data = select.select2('data').map((item) => {
-        return item.id;
-      });
-      if (!multiple) {
-        data = data.length === 0 ? null : data[0];
+  let old_options = [];
+  const updateOptions = (options, force) => {
+    if (
+      options &&
+      (!arrIdentical(
+        options.map((item) => {
+          return item.value + item.disabled;
+        }),
+        old_options.map((item) => {
+          return item.value + item.disabled;
+        }),
+      ) ||
+        force)
+    ) {
+      let selected = select?.val() ?? [];
+      if (sort) {
+        options.sort((a, b) => {
+          a = a.text.toLowerCase();
+          b = b.text.toLowerCase();
+          if (a < b) return -1;
+          else if (a > b) return 1;
+        });
       }
 
-      let update = multiple ? !arrIdentical(old_data, data) : old_data !== data;
-      if (update) {
-        changeAction(data);
+      if (select) {
+        select.find('option').remove();
+        if (!multiple) {
+          select.append(new Option('', '', false, false));
+        }
+
+        options.map((item) => {
+          let option = new Option(item.text, item.value, false, selected.indexOf(item.value) !== -1);
+          option.disabled = item.disabled ?? false;
+          select.append(option);
+        });
+
+        old_options = options;
       }
-    });
-
-  if (options) {
-    // This is needed if the select is used/generated in a if statement
-    updateOptions(options, true);
-  }
-
-  if (value) {
-    // This is needed if the select is used/generated in a if statement
-    updateValue(value, true);
-  }
-
-  // Destroy select2 when unmounted
-  return () => {
-    if (select) {
-      select.select2('destroy');
-      select.off('change.select2');
     }
   };
-});
 
-// Listen to value updates
-$: updateValue(value);
+  let select;
+  let old_data;
+  onMount(() => {
+    select = jQuery(select);
+    select
+      .select2({
+        placeholder: `${placeholder}`,
+        dropdownParent: select.parents('form'),
+        minimumResultsForSearch: 10,
+        templateResult: iconFormat,
+        templateSelection: iconFormat,
+      })
+      .on('change.select2', (event) => {
+        let data = select.select2('data').map((item) => {
+          return item.id;
+        });
+        if (!multiple) {
+          data = data.length === 0 ? null : data[0];
+        }
+
+        let update = multiple ? !arrIdentical(old_data, data) : old_data !== data;
+        if (update) {
+          changeAction(data);
+        }
+      });
+
+    if (options) {
+      // This is needed if the select is used/generated in a if statement
+      updateOptions(options, true);
+    }
+
+    if (value) {
+      // This is needed if the select is used/generated in a if statement
+      updateValue(value, true);
+    }
+
+    // Destroy select2 when unmounted
+    return () => {
+      if (select) {
+        select.select2('destroy');
+        select.off('change.select2');
+      }
+    };
+  });
+
+  // Listen to value updates
+  $: updateValue(value);
 
-// Listen to options change
-$: updateOptions(options);
+  // Listen to options change
+  $: updateOptions(options);
 
-// Update readonly state, so that when false, it will not be added to the select
-$: readonly = readonly === true ? true : null;
+  // Update readonly state, so that when false, it will not be added to the select
+  $: readonly = readonly === true ? true : null;
 </script>
 
 <FormGroup {id} {label} {required} {help} {invalid} {horizontal} class="{$$props.class || ''}">
diff --git a/gui/components/form/Slider.svelte b/gui/components/form/Slider.svelte
index b9b25d7f7..b610ab6bd 100644
--- a/gui/components/form/Slider.svelte
+++ b/gui/components/form/Slider.svelte
@@ -1,76 +1,76 @@
 <style>
-@import '../../../node_modules/bootstrap-slider/dist/css/bootstrap-slider.min.css';
+  @import '../../../node_modules/bootstrap-slider/dist/css/bootstrap-slider.min.css';
 </style>
 
 <script>
-import { onMount, createEventDispatcher } from 'svelte';
-import Slider from 'bootstrap-slider';
+  import { onMount, createEventDispatcher } from 'svelte';
+  import Slider from 'bootstrap-slider';
 
-import FormGroup from './FormGroup.svelte';
-import { getRandomString } from '../../helpers/string-helpers';
+  import FormGroup from './FormGroup.svelte';
+  import { getRandomString } from '../../helpers/string-helpers';
 
-export let name;
-export let id = name + getRandomString(6); // Create a unique ID
-export let label = null;
+  export let name;
+  export let id = name + getRandomString(6); // Create a unique ID
+  export let label = null;
 
-export let value = null;
+  export let value = null;
 
-export let required = null;
-export let readonly = false;
-export let help = null;
-export let invalid = null;
+  export let required = null;
+  export let readonly = false;
+  export let help = null;
+  export let invalid = null;
 
-export let min = 0;
-export let max = 100;
-export let step = 1;
+  export let min = 0;
+  export let max = 100;
+  export let step = 1;
 
-export let horizontal = null;
+  export let horizontal = null;
 
-export let formatter = (value) => {
-  return value;
-};
+  export let formatter = (value) => {
+    return value;
+  };
 
-let slider;
+  let slider;
 
-let old_data;
+  let old_data;
 
-const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-function changeAction() {
-  dispatch('change');
-}
+  function changeAction() {
+    dispatch('change');
+  }
 
-onMount(() => {
-  slider = new Slider(slider, {
-    value: value,
-    range: Array.isArray(value),
-    enabled: true,
-    formatter: formatter,
+  onMount(() => {
+    slider = new Slider(slider, {
+      value: value,
+      range: Array.isArray(value),
+      enabled: true,
+      formatter: formatter,
+    });
+
+    slider.on('change', (data) => {
+      if (old_data !== data) {
+        old_data === data;
+        changeAction();
+      }
+    });
+    slider.setValue(value);
+    return () => {
+      slider.destroy();
+      slider = null;
+    };
   });
 
-  slider.on('change', (data) => {
-    if (old_data !== data) {
-      old_data === data;
-      changeAction();
+  $: if (slider) {
+    if (Array.isArray(value) && value.length === 1) {
+      value.push(0);
+    }
+    try {
+      slider.setValue(value);
+    } catch (e) {
+      // Just ignore
     }
-  });
-  slider.setValue(value);
-  return () => {
-    slider.destroy();
-    slider = null;
-  };
-});
-
-$: if (slider) {
-  if (Array.isArray(value) && value.length === 1) {
-    value.push(0);
-  }
-  try {
-    slider.setValue(value);
-  } catch (e) {
-    // Just ignore
   }
-}
 </script>
 
 <FormGroup {id} {label} {required} {help} {invalid} {horizontal} class="{$$props.class || ''}">
diff --git a/gui/components/form/Switch.svelte b/gui/components/form/Switch.svelte
index c2838e2a3..e9aed8ef0 100644
--- a/gui/components/form/Switch.svelte
+++ b/gui/components/form/Switch.svelte
@@ -1,29 +1,29 @@
 <script>
-import FormGroup from './FormGroup.svelte';
-import { getRandomString } from '../../helpers/string-helpers';
+  import FormGroup from './FormGroup.svelte';
+  import { getRandomString } from '../../helpers/string-helpers';
 
-export let name;
-export let id = name + getRandomString(6); // Create a unique ID
-export let label = null;
+  export let name;
+  export let id = name + getRandomString(6); // Create a unique ID
+  export let label = null;
 
-export let value = null;
+  export let value = null;
 
-export let required = null;
-export let readonly = false;
-export let help = null;
-export let invalid = null;
-export let disabled = false;
+  export let required = null;
+  export let readonly = false;
+  export let help = null;
+  export let invalid = null;
+  export let disabled = false;
 
-export let horizontal = null;
+  export let horizontal = null;
 
-let checkbox;
+  let checkbox;
 
-$: {
-  if (checkbox) {
-    // Update the switch state
-    checkbox.checked = value === true || value === 'true' || value === 1 || value === 'on';
+  $: {
+    if (checkbox) {
+      // Update the switch state
+      checkbox.checked = value === true || value === 'true' || value === 1 || value === 'on';
+    }
   }
-}
 </script>
 
 <FormGroup {id} {label} {required} {help} {invalid} {horizontal} class="{$$props.class || ''}">
diff --git a/gui/components/form/TextArea.svelte b/gui/components/form/TextArea.svelte
index bb52289c2..875cdd4f4 100644
--- a/gui/components/form/TextArea.svelte
+++ b/gui/components/form/TextArea.svelte
@@ -1,21 +1,21 @@
 <script>
-import FormGroup from './FormGroup.svelte';
-import { getRandomString } from '../../helpers/string-helpers';
+  import FormGroup from './FormGroup.svelte';
+  import { getRandomString } from '../../helpers/string-helpers';
 
-export let name;
-export let id = name + getRandomString(6); // Create a unique ID
-export let label = null;
-export let placeholder = label;
+  export let name;
+  export let id = name + getRandomString(6); // Create a unique ID
+  export let label = null;
+  export let placeholder = label;
 
-export let value = null;
+  export let value = null;
 
-export let required = null;
-export let readonly = false;
-export let help = null;
-export let invalid = null;
-export let rows = null;
+  export let required = null;
+  export let readonly = false;
+  export let help = null;
+  export let invalid = null;
+  export let rows = null;
 
-export let horizontal = null;
+  export let horizontal = null;
 </script>
 
 <FormGroup {id} {label} {required} {help} {invalid} {horizontal} class="{$$props.class || ''}">
diff --git a/gui/components/form/WysiwygArea.svelte b/gui/components/form/WysiwygArea.svelte
index 9433793b2..40dcee328 100644
--- a/gui/components/form/WysiwygArea.svelte
+++ b/gui/components/form/WysiwygArea.svelte
@@ -1,87 +1,87 @@
 <script>
-import 'trumbowyg';
-import 'trumbowyg/dist/plugins/base64/trumbowyg.base64.min.js';
-import 'trumbowyg/dist/plugins/colors/trumbowyg.colors.min.js';
-import 'trumbowyg/dist/plugins/emoji/trumbowyg.emoji.min.js';
-import 'trumbowyg/dist/plugins/fontfamily/trumbowyg.fontfamily.min.js';
-import 'trumbowyg/dist/plugins/pasteimage/trumbowyg.pasteimage.min.js';
-import 'trumbowyg/dist/plugins/table/trumbowyg.table.min.js';
-import 'trumbowyg/dist/plugins/indent/trumbowyg.indent.min.js';
+  import 'trumbowyg';
+  import 'trumbowyg/dist/plugins/base64/trumbowyg.base64.min.js';
+  import 'trumbowyg/dist/plugins/colors/trumbowyg.colors.min.js';
+  import 'trumbowyg/dist/plugins/emoji/trumbowyg.emoji.min.js';
+  import 'trumbowyg/dist/plugins/fontfamily/trumbowyg.fontfamily.min.js';
+  import 'trumbowyg/dist/plugins/pasteimage/trumbowyg.pasteimage.min.js';
+  import 'trumbowyg/dist/plugins/table/trumbowyg.table.min.js';
+  import 'trumbowyg/dist/plugins/indent/trumbowyg.indent.min.js';
 
-import 'trumbowyg/dist/ui/trumbowyg.min.css';
-import 'trumbowyg/dist/plugins/colors/ui/trumbowyg.colors.min.css';
-import 'trumbowyg/dist/plugins/emoji/ui/trumbowyg.emoji.min.css';
-import 'trumbowyg/dist/plugins/table/ui/trumbowyg.table.min.css';
+  import 'trumbowyg/dist/ui/trumbowyg.min.css';
+  import 'trumbowyg/dist/plugins/colors/ui/trumbowyg.colors.min.css';
+  import 'trumbowyg/dist/plugins/emoji/ui/trumbowyg.emoji.min.css';
+  import 'trumbowyg/dist/plugins/table/ui/trumbowyg.table.min.css';
 
-import { onMount } from 'svelte';
+  import { onMount } from 'svelte';
 
-import FormGroup from './FormGroup.svelte';
-import { getRandomString } from '../../helpers/string-helpers';
-import { isDay } from '../../stores/terrariumpi';
+  import FormGroup from './FormGroup.svelte';
+  import { getRandomString } from '../../helpers/string-helpers';
+  import { isDay } from '../../stores/terrariumpi';
 
-export let name;
-export let id = name + getRandomString(6); // Create a unique ID
-export let label = null;
-export let placeholder = label;
+  export let name;
+  export let id = name + getRandomString(6); // Create a unique ID
+  export let label = null;
+  export let placeholder = label;
 
-export let value = null;
+  export let value = null;
 
-export let required = null;
-export let readonly = false;
-export let help = null;
-export let invalid = null;
+  export let required = null;
+  export let readonly = false;
+  export let help = null;
+  export let invalid = null;
 
-export let horizontal = null;
+  export let horizontal = null;
 
-let wysiwyg = null;
+  let wysiwyg = null;
 
-onMount(() => {
-  jQuery(wysiwyg).trumbowyg({
-    btnsDef: {
-      // Create a new dropdown
-      image: {
-        dropdown: ['insertImage', 'base64'],
-        ico: 'insertImage',
-      },
+  onMount(() => {
+    jQuery(wysiwyg).trumbowyg({
+      btnsDef: {
+        // Create a new dropdown
+        image: {
+          dropdown: ['insertImage', 'base64'],
+          ico: 'insertImage',
+        },
 
-      alignment: {
-        dropdown: ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'indent', 'outdent'],
-        ico: 'justifyLeft',
+        alignment: {
+          dropdown: ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'indent', 'outdent'],
+          ico: 'justifyLeft',
+        },
       },
-    },
 
-    btns: [
-      ['viewHTML'],
-      ['undo', 'redo'], // Only supported in Blink browsers
-      ['formatting'],
-      ['strong', 'em', 'del'],
-      ['superscript', 'subscript'],
-      ['fontfamily'],
-      ['foreColor', 'backColor'],
-      ['link'],
-      ['image'],
-      ['table'],
-      ['alignment'],
-      ['unorderedList', 'orderedList'],
-      ['removeformat'],
-      ['fullscreen'],
-    ],
+      btns: [
+        ['viewHTML'],
+        ['undo', 'redo'], // Only supported in Blink browsers
+        ['formatting'],
+        ['strong', 'em', 'del'],
+        ['superscript', 'subscript'],
+        ['fontfamily'],
+        ['foreColor', 'backColor'],
+        ['link'],
+        ['image'],
+        ['table'],
+        ['alignment'],
+        ['unorderedList', 'orderedList'],
+        ['removeformat'],
+        ['fullscreen'],
+      ],
 
-    svgPath: 'css/icons.svg',
-    imageWidthModalEdit: true,
+      svgPath: 'css/icons.svg',
+      imageWidthModalEdit: true,
+    });
+    return () => {
+      jQuery(wysiwyg).trumbowyg('destroy');
+    };
   });
-  return () => {
-    jQuery(wysiwyg).trumbowyg('destroy');
-  };
-});
 
-$: if (wysiwyg) {
-  if (value && value !== '') {
-    jQuery(wysiwyg).trumbowyg('html', value);
-  } else {
-    jQuery(wysiwyg).trumbowyg('empty');
+  $: if (wysiwyg) {
+    if (value && value !== '') {
+      jQuery(wysiwyg).trumbowyg('html', value);
+    } else {
+      jQuery(wysiwyg).trumbowyg('empty');
+    }
   }
-}
 </script>
 
 <FormGroup {id} {label} {required} {help} {invalid} {horizontal} class="{$$props.class || ''}">
diff --git a/gui/modals/AreaFormModal.svelte b/gui/modals/AreaFormModal.svelte
index 399e294f9..9b983b3bf 100644
--- a/gui/modals/AreaFormModal.svelte
+++ b/gui/modals/AreaFormModal.svelte
@@ -1,403 +1,403 @@
 <script>
-import { onMount, createEventDispatcher } from 'svelte';
-import { writable } from 'svelte/store';
-import { _ } from 'svelte-i18n';
-import { createForm } from 'felte';
-import { dayjs } from 'svelte-time';
-
-import {
-  fetchEnclosures,
-  fetchAreaTypes,
-  fetchButtons,
-  fetchRelays,
-  fetchSoundcards,
-  fetchPlaylists,
-  fetchSensors,
-  fetchAreas,
-  fetchWeatherData,
-  updateArea,
-} from '../providers/api';
-import { successNotification, errorNotification } from '../providers/notification-provider';
-import { formToJSON, invalid_form_fields } from '../helpers/form-helpers';
-import { arrIdentical } from '../helpers/number-helpers';
-
-import ModalForm from '../user-controls/ModalForm.svelte';
-import Field from '../components/form/Field.svelte';
-import Helper from '../components/form/Helper.svelte';
-import Select from '../components/form/Select.svelte';
-import Switch from '../components/form/Switch.svelte';
-import Slider from '../components/form/Slider.svelte';
-
-let wrapper_show;
-let wrapper_hide;
-let loading = false;
-let validated = false;
-
-let enclosures = [];
-let area_types = [];
-let relays = [];
-let soundcards = [];
-let playlists = [];
-let sensors = [];
-let areas = [];
-let buttons = [];
-
-let sensor_filter = [];
-let showSensorDeviation = false;
-let weather = null;
-
-let formData = writable({});
-
-let editForm;
-
-const formatter = (value) => {
-  if (undefined !== value.length && 2 === value.length) {
-    return $_('areas.settings.relay.slider.duration', {
-      default: 'Delay: {delay} minutes. Duration: {duration} minutes',
-      values: { delay: value[0], duration: value[1] - value[0] },
-    });
-  }
-  return $_('areas.settings.relay.slider.delay', { default: 'Delay: {delay} minutes.', values: { delay: value } });
-};
+  import { onMount, createEventDispatcher } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { _ } from 'svelte-i18n';
+  import { createForm } from 'felte';
+  import { dayjs } from 'svelte-time';
+
+  import {
+    fetchEnclosures,
+    fetchAreaTypes,
+    fetchButtons,
+    fetchRelays,
+    fetchSoundcards,
+    fetchPlaylists,
+    fetchSensors,
+    fetchAreas,
+    fetchWeatherData,
+    updateArea,
+  } from '../providers/api';
+  import { successNotification, errorNotification } from '../providers/notification-provider';
+  import { formToJSON, invalid_form_fields } from '../helpers/form-helpers';
+  import { arrIdentical } from '../helpers/number-helpers';
+
+  import ModalForm from '../user-controls/ModalForm.svelte';
+  import Field from '../components/form/Field.svelte';
+  import Helper from '../components/form/Helper.svelte';
+  import Select from '../components/form/Select.svelte';
+  import Switch from '../components/form/Switch.svelte';
+  import Slider from '../components/form/Slider.svelte';
+
+  let wrapper_show;
+  let wrapper_hide;
+  let loading = false;
+  let validated = false;
+
+  let enclosures = [];
+  let area_types = [];
+  let relays = [];
+  let soundcards = [];
+  let playlists = [];
+  let sensors = [];
+  let areas = [];
+  let buttons = [];
+
+  let sensor_filter = [];
+  let showSensorDeviation = false;
+  let weather = null;
+
+  let formData = writable({});
+
+  let editForm;
+
+  const formatter = (value) => {
+    if (undefined !== value.length && 2 === value.length) {
+      return $_('areas.settings.relay.slider.duration', {
+        default: 'Delay: {delay} minutes. Duration: {duration} minutes',
+        values: { delay: value[0], duration: value[1] - value[0] },
+      });
+    }
+    return $_('areas.settings.relay.slider.delay', { default: 'Delay: {delay} minutes.', values: { delay: value } });
+  };
 
-const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-const successAction = () => {
-  dispatch('save');
-};
+  const successAction = () => {
+    dispatch('save');
+  };
 
-const relayName = (id) => {
-  let relay = relays.filter((item) => {
-    return item.id === id;
-  });
-  return relay.length === 1 ? relay[0].name : '';
-};
+  const relayName = (id) => {
+    let relay = relays.filter((item) => {
+      return item.id === id;
+    });
+    return relay.length === 1 ? relay[0].name : '';
+  };
 
-const relayDimmer = (id) => {
-  let relay = relays.filter((item) => {
-    return item.id === id;
-  });
-  return relay.length === 1 ? relay[0].dimmer : false;
-};
+  const relayDimmer = (id) => {
+    let relay = relays.filter((item) => {
+      return item.id === id;
+    });
+    return relay.length === 1 ? relay[0].dimmer : false;
+  };
+
+  const tweakValue = (value, defaultValue) => {
+    if (value === undefined) {
+      return defaultValue;
+    }
 
-const tweakValue = (value, defaultValue) => {
-  if (value === undefined) {
-    return defaultValue;
-  }
+    try {
+      return value.split(',').map((item) => {
+        return item * 1.0;
+      });
+    } catch (e) {
+      return value;
+    }
+  };
 
-  try {
-    return value.split(',').map((item) => {
-      return item * 1.0;
+  const updateTweakRelays = (part, new_relays) => {
+    let tweaks = $formData.setup && $formData.setup[part].tweaks ? $formData.setup[part].tweaks : [];
+    let existing_relays = tweaks.map((item) => {
+      return item.id;
     });
-  } catch (e) {
-    return value;
-  }
-};
-
-const updateTweakRelays = (part, new_relays) => {
-  let tweaks = $formData.setup && $formData.setup[part].tweaks ? $formData.setup[part].tweaks : [];
-  let existing_relays = tweaks.map((item) => {
-    return item.id;
-  });
 
-  if (!arrIdentical(new_relays, existing_relays)) {
-    // Cleanup deleted relays (filter out non selected relays)
-    if (tweaks.length > 0) {
-      tweaks = tweaks.filter((relay) => {
-        return new_relays.indexOf(relay.id) !== -1;
-      });
+    if (!arrIdentical(new_relays, existing_relays)) {
+      // Cleanup deleted relays (filter out non selected relays)
+      if (tweaks.length > 0) {
+        tweaks = tweaks.filter((relay) => {
+          return new_relays.indexOf(relay.id) !== -1;
+        });
+      }
+      // Add new relays (filter out non existing relays and add them)
+      new_relays
+        .filter((relay_id) => {
+          return existing_relays.length === 0 || existing_relays.indexOf(relay_id) === -1;
+        })
+        .map((item) => {
+          tweaks.push({ id: item });
+        });
+      $formData.setup[part].relays = new_relays;
+      $formData.setup[part].tweaks = tweaks;
     }
-    // Add new relays (filter out non existing relays and add them)
-    new_relays
-      .filter((relay_id) => {
-        return existing_relays.length === 0 || existing_relays.indexOf(relay_id) === -1;
-      })
+  };
+
+  const updateTweakSliders = () => {
+    // Store form data in store. Need to get the slider values
+    let form = formToJSON(editForm);
+
+    $formData.setup.low.tweaks = form.setup.low.tweaks;
+    $formData.setup.high.tweaks = form.setup.high.tweaks;
+  };
+
+  const addVariation = () => {
+    $formData.setup.variation = [
+      ...(formToJSON(editForm).setup.variation ?? null),
+      ...[{ when: '', period: '', value: null }],
+    ];
+  };
+
+  const removeVariation = (index) => {
+    // Remove row
+    $formData.setup.variation.splice(index, 1);
+    // This is needed in order to Svelte to update the arrays in the template https://svelte.dev/tutorial/updating-arrays-and-objects
+    $formData.setup.variation = $formData.setup.variation;
+  };
+
+  const areaType = (area) => {
+    $formData.type = area;
+    sensor_filter = [];
+    area_types
+      .filter((item) => item.value === area)
       .map((item) => {
-        tweaks.push({ id: item });
+        sensor_filter = [...sensor_filter, ...item.sensors];
       });
-    $formData.setup[part].relays = new_relays;
-    $formData.setup[part].tweaks = tweaks;
-  }
-};
-
-const updateTweakSliders = () => {
-  // Store form data in store. Need to get the slider values
-  let form = formToJSON(editForm);
-
-  $formData.setup.low.tweaks = form.setup.low.tweaks;
-  $formData.setup.high.tweaks = form.setup.high.tweaks;
-};
-
-const addVariation = () => {
-  $formData.setup.variation = [
-    ...(formToJSON(editForm).setup.variation ?? null),
-    ...[{ when: '', period: '', value: null }],
-  ];
-};
-
-const removeVariation = (index) => {
-  // Remove row
-  $formData.setup.variation.splice(index, 1);
-  // This is needed in order to Svelte to update the arrays in the template https://svelte.dev/tutorial/updating-arrays-and-objects
-  $formData.setup.variation = $formData.setup.variation;
-};
-
-const areaType = (area) => {
-  $formData.type = area;
-  sensor_filter = [];
-  area_types
-    .filter((item) => item.value === area)
-    .map((item) => {
-      sensor_filter = [...sensor_filter, ...item.sensors];
-    });
-};
-
-const areaMode = (mode) => {
-  $formData.mode = mode;
-  let on_duration = 0;
-  let off_duration = 0;
-
-  switch ($formData.mode) {
-    case 'weather':
-      on_duration = (weather.sun.set - weather.sun.rise) / 60;
-      off_duration = 24 * 60 - on_duration;
-
-      editForm.elements['setup.low.begin'].value = dayjs.unix(weather.sun.rise).format('HH:mm');
-      editForm.elements['setup.low.end'].value = dayjs.unix(weather.sun.set).format('HH:mm');
-      editForm.elements['setup.low.on_duration'].value = on_duration;
-      editForm.elements['setup.low.off_duration'].value = off_duration;
-
-      editForm.elements['setup.high.begin'].value = dayjs.unix(weather.sun.set).format('HH:mm');
-      editForm.elements['setup.high.end'].value = dayjs.unix(weather.sun.rise).format('HH:mm');
-      editForm.elements['setup.high.on_duration'].value = off_duration;
-      editForm.elements['setup.high.off_duration'].value = on_duration;
-      break;
-    case 'weather_inverse':
-      off_duration = (weather.sun.set - weather.sun.rise) / 60;
-      on_duration = 24 * 60 - off_duration;
-
-      editForm.elements['setup.low.begin'].value = dayjs.unix(weather.sun.set).format('HH:mm');
-      editForm.elements['setup.low.end'].value = dayjs.unix(weather.sun.rise).format('HH:mm');
-      editForm.elements['setup.low.on_duration'].value = on_duration;
-      editForm.elements['setup.low.off_duration'].value = off_duration;
-
-      editForm.elements['setup.high.begin'].value = dayjs.unix(weather.sun.rise).format('HH:mm');
-      editForm.elements['setup.high.end'].value = dayjs.unix(weather.sun.set).format('HH:mm');
-      editForm.elements['setup.high.on_duration'].value = off_duration;
-      editForm.elements['setup.high.off_duration'].value = on_duration;
-      break;
-  }
-};
-
-const _processForm = async (values, context) => {
-  validated = true;
-
-  // Reset custom error trigger
-  try {
-    editForm.elements['setup.low.relays[]'].setCustomValidity('');
-    editForm.elements['setup.high.relays[]'].setCustomValidity('');
-  } catch (e) {
-    editForm.elements['setup.low.playlists[]'].setCustomValidity('');
-    editForm.elements['setup.high.playlists[]'].setCustomValidity('');
-  }
-
-  if (editForm.checkValidity()) {
-    let formOk = true;
-    values = formToJSON(editForm);
-
-    // Check if we have selected relays multiple times in the low and high alarm parts
-    if (values.setup.low.relays) {
-      formOk = !values.setup.low.relays.some((item) => values.setup.high.relays.includes(item));
+  };
+
+  const areaMode = (mode) => {
+    $formData.mode = mode;
+    let on_duration = 0;
+    let off_duration = 0;
+
+    switch ($formData.mode) {
+      case 'weather':
+        on_duration = (weather.sun.set - weather.sun.rise) / 60;
+        off_duration = 24 * 60 - on_duration;
+
+        editForm.elements['setup.low.begin'].value = dayjs.unix(weather.sun.rise).format('HH:mm');
+        editForm.elements['setup.low.end'].value = dayjs.unix(weather.sun.set).format('HH:mm');
+        editForm.elements['setup.low.on_duration'].value = on_duration;
+        editForm.elements['setup.low.off_duration'].value = off_duration;
+
+        editForm.elements['setup.high.begin'].value = dayjs.unix(weather.sun.set).format('HH:mm');
+        editForm.elements['setup.high.end'].value = dayjs.unix(weather.sun.rise).format('HH:mm');
+        editForm.elements['setup.high.on_duration'].value = off_duration;
+        editForm.elements['setup.high.off_duration'].value = on_duration;
+        break;
+      case 'weather_inverse':
+        off_duration = (weather.sun.set - weather.sun.rise) / 60;
+        on_duration = 24 * 60 - off_duration;
+
+        editForm.elements['setup.low.begin'].value = dayjs.unix(weather.sun.set).format('HH:mm');
+        editForm.elements['setup.low.end'].value = dayjs.unix(weather.sun.rise).format('HH:mm');
+        editForm.elements['setup.low.on_duration'].value = on_duration;
+        editForm.elements['setup.low.off_duration'].value = off_duration;
+
+        editForm.elements['setup.high.begin'].value = dayjs.unix(weather.sun.rise).format('HH:mm');
+        editForm.elements['setup.high.end'].value = dayjs.unix(weather.sun.set).format('HH:mm');
+        editForm.elements['setup.high.on_duration'].value = off_duration;
+        editForm.elements['setup.high.off_duration'].value = on_duration;
+        break;
+    }
+  };
+
+  const _processForm = async (values, context) => {
+    validated = true;
+
+    // Reset custom error trigger
+    try {
+      editForm.elements['setup.low.relays[]'].setCustomValidity('');
+      editForm.elements['setup.high.relays[]'].setCustomValidity('');
+    } catch (e) {
+      editForm.elements['setup.low.playlists[]'].setCustomValidity('');
+      editForm.elements['setup.high.playlists[]'].setCustomValidity('');
     }
 
-    if (formOk) {
-      loading = true;
-
-      if (values.type === 'lights' || values.type === 'audio') {
-        values.setup.day = { ...values.setup.low };
-        values.setup.night = { ...values.setup.high };
+    if (editForm.checkValidity()) {
+      let formOk = true;
+      values = formToJSON(editForm);
 
-        delete values.setup.low;
-        delete values.setup.high;
+      // Check if we have selected relays multiple times in the low and high alarm parts
+      if (values.setup.low.relays) {
+        formOk = !values.setup.low.relays.some((item) => values.setup.high.relays.includes(item));
       }
 
-      // Filter the variation data so that every item should be filled, else the variation is invalid and will be deleted
-      // This can also be used to clear the first line
-      values.setup.variation = values.setup.variation.filter((item) =>
-        Object.values(item).every((value) => value && value !== ''),
-      );
-      if (values.setup.variation.length === 0) {
-        delete values.setup.variation;
-      }
+      if (formOk) {
+        loading = true;
 
-      try {
-        // Post data
-        await updateArea(values, (data) => (values = data));
-        // Notifify OK!
-        successNotification(
-          $_('areas.settings.save.ok.message', {
-            default: "Area ''{name}'' is updated",
-            values: { name: values.name },
-          }),
-          $_('notification.form.save.ok.title', { default: 'Save OK' }),
-        );
+        if (values.type === 'lights' || values.type === 'audio') {
+          values.setup.day = { ...values.setup.low };
+          values.setup.night = { ...values.setup.high };
+
+          delete values.setup.low;
+          delete values.setup.high;
+        }
 
-        // Done, close window
-        hide();
-        // Signal the save callback
-        successAction();
+        // Filter the variation data so that every item should be filled, else the variation is invalid and will be deleted
+        // This can also be used to clear the first line
+        values.setup.variation = values.setup.variation.filter((item) =>
+          Object.values(item).every((value) => value && value !== ''),
+        );
+        if (values.setup.variation.length === 0) {
+          delete values.setup.variation;
+        }
 
-        // TODO: Somehow, either the save signal callback or here, we have to reload the buttons
-      } catch (error) {
-        // Some kind of an error
+        try {
+          // Post data
+          await updateArea(values, (data) => (values = data));
+          // Notifify OK!
+          successNotification(
+            $_('areas.settings.save.ok.message', {
+              default: "Area ''{name}'' is updated",
+              values: { name: values.name },
+            }),
+            $_('notification.form.save.ok.title', { default: 'Save OK' }),
+          );
+
+          // Done, close window
+          hide();
+          // Signal the save callback
+          successAction();
+
+          // TODO: Somehow, either the save signal callback or here, we have to reload the buttons
+        } catch (error) {
+          // Some kind of an error
+          loading = false;
+          errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
+        } finally {
+          validated = false;
+        }
+      } else {
+        // A relay is used in both low and high alarm
         loading = false;
-        errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
-      } finally {
-        validated = false;
-      }
-    } else {
-      // A relay is used in both low and high alarm
-      loading = false;
 
-      try {
-        editForm.elements['setup.low.relays[]'].setCustomValidity('Not valid');
-        editForm.elements['setup.high.relays[]'].setCustomValidity('Not valid');
-      } catch (e) {
-        editForm.elements['setup.low.playlists[]'].setCustomValidity('Not valid');
-        editForm.elements['setup.high.playlists[]'].setCustomValidity('Not valid');
-      }
+        try {
+          editForm.elements['setup.low.relays[]'].setCustomValidity('Not valid');
+          editForm.elements['setup.high.relays[]'].setCustomValidity('Not valid');
+        } catch (e) {
+          editForm.elements['setup.low.playlists[]'].setCustomValidity('Not valid');
+          editForm.elements['setup.high.playlists[]'].setCustomValidity('Not valid');
+        }
 
-      editForm.checkValidity();
+        editForm.checkValidity();
 
-      let error_message = $_('areas.settings.save.error.duplicate_relays', {
-        default: 'You have selected the same relay(s) in both the low and high alarm. This is not valid.',
+        let error_message = $_('areas.settings.save.error.duplicate_relays', {
+          default: 'You have selected the same relay(s) in both the low and high alarm. This is not valid.',
+        });
+        errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
+      }
+    } else {
+      let error_message = $_('areas.settings.save.error.required_fields', {
+        default: 'Not all required fields are entered correctly.',
       });
+      error_message += "\n'" + [...new Set(invalid_form_fields(editForm))].join("'\n'") + "'";
       errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
     }
-  } else {
-    let error_message = $_('areas.settings.save.error.required_fields', {
-      default: 'Not all required fields are entered correctly.',
-    });
-    error_message += "\n'" + [...new Set(invalid_form_fields(editForm))].join("'\n'") + "'";
-    errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
-  }
-};
-
-const { form, setFields, isSubmitting, createSubmitHandler, reset, data } = createForm({
-  onSubmit: _processForm,
-});
-
-const formSubmit = createSubmitHandler({
-  onSubmit: _processForm,
-});
-
-export const show = async (areaId, cb) => {
-  // Anonymous (Async) functions always as first!!
-  (async () => {
-    // Load all available enclosures, area types, relays, sensors and more
-    await Promise.all([
-      fetchEnclosures(
-        false,
-        (data) =>
-          (enclosures = data.map((item) => {
-            return { value: item.id, text: item.name };
-          })),
-      ),
-      fetchAreaTypes(
-        (data) =>
-          (area_types = data.map((item) => {
-            return { value: item.type, text: item.name, sensors: item.sensors };
-          })),
-      ),
-      fetchRelays(false, (data) => (relays = data)),
-      fetchSoundcards(
-        (data) =>
-          (soundcards = data.map((item) => {
-            return { value: item.index, text: item.name };
-          })),
-      ),
-      fetchPlaylists(
-        false,
-        (data) =>
-          (playlists = data.map((item) => {
-            return { value: item.id, text: item.name };
-          })),
-      ),
-      fetchSensors(
-        false,
-        (data) =>
-          (sensors = data.map((item) => {
-            return { value: item.id, text: item.name, type: item.type, calibration: item.calibration };
-          })),
-      ),
-      fetchButtons(
-        false,
-        (data) =>
-          (buttons = data.map((item) => {
-            return { value: item.id, text: item.name, type: item.hardware };
-          })),
-      ),
-      fetchAreas(
-        false,
-        (data) =>
-          (areas = data.map((item) => {
-            return { value: item.id, text: item.name };
-          })),
-      ),
-      fetchWeatherData((data) => (weather = data)),
-    ]);
-
-    // If ID is given, load existing data
-    if (areaId) {
-      await fetchAreas(areaId, (data) => {
-        // If we have lights or audio type, we need to translate day to low, and night to high
-        // Do it also here, before assigning to `$formData`. Else you will get errors... :(
-        if (data.type === 'lights' || data.type === 'audio') {
-          data.setup.low = { ...data.setup.day };
-          data.setup.high = { ...data.setup.night };
-
-          delete data.setup.day;
-          delete data.setup.night;
-        }
+  };
 
-        // We do not care about the actual area state, so delete it
-        delete data.state;
+  const { form, setFields, isSubmitting, createSubmitHandler, reset, data } = createForm({
+    onSubmit: _processForm,
+  });
 
-        // First set formdata which will trigger if statements to show fields
-        $formData = data;
-      });
-      setFields($formData);
-    }
-    // Loading done
-    loading = false;
-  })();
-
-  // Reset form validation
-  reset();
-  $formData = formToJSON(editForm);
-  $formData.setup.variation = [{ when: '', period: '', value: null }];
-  validated = false;
-
-  // Toggle loading div
-  loading = true;
-
-  // Show the modal
-  wrapper_show();
-};
-
-export const hide = () => {
-  // Delay the loading div
-  setTimeout(() => {
-    loading = false;
-  }, 1000);
-
-  // Hide modal
-  wrapper_hide();
-};
-
-onMount(() => {
-  editForm.setAttribute('novalidate', 'novalidate');
-});
+  const formSubmit = createSubmitHandler({
+    onSubmit: _processForm,
+  });
+
+  export const show = async (areaId, cb) => {
+    // Anonymous (Async) functions always as first!!
+    (async () => {
+      // Load all available enclosures, area types, relays, sensors and more
+      await Promise.all([
+        fetchEnclosures(
+          false,
+          (data) =>
+            (enclosures = data.map((item) => {
+              return { value: item.id, text: item.name };
+            })),
+        ),
+        fetchAreaTypes(
+          (data) =>
+            (area_types = data.map((item) => {
+              return { value: item.type, text: item.name, sensors: item.sensors };
+            })),
+        ),
+        fetchRelays(false, (data) => (relays = data)),
+        fetchSoundcards(
+          (data) =>
+            (soundcards = data.map((item) => {
+              return { value: item.index, text: item.name };
+            })),
+        ),
+        fetchPlaylists(
+          false,
+          (data) =>
+            (playlists = data.map((item) => {
+              return { value: item.id, text: item.name };
+            })),
+        ),
+        fetchSensors(
+          false,
+          (data) =>
+            (sensors = data.map((item) => {
+              return { value: item.id, text: item.name, type: item.type, calibration: item.calibration };
+            })),
+        ),
+        fetchButtons(
+          false,
+          (data) =>
+            (buttons = data.map((item) => {
+              return { value: item.id, text: item.name, type: item.hardware };
+            })),
+        ),
+        fetchAreas(
+          false,
+          (data) =>
+            (areas = data.map((item) => {
+              return { value: item.id, text: item.name };
+            })),
+        ),
+        fetchWeatherData((data) => (weather = data)),
+      ]);
+
+      // If ID is given, load existing data
+      if (areaId) {
+        await fetchAreas(areaId, (data) => {
+          // If we have lights or audio type, we need to translate day to low, and night to high
+          // Do it also here, before assigning to `$formData`. Else you will get errors... :(
+          if (data.type === 'lights' || data.type === 'audio') {
+            data.setup.low = { ...data.setup.day };
+            data.setup.high = { ...data.setup.night };
+
+            delete data.setup.day;
+            delete data.setup.night;
+          }
+
+          // We do not care about the actual area state, so delete it
+          delete data.state;
+
+          // First set formdata which will trigger if statements to show fields
+          $formData = data;
+        });
+        setFields($formData);
+      }
+      // Loading done
+      loading = false;
+    })();
+
+    // Reset form validation
+    reset();
+    $formData = formToJSON(editForm);
+    $formData.setup.variation = [{ when: '', period: '', value: null }];
+    validated = false;
+
+    // Toggle loading div
+    loading = true;
+
+    // Show the modal
+    wrapper_show();
+  };
+
+  export const hide = () => {
+    // Delay the loading div
+    setTimeout(() => {
+      loading = false;
+    }, 1000);
+
+    // Hide modal
+    wrapper_hide();
+  };
+
+  onMount(() => {
+    editForm.setAttribute('novalidate', 'novalidate');
+  });
 </script>
 
 <ModalForm bind:show="{wrapper_show}" bind:hide="{wrapper_hide}" {loading}>
diff --git a/gui/modals/ButtonFormModal.svelte b/gui/modals/ButtonFormModal.svelte
index 95a7695ee..7fd140e90 100644
--- a/gui/modals/ButtonFormModal.svelte
+++ b/gui/modals/ButtonFormModal.svelte
@@ -1,139 +1,139 @@
 <script>
-import { onMount, createEventDispatcher } from 'svelte';
-import { writable } from 'svelte/store';
-import { _ } from 'svelte-i18n';
-import { createForm } from 'felte';
+  import { onMount, createEventDispatcher } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { _ } from 'svelte-i18n';
+  import { createForm } from 'felte';
 
-import { fetchButtons, fetchButtonsHardware, updateButton } from '../providers/api';
-import { successNotification, errorNotification } from '../providers/notification-provider';
-import { formToJSON, invalid_form_fields } from '../helpers/form-helpers';
+  import { fetchButtons, fetchButtonsHardware, updateButton } from '../providers/api';
+  import { successNotification, errorNotification } from '../providers/notification-provider';
+  import { formToJSON, invalid_form_fields } from '../helpers/form-helpers';
 
-import ModalForm from '../user-controls/ModalForm.svelte';
-import Field from '../components/form/Field.svelte';
-import Helper from '../components/form/Helper.svelte';
-import Select from '../components/form/Select.svelte';
-import Switch from '../components/form/Switch.svelte';
+  import ModalForm from '../user-controls/ModalForm.svelte';
+  import Field from '../components/form/Field.svelte';
+  import Helper from '../components/form/Helper.svelte';
+  import Select from '../components/form/Select.svelte';
+  import Switch from '../components/form/Switch.svelte';
 
-let wrapper_show;
-let wrapper_hide;
-let loading = null;
-let validated = false;
+  let wrapper_show;
+  let wrapper_hide;
+  let loading = null;
+  let validated = false;
 
-let hardware = [];
-let calibration = true;
-let selected_hardware = null;
-let formData = writable({});
+  let hardware = [];
+  let calibration = true;
+  let selected_hardware = null;
+  let formData = writable({});
 
-let editForm;
+  let editForm;
 
-const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-const successAction = () => {
-  dispatch('save');
-};
+  const successAction = () => {
+    dispatch('save');
+  };
 
-const hardwareType = (hardware) => {
-  selected_hardware = hardware;
-};
+  const hardwareType = (hardware) => {
+    selected_hardware = hardware;
+  };
 
-const _processForm = async (values, context) => {
-  validated = true;
+  const _processForm = async (values, context) => {
+    validated = true;
 
-  if (context.form.checkValidity()) {
-    loading = true;
-    values = formToJSON(editForm);
-    values.address += '';
-    delete values.value;
+    if (context.form.checkValidity()) {
+      loading = true;
+      values = formToJSON(editForm);
+      values.address += '';
+      delete values.value;
 
-    try {
-      // Post data
-      await updateButton(values, (data) => (values = data));
-      // Notifify OK!
-      successNotification(
-        $_('buttons.settings.save.ok.message', {
-          default: "Button ''{name}'' is updated",
-          values: { name: values.name },
-        }),
-        $_('notification.form.save.ok.title', { default: 'Save OK' }),
-      );
+      try {
+        // Post data
+        await updateButton(values, (data) => (values = data));
+        // Notifify OK!
+        successNotification(
+          $_('buttons.settings.save.ok.message', {
+            default: "Button ''{name}'' is updated",
+            values: { name: values.name },
+          }),
+          $_('notification.form.save.ok.title', { default: 'Save OK' }),
+        );
 
-      // Done, close window
-      hide();
+        // Done, close window
+        hide();
 
-      // Signal the save callback
-      successAction();
-    } catch (error) {
-      // Some kind of an error
-      loading = false;
-      errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
-    } finally {
-      // Cleanup
-      validated = false;
+        // Signal the save callback
+        successAction();
+      } catch (error) {
+        // Some kind of an error
+        loading = false;
+        errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
+      } finally {
+        // Cleanup
+        validated = false;
+      }
+    } else {
+      let error_message = $_('buttons.settings.save.error.required_fields', {
+        default: 'Not all required fields are entered correctly.',
+      });
+      error_message += "\n'" + invalid_form_fields(editForm).join("'\n'") + "'";
+      errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
     }
-  } else {
-    let error_message = $_('buttons.settings.save.error.required_fields', {
-      default: 'Not all required fields are entered correctly.',
-    });
-    error_message += "\n'" + invalid_form_fields(editForm).join("'\n'") + "'";
-    errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
-  }
-};
+  };
 
-const { form, setFields, isSubmitting, createSubmitHandler, reset } = createForm({
-  onSubmit: _processForm,
-});
+  const { form, setFields, isSubmitting, createSubmitHandler, reset } = createForm({
+    onSubmit: _processForm,
+  });
 
-const formSubmit = createSubmitHandler({
-  onSubmit: _processForm,
-});
+  const formSubmit = createSubmitHandler({
+    onSubmit: _processForm,
+  });
 
-export const show = async (buttonId, cb) => {
-  // Anonymous (Async) functions always as first!!
-  (async () => {
-    // Load all avaliable hardware
-    await fetchButtonsHardware(
-      (data) =>
-        (hardware = data.map((item) => {
-          return { value: item.hardware, text: item.name };
-        })),
-    );
+  export const show = async (buttonId, cb) => {
+    // Anonymous (Async) functions always as first!!
+    (async () => {
+      // Load all avaliable hardware
+      await fetchButtonsHardware(
+        (data) =>
+          (hardware = data.map((item) => {
+            return { value: item.hardware, text: item.name };
+          })),
+      );
 
-    // If ID is given, load existing data
-    if (buttonId) {
-      // Load existing button data and fill form data
-      await fetchButtons(buttonId, (data) => ($formData = data));
-      setFields($formData);
-    }
+      // If ID is given, load existing data
+      if (buttonId) {
+        // Load existing button data and fill form data
+        await fetchButtons(buttonId, (data) => ($formData = data));
+        setFields($formData);
+      }
 
-    // Loading done
-    loading = false;
-  })();
+      // Loading done
+      loading = false;
+    })();
 
-  // Reset form validation
-  reset();
-  $formData = formToJSON(editForm);
-  validated = false;
+    // Reset form validation
+    reset();
+    $formData = formToJSON(editForm);
+    validated = false;
 
-  // Toggle loading div
-  loading = true;
+    // Toggle loading div
+    loading = true;
 
-  // Show the modal
-  wrapper_show();
-};
+    // Show the modal
+    wrapper_show();
+  };
 
-export const hide = () => {
-  // Delay the loading div
-  setTimeout(() => {
-    loading = false;
-  }, 1000);
+  export const hide = () => {
+    // Delay the loading div
+    setTimeout(() => {
+      loading = false;
+    }, 1000);
 
-  // Hide modal
-  wrapper_hide();
-};
+    // Hide modal
+    wrapper_hide();
+  };
 
-onMount(() => {
-  editForm.setAttribute('novalidate', 'novalidate');
-});
+  onMount(() => {
+    editForm.setAttribute('novalidate', 'novalidate');
+  });
 </script>
 
 <ModalForm bind:show="{wrapper_show}" bind:hide="{wrapper_hide}" {loading}>
diff --git a/gui/modals/ConfirmModal.svelte b/gui/modals/ConfirmModal.svelte
index 8b7ada9cd..3cc8a6b0e 100644
--- a/gui/modals/ConfirmModal.svelte
+++ b/gui/modals/ConfirmModal.svelte
@@ -1,32 +1,32 @@
 <script>
-import { Modal, ModalCloseButton } from '@keenmate/svelte-adminlte';
-import { createEventDispatcher } from 'svelte';
-import { _ } from 'svelte-i18n';
-
-export let confirmTitle = $_('modal.confirm.title', { default: 'Are you sure?' });
-export let confirmMessage = '';
-export let icon = 'fa-exclamation';
-
-let running = false;
-let wrapper_show;
-let wrapper_hide;
-
-const dispatch = createEventDispatcher();
-
-const confirmAction = () => {
-  running = true;
-  dispatch('confirm');
-};
-
-export const show = async () => {
-  running = false;
-  wrapper_show();
-};
-
-export const hide = () => {
-  wrapper_hide();
-  running = false;
-};
+  import { Modal, ModalCloseButton } from '@keenmate/svelte-adminlte';
+  import { createEventDispatcher } from 'svelte';
+  import { _ } from 'svelte-i18n';
+
+  export let confirmTitle = $_('modal.confirm.title', { default: 'Are you sure?' });
+  export let confirmMessage = '';
+  export let icon = 'fa-exclamation';
+
+  let running = false;
+  let wrapper_show;
+  let wrapper_hide;
+
+  const dispatch = createEventDispatcher();
+
+  const confirmAction = () => {
+    running = true;
+    dispatch('confirm');
+  };
+
+  export const show = async () => {
+    running = false;
+    wrapper_show();
+  };
+
+  export const hide = () => {
+    wrapper_hide();
+    running = false;
+  };
 </script>
 
 <Modal bind:show="{wrapper_show}" bind:hide="{wrapper_hide}">
diff --git a/gui/modals/EnclosureFormModal.svelte b/gui/modals/EnclosureFormModal.svelte
index 3c9184216..7e6513630 100644
--- a/gui/modals/EnclosureFormModal.svelte
+++ b/gui/modals/EnclosureFormModal.svelte
@@ -1,171 +1,171 @@
 <script>
-import { onMount, createEventDispatcher } from 'svelte';
-import { writable } from 'svelte/store';
-import { _ } from 'svelte-i18n';
-import { createForm } from 'felte';
-
-import { fetchButtons, fetchWebcams, fetchEnclosures, updateEnclosure, uploadFile } from '../providers/api';
-import { successNotification, errorNotification } from '../providers/notification-provider';
-import { formToJSON, invalid_form_fields } from '../helpers/form-helpers';
-
-import ModalForm from '../user-controls/ModalForm.svelte';
-import Field from '../components/form/Field.svelte';
-import Helper from '../components/form/Helper.svelte';
-import Select from '../components/form/Select.svelte';
-import WysiwygArea from '../components/form/WysiwygArea.svelte';
-import FileUpload from '../components/form/FileUpload.svelte';
-
-let wrapper_show;
-let wrapper_hide;
-let loading = false;
-let validated = false;
-
-let doors = [];
-let webcams = [];
-let formData = writable({});
-
-let editForm;
-
-const dispatch = createEventDispatcher();
-
-const successAction = () => {
-  dispatch('save');
-};
-
-async function _processForm(values, context) {
-  validated = true;
+  import { onMount, createEventDispatcher } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { _ } from 'svelte-i18n';
+  import { createForm } from 'felte';
+
+  import { fetchButtons, fetchWebcams, fetchEnclosures, updateEnclosure, uploadFile } from '../providers/api';
+  import { successNotification, errorNotification } from '../providers/notification-provider';
+  import { formToJSON, invalid_form_fields } from '../helpers/form-helpers';
+
+  import ModalForm from '../user-controls/ModalForm.svelte';
+  import Field from '../components/form/Field.svelte';
+  import Helper from '../components/form/Helper.svelte';
+  import Select from '../components/form/Select.svelte';
+  import WysiwygArea from '../components/form/WysiwygArea.svelte';
+  import FileUpload from '../components/form/FileUpload.svelte';
+
+  let wrapper_show;
+  let wrapper_hide;
+  let loading = false;
+  let validated = false;
+
+  let doors = [];
+  let webcams = [];
+  let formData = writable({});
+
+  let editForm;
+
+  const dispatch = createEventDispatcher();
+
+  const successAction = () => {
+    dispatch('save');
+  };
+
+  async function _processForm(values, context) {
+    validated = true;
+
+    if (context.form.checkValidity()) {
+      loading = true;
+      values = formToJSON(editForm);
+
+      if (values.file_image) {
+        // Upload first image to make sure it is valid
+        try {
+          values.image = await uploadFile(context.form.file_image);
+          values.delete_image = false;
+        } catch (error) {
+          errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
+
+          loading = false;
+          validated = false;
+
+          // Return to current form
+          return;
+        }
+      }
 
-  if (context.form.checkValidity()) {
-    loading = true;
-    values = formToJSON(editForm);
+      delete values.areas;
+      delete values.file_image;
 
-    if (values.file_image) {
-      // Upload first image to make sure it is valid
       try {
-        values.image = await uploadFile(context.form.file_image);
-        values.delete_image = false;
+        // Post data
+        await updateEnclosure(values, (data) => (values = data));
+        // Notifify OK!
+        successNotification(
+          $_('enclosures.settings.save.ok.message', {
+            default: "Enclosure ''{name}'' is updated",
+            values: { name: values.name },
+          }),
+          $_('notification.form.save.ok.title', { default: 'Save OK' }),
+        );
+
+        // Done, close window
+        hide();
+
+        // Signal the save callback
+        successAction();
+
+        // TODO: Somehow, either the save signal callback or here, we have to reload the buttons
       } catch (error) {
-        errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
-
+        // Some kind of an error
         loading = false;
+        errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
+      } finally {
+        // Cleanup
         validated = false;
-
-        // Return to current form
-        return;
       }
+    } else {
+      let error_message = $_('enclosures.settings.save.error.required_fields', {
+        default: 'Not all required fields are entered correctly.',
+      });
+      error_message += "\n'" + invalid_form_fields(editForm).join("'\n'") + "'";
+      errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
     }
-
-    delete values.areas;
-    delete values.file_image;
-
-    try {
-      // Post data
-      await updateEnclosure(values, (data) => (values = data));
-      // Notifify OK!
-      successNotification(
-        $_('enclosures.settings.save.ok.message', {
-          default: "Enclosure ''{name}'' is updated",
-          values: { name: values.name },
-        }),
-        $_('notification.form.save.ok.title', { default: 'Save OK' }),
-      );
-
-      // Done, close window
-      hide();
-
-      // Signal the save callback
-      successAction();
-
-      // TODO: Somehow, either the save signal callback or here, we have to reload the buttons
-    } catch (error) {
-      // Some kind of an error
-      loading = false;
-      errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
-    } finally {
-      // Cleanup
-      validated = false;
-    }
-  } else {
-    let error_message = $_('enclosures.settings.save.error.required_fields', {
-      default: 'Not all required fields are entered correctly.',
-    });
-    error_message += "\n'" + invalid_form_fields(editForm).join("'\n'") + "'";
-    errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
   }
-}
-
-const { form, setFields, isSubmitting, createSubmitHandler, reset } = createForm({
-  onSubmit: _processForm,
-});
-
-const formSubmit = createSubmitHandler({
-  onSubmit: _processForm,
-});
-
-export const show = async (enclosureId, cb) => {
-  // Anonymous (Async) functions always as first!!
-  (async () => {
-    // Load all doors and webcams
-    await Promise.all([
-      fetchButtons(
-        false,
-        (data) =>
-          (doors = data.map((item) => {
-            return { value: item.id, text: item.name };
-          })),
-      ),
-      fetchWebcams(
-        false,
-        (data) =>
-          (webcams = data.map((item) => {
-            return { value: item.id, text: item.name };
-          })),
-      ),
-    ]);
-
-    // If ID is given, load existing data
-    if (enclosureId) {
-      await fetchEnclosures(enclosureId, (data) => {
-        data.doors = data.doors.map((item) => {
-          return item.id;
-        });
-        data.webcams = data.webcams.map((item) => {
-          return item.id;
+
+  const { form, setFields, isSubmitting, createSubmitHandler, reset } = createForm({
+    onSubmit: _processForm,
+  });
+
+  const formSubmit = createSubmitHandler({
+    onSubmit: _processForm,
+  });
+
+  export const show = async (enclosureId, cb) => {
+    // Anonymous (Async) functions always as first!!
+    (async () => {
+      // Load all doors and webcams
+      await Promise.all([
+        fetchButtons(
+          false,
+          (data) =>
+            (doors = data.map((item) => {
+              return { value: item.id, text: item.name };
+            })),
+        ),
+        fetchWebcams(
+          false,
+          (data) =>
+            (webcams = data.map((item) => {
+              return { value: item.id, text: item.name };
+            })),
+        ),
+      ]);
+
+      // If ID is given, load existing data
+      if (enclosureId) {
+        await fetchEnclosures(enclosureId, (data) => {
+          data.doors = data.doors.map((item) => {
+            return item.id;
+          });
+          data.webcams = data.webcams.map((item) => {
+            return item.id;
+          });
+          $formData = data;
         });
-        $formData = data;
-      });
-      setFields($formData);
-    }
+        setFields($formData);
+      }
 
-    // Loading done
-    loading = false;
-  })();
+      // Loading done
+      loading = false;
+    })();
 
-  // Reset form validation
-  reset();
-  $formData = formToJSON(editForm);
-  validated = false;
+    // Reset form validation
+    reset();
+    $formData = formToJSON(editForm);
+    validated = false;
 
-  // Toggle loading div
-  loading = true;
+    // Toggle loading div
+    loading = true;
 
-  // Show the modal
-  wrapper_show();
-};
+    // Show the modal
+    wrapper_show();
+  };
 
-export const hide = () => {
-  // Delay the loading div
-  setTimeout(() => {
-    loading = false;
-  }, 1000);
+  export const hide = () => {
+    // Delay the loading div
+    setTimeout(() => {
+      loading = false;
+    }, 1000);
 
-  // Hide modal
-  wrapper_hide();
-};
+    // Hide modal
+    wrapper_hide();
+  };
 
-onMount(() => {
-  editForm.setAttribute('novalidate', 'novalidate');
-});
+  onMount(() => {
+    editForm.setAttribute('novalidate', 'novalidate');
+  });
 </script>
 
 <ModalForm bind:show="{wrapper_show}" bind:hide="{wrapper_hide}" {loading}>
diff --git a/gui/modals/EventFormModal.svelte b/gui/modals/EventFormModal.svelte
index 96a6ca6aa..e84b82701 100644
--- a/gui/modals/EventFormModal.svelte
+++ b/gui/modals/EventFormModal.svelte
@@ -1,182 +1,182 @@
 <script>
-import { onMount, createEventDispatcher } from 'svelte';
-import { writable } from 'svelte/store';
-import { _, date } from 'svelte-i18n';
-import { createForm } from 'felte';
+  import { onMount, createEventDispatcher } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { _, date } from 'svelte-i18n';
+  import { createForm } from 'felte';
 
-import { fetchCalendarEvents, updateCalendarEvent } from '../providers/api';
-import { successNotification, errorNotification } from '../providers/notification-provider';
-import { formToJSON, invalid_form_fields } from '../helpers/form-helpers';
+  import { fetchCalendarEvents, updateCalendarEvent } from '../providers/api';
+  import { successNotification, errorNotification } from '../providers/notification-provider';
+  import { formToJSON, invalid_form_fields } from '../helpers/form-helpers';
 
-import ModalForm from '../user-controls/ModalForm.svelte';
-import FormGroup from '../components/form/FormGroup.svelte';
-import Field from '../components/form/Field.svelte';
-import Helper from '../components/form/Helper.svelte';
-import Select from '../components/form/Select.svelte';
-import WysiwygArea from '../components/form/WysiwygArea.svelte';
+  import ModalForm from '../user-controls/ModalForm.svelte';
+  import FormGroup from '../components/form/FormGroup.svelte';
+  import Field from '../components/form/Field.svelte';
+  import Helper from '../components/form/Helper.svelte';
+  import Select from '../components/form/Select.svelte';
+  import WysiwygArea from '../components/form/WysiwygArea.svelte';
 
-let wrapper_show;
-let wrapper_hide;
-let loading = false;
-let validated = false;
+  let wrapper_show;
+  let wrapper_hide;
+  let loading = false;
+  let validated = false;
 
-let repeat = false;
-let formData = writable({});
-let mode = 'reminder';
+  let repeat = false;
+  let formData = writable({});
+  let mode = 'reminder';
 
-let editForm;
+  let editForm;
 
-const event_periods = [
-  {
-    text:
-      mode === 'repeat'
-        ? $_('calendar.event.periods.no_repeat', { default: 'No repeat' })
-        : $_('calendar.event.periods.no_reminder', { default: 'No reminder' }),
-    value: '_',
-  },
-  {
-    text: $_('calendar.event.periods.days', { default: 'Days' }),
-    value: 'daily',
-  },
-  {
-    text: $_('calendar.event.periods.weeks', { default: 'Weeks' }),
-    value: 'weekly',
-  },
-  {
-    text: $_('calendar.event.periods.months', { default: 'Months' }),
-    value: 'monthly',
-  },
-  {
-    text: $_('calendar.event.periods.years', { default: 'Years' }),
-    value: 'yearly',
-  },
-];
+  const event_periods = [
+    {
+      text:
+        mode === 'repeat'
+          ? $_('calendar.event.periods.no_repeat', { default: 'No repeat' })
+          : $_('calendar.event.periods.no_reminder', { default: 'No reminder' }),
+      value: '_',
+    },
+    {
+      text: $_('calendar.event.periods.days', { default: 'Days' }),
+      value: 'daily',
+    },
+    {
+      text: $_('calendar.event.periods.weeks', { default: 'Weeks' }),
+      value: 'weekly',
+    },
+    {
+      text: $_('calendar.event.periods.months', { default: 'Months' }),
+      value: 'monthly',
+    },
+    {
+      text: $_('calendar.event.periods.years', { default: 'Years' }),
+      value: 'yearly',
+    },
+  ];
 
-const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-const successAction = () => {
-  dispatch('save');
-};
+  const successAction = () => {
+    dispatch('save');
+  };
 
-const uselessEnterEnd = /<br[^>]*><\/p>$/gm;
-const _processForm = async (values, context) => {
-  validated = true;
+  const uselessEnterEnd = /<br[^>]*><\/p>$/gm;
+  const _processForm = async (values, context) => {
+    validated = true;
 
-  if (context.form.checkValidity()) {
-    loading = true;
-    values = formToJSON(editForm);
+    if (context.form.checkValidity()) {
+      loading = true;
+      values = formToJSON(editForm);
 
-    delete values.value;
+      delete values.value;
 
-    if (!repeat) {
-      delete values.interval;
-    }
+      if (!repeat) {
+        delete values.interval;
+      }
 
-    values.description = values.description.replace(uselessEnterEnd, `<\/p>`);
-    values.dtstart /= 1000;
-    values.dtend /= 1000;
+      values.description = values.description.replace(uselessEnterEnd, `<\/p>`);
+      values.dtstart /= 1000;
+      values.dtend /= 1000;
 
-    try {
-      // Post data
-      await updateCalendarEvent(values, (data) => (values = data));
-      // Notifify OK!
-      successNotification(
-        $_('calendar.event.settings.save.ok.message', {
-          default: "Event ''{name}'' is updated",
-          values: { name: values.summary },
-        }),
-        $_('notification.form.save.ok.title', { default: 'Save OK' }),
-      );
+      try {
+        // Post data
+        await updateCalendarEvent(values, (data) => (values = data));
+        // Notifify OK!
+        successNotification(
+          $_('calendar.event.settings.save.ok.message', {
+            default: "Event ''{name}'' is updated",
+            values: { name: values.summary },
+          }),
+          $_('notification.form.save.ok.title', { default: 'Save OK' }),
+        );
 
-      // Done, close window
-      hide();
+        // Done, close window
+        hide();
 
-      // Signal the save callback. This will relead the calendar
-      successAction();
-    } catch (error) {
-      // Some kind of an error
-      loading = false;
-      errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
-    } finally {
-      // Cleanup
-      validated = false;
+        // Signal the save callback. This will relead the calendar
+        successAction();
+      } catch (error) {
+        // Some kind of an error
+        loading = false;
+        errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
+      } finally {
+        // Cleanup
+        validated = false;
+      }
+    } else {
+      let error_message = $_('calendar.event.settings.save.error.required_fields', {
+        default: 'Not all required fields are entered correctly.',
+      });
+      error_message += "\n'" + invalid_form_fields(editForm).join("'\n'") + "'";
+      errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
     }
-  } else {
-    let error_message = $_('calendar.event.settings.save.error.required_fields', {
-      default: 'Not all required fields are entered correctly.',
-    });
-    error_message += "\n'" + invalid_form_fields(editForm).join("'\n'") + "'";
-    errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
-  }
-};
+  };
 
-const { form, setFields, isSubmitting, createSubmitHandler, reset } = createForm({
-  onSubmit: _processForm,
-});
+  const { form, setFields, isSubmitting, createSubmitHandler, reset } = createForm({
+    onSubmit: _processForm,
+  });
 
-const formSubmit = createSubmitHandler({
-  onSubmit: _processForm,
-});
+  const formSubmit = createSubmitHandler({
+    onSubmit: _processForm,
+  });
 
-export const show = (eventData, cb) => {
-  // Anonymous (Async) functions always as first!!
-  (async () => {
-    // If ID is given, load existing data
-    if (eventData.id) {
-      loading = true;
-      await fetchCalendarEvents(eventData.id, (data) => {
-        // Use miliseconds
-        data.dtstart *= 1000;
-        data.dtend *= 1000;
-        data.freq = data.freq ? data.freq : '_';
-        $formData = data;
-      });
-      setFields($formData);
-      repeat = $formData.freq !== '_';
-      // Loading done
-      loading = false;
+  export const show = (eventData, cb) => {
+    // Anonymous (Async) functions always as first!!
+    (async () => {
+      // If ID is given, load existing data
+      if (eventData.id) {
+        loading = true;
+        await fetchCalendarEvents(eventData.id, (data) => {
+          // Use miliseconds
+          data.dtstart *= 1000;
+          data.dtend *= 1000;
+          data.freq = data.freq ? data.freq : '_';
+          $formData = data;
+        });
+        setFields($formData);
+        repeat = $formData.freq !== '_';
+        // Loading done
+        loading = false;
+      }
+    })();
+
+    if (eventData.mode) {
+      mode = eventData.mode;
+    } else {
+      mode = 'reminder';
     }
-  })();
 
-  if (eventData.mode) {
-    mode = eventData.mode;
-  } else {
-    mode = 'reminder';
-  }
+    repeat = false;
 
-  repeat = false;
+    // Reset form validation
+    reset();
+    validated = false;
+    let now = Date.now();
+    $formData = {
+      dtstart: eventData.start ? Date.parse(eventData.start) : now,
+      dtend: eventData.end ? Date.parse(eventData.end) : now + 86400000,
+      description: '',
+      freq: '_',
+      repeatend: 2,
+      ...eventData,
+    };
+    setFields($formData);
 
-  // Reset form validation
-  reset();
-  validated = false;
-  let now = Date.now();
-  $formData = {
-    dtstart: eventData.start ? Date.parse(eventData.start) : now,
-    dtend: eventData.end ? Date.parse(eventData.end) : now + 86400000,
-    description: '',
-    freq: '_',
-    repeatend: 2,
-    ...eventData,
+    // Show the modal
+    wrapper_show();
   };
-  setFields($formData);
 
-  // Show the modal
-  wrapper_show();
-};
-
-export const hide = () => {
-  // Delay the loading div
-  setTimeout(() => {
-    loading = false;
-  }, 1000);
+  export const hide = () => {
+    // Delay the loading div
+    setTimeout(() => {
+      loading = false;
+    }, 1000);
 
-  // Hide modal
-  wrapper_hide();
-};
+    // Hide modal
+    wrapper_hide();
+  };
 
-onMount(() => {
-  editForm.setAttribute('novalidate', 'novalidate');
-});
+  onMount(() => {
+    editForm.setAttribute('novalidate', 'novalidate');
+  });
 </script>
 
 <ModalForm bind:show="{wrapper_show}" bind:hide="{wrapper_hide}" {loading}>
diff --git a/gui/modals/LoadingModal.svelte b/gui/modals/LoadingModal.svelte
index a19123465..d872c9fa3 100644
--- a/gui/modals/LoadingModal.svelte
+++ b/gui/modals/LoadingModal.svelte
@@ -1,23 +1,23 @@
 <script>
-import { Modal } from '@keenmate/svelte-adminlte';
+  import { Modal } from '@keenmate/svelte-adminlte';
 
-import { _ } from 'svelte-i18n';
+  import { _ } from 'svelte-i18n';
 
-let wrapper_show;
-let wrapper_hide;
-let message;
+  let wrapper_show;
+  let wrapper_hide;
+  let message;
 
-export const show = () => {
-  wrapper_show();
-};
+  export const show = () => {
+    wrapper_show();
+  };
 
-export const hide = () => {
-  wrapper_hide();
-};
+  export const hide = () => {
+    wrapper_hide();
+  };
 
-export const setMessage = (msg) => {
-  message = msg;
-};
+  export const setMessage = (msg) => {
+    message = msg;
+  };
 </script>
 
 <Modal center bind:show="{wrapper_show}" bind:hide="{wrapper_hide}">
diff --git a/gui/modals/LoginFormModal.svelte b/gui/modals/LoginFormModal.svelte
index 56733a73f..19c8dfa97 100644
--- a/gui/modals/LoginFormModal.svelte
+++ b/gui/modals/LoginFormModal.svelte
@@ -1,69 +1,69 @@
 <script>
-import { Modal, ModalCloseButton } from '@keenmate/svelte-adminlte';
-import { onMount } from 'svelte';
-import { successNotification, errorNotification } from '../providers/notification-provider';
+  import { Modal, ModalCloseButton } from '@keenmate/svelte-adminlte';
+  import { onMount } from 'svelte';
+  import { successNotification, errorNotification } from '../providers/notification-provider';
 
-import { _ } from 'svelte-i18n';
-import { createForm } from 'felte';
+  import { _ } from 'svelte-i18n';
+  import { createForm } from 'felte';
 
-import Field from '../components/form/Field.svelte';
-import Helper from '../components/form/Helper.svelte';
-import { doLogin } from '../stores/authentication';
+  import Field from '../components/form/Field.svelte';
+  import Helper from '../components/form/Helper.svelte';
+  import { doLogin } from '../stores/authentication';
 
-let wrapper_show;
-let wrapper_hide;
-let validated = false;
-let login_error = false;
+  let wrapper_show;
+  let wrapper_hide;
+  let validated = false;
+  let login_error = false;
 
-let editForm;
+  let editForm;
 
-const _processForm = async (values, context) => {
-  validated = true;
-  login_error = false;
-  if (context.form.checkValidity()) {
-    let login = await doLogin(values.username, values.password);
-    if (login) {
-      successNotification(
-        $_('notification.login.message.ok', { default: 'You are successfully logged in.' }),
-        $_('notification.login.title', { default: 'Login' }),
-      );
-      hide();
-    } else {
-      errorNotification(
-        $_('notification.login.message.error', { derfault: 'Sorry, but login is invalid' }),
-        $_('notification.login.title', { default: 'Login' }),
-      );
-      login_error = true;
+  const _processForm = async (values, context) => {
+    validated = true;
+    login_error = false;
+    if (context.form.checkValidity()) {
+      let login = await doLogin(values.username, values.password);
+      if (login) {
+        successNotification(
+          $_('notification.login.message.ok', { default: 'You are successfully logged in.' }),
+          $_('notification.login.title', { default: 'Login' }),
+        );
+        hide();
+      } else {
+        errorNotification(
+          $_('notification.login.message.error', { derfault: 'Sorry, but login is invalid' }),
+          $_('notification.login.title', { default: 'Login' }),
+        );
+        login_error = true;
+      }
+      validated = false;
     }
-    validated = false;
-  }
-};
+  };
 
-const { form, isSubmitting, createSubmitHandler, reset } = createForm({
-  onSubmit: _processForm,
-});
+  const { form, isSubmitting, createSubmitHandler, reset } = createForm({
+    onSubmit: _processForm,
+  });
 
-const formSubmit = createSubmitHandler({
-  onSubmit: _processForm,
-});
+  const formSubmit = createSubmitHandler({
+    onSubmit: _processForm,
+  });
 
-export const show = () => {
-  reset();
-  validated = false;
-  wrapper_show();
+  export const show = () => {
+    reset();
+    validated = false;
+    wrapper_show();
 
-  setTimeout(() => {
-    document.querySelector('form input[name="username"]').focus();
-  }, 650);
-};
+    setTimeout(() => {
+      document.querySelector('form input[name="username"]').focus();
+    }, 650);
+  };
 
-export const hide = () => {
-  wrapper_hide();
-};
+  export const hide = () => {
+    wrapper_hide();
+  };
 
-onMount(() => {
-  editForm.setAttribute('novalidate', 'novalidate');
-});
+  onMount(() => {
+    editForm.setAttribute('novalidate', 'novalidate');
+  });
 </script>
 
 <Modal center bind:show="{wrapper_show}" bind:hide="{wrapper_hide}">
diff --git a/gui/modals/MessageModal.svelte b/gui/modals/MessageModal.svelte
index 518d103dc..37be6ff93 100644
--- a/gui/modals/MessageModal.svelte
+++ b/gui/modals/MessageModal.svelte
@@ -1,186 +1,186 @@
 <script>
-import { onMount, createEventDispatcher } from 'svelte';
-import { writable } from 'svelte/store';
-import { _ } from 'svelte-i18n';
-import { createForm } from 'felte';
-
-import {
-  fetchNotificationMessageTypes,
-  fetchNotificationMessages,
-  updateNotificationMessage,
-  fetchNotificationServices,
-} from '../providers/api';
-import { template_sensor_type_icon } from '../helpers/icon-helpers';
-import { successNotification, errorNotification } from '../providers/notification-provider';
-import { formToJSON, invalid_form_fields } from '../helpers/form-helpers';
-
-import ModalForm from '../user-controls/ModalForm.svelte';
-import Field from '../components/form/Field.svelte';
-import Helper from '../components/form/Helper.svelte';
-import Select from '../components/form/Select.svelte';
-import Switch from '../components/form/Switch.svelte';
-import TextArea from '../components/form/TextArea.svelte';
-import FormGroup from '../components/form/FormGroup.svelte';
-
-let wrapper_show;
-let wrapper_hide;
-let loading = false;
-let validated = false;
-
-let message_types = [];
-let services = [];
-let placeholders = [];
-
-let formData = writable({});
-
-let editForm;
-
-let enabled_services = [];
-
-const updatePlaceholders = (message_type) => {
-  let message = message_types.filter((item) => {
-    return item.value === message_type;
-  });
+  import { onMount, createEventDispatcher } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { _ } from 'svelte-i18n';
+  import { createForm } from 'felte';
+
+  import {
+    fetchNotificationMessageTypes,
+    fetchNotificationMessages,
+    updateNotificationMessage,
+    fetchNotificationServices,
+  } from '../providers/api';
+  import { template_sensor_type_icon } from '../helpers/icon-helpers';
+  import { successNotification, errorNotification } from '../providers/notification-provider';
+  import { formToJSON, invalid_form_fields } from '../helpers/form-helpers';
+
+  import ModalForm from '../user-controls/ModalForm.svelte';
+  import Field from '../components/form/Field.svelte';
+  import Helper from '../components/form/Helper.svelte';
+  import Select from '../components/form/Select.svelte';
+  import Switch from '../components/form/Switch.svelte';
+  import TextArea from '../components/form/TextArea.svelte';
+  import FormGroup from '../components/form/FormGroup.svelte';
+
+  let wrapper_show;
+  let wrapper_hide;
+  let loading = false;
+  let validated = false;
+
+  let message_types = [];
+  let services = [];
+  let placeholders = [];
+
+  let formData = writable({});
+
+  let editForm;
+
+  let enabled_services = [];
+
+  const updatePlaceholders = (message_type) => {
+    let message = message_types.filter((item) => {
+      return item.value === message_type;
+    });
 
-  if (message && message.length === 1) {
-    placeholders = Object.keys(message[0].placeholder)
-      .sort()
-      .map((item) => {
-        return { key: item, value: message[0].placeholder[item] };
+    if (message && message.length === 1) {
+      placeholders = Object.keys(message[0].placeholder)
+        .sort()
+        .map((item) => {
+          return { key: item, value: message[0].placeholder[item] };
+        });
+    } else {
+      placeholders = [];
+    }
+  };
+
+  const toggleService = (service_id) => {
+    if (enabled_services.indexOf(service_id) === -1) {
+      // Enable
+      enabled_services.push(service_id);
+    } else {
+      // Disable
+      enabled_services.splice(enabled_services.indexOf(service_id), 1);
+    }
+    enabled_services = enabled_services; // This is needed to make Svelte aware of new data and reactively update it
+  };
+
+  const dispatch = createEventDispatcher();
+
+  const successAction = () => {
+    dispatch('save');
+  };
+
+  const _processForm = async (values, context) => {
+    validated = true;
+
+    if (context.form.checkValidity()) {
+      loading = true;
+      values = formToJSON(editForm);
+
+      // Delete generated attributes from object
+      delete values.duration;
+      delete values.length;
+
+      try {
+        // Post data
+        await updateNotificationMessage(values, (data) => (values = data));
+
+        // Notifify OK!
+        successNotification(
+          $_('messages.settings.save.ok.message', {
+            default: "Message ''{name}'' is updated",
+            values: { name: values.name },
+          }),
+          $_('notification.form.save.ok.title', { default: 'Save OK' }),
+        );
+
+        // Done, close window
+        hide();
+
+        // Signal the save callback
+        successAction();
+
+        // TODO: Somehow, either the save signal callback or here, we have to reload the buttons
+      } catch (error) {
+        // Some kind of an error
+        loading = false;
+        errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
+      } finally {
+        // Cleanup
+        validated = false;
+      }
+    } else {
+      let error_message = $_('messages.settings.save.error.required_fields', {
+        default: 'Not all required fields are entered correctly.',
       });
-  } else {
-    placeholders = [];
-  }
-};
-
-const toggleService = (service_id) => {
-  if (enabled_services.indexOf(service_id) === -1) {
-    // Enable
-    enabled_services.push(service_id);
-  } else {
-    // Disable
-    enabled_services.splice(enabled_services.indexOf(service_id), 1);
-  }
-  enabled_services = enabled_services; // This is needed to make Svelte aware of new data and reactively update it
-};
-
-const dispatch = createEventDispatcher();
-
-const successAction = () => {
-  dispatch('save');
-};
-
-const _processForm = async (values, context) => {
-  validated = true;
-
-  if (context.form.checkValidity()) {
-    loading = true;
-    values = formToJSON(editForm);
-
-    // Delete generated attributes from object
-    delete values.duration;
-    delete values.length;
-
-    try {
-      // Post data
-      await updateNotificationMessage(values, (data) => (values = data));
-
-      // Notifify OK!
-      successNotification(
-        $_('messages.settings.save.ok.message', {
-          default: "Message ''{name}'' is updated",
-          values: { name: values.name },
-        }),
-        $_('notification.form.save.ok.title', { default: 'Save OK' }),
+      error_message += "\n'" + invalid_form_fields(editForm).join("'\n'") + "'";
+      errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
+    }
+  };
+
+  const { form, setFields, isSubmitting, createSubmitHandler, reset } = createForm({
+    onSubmit: _processForm,
+  });
+
+  const formSubmit = createSubmitHandler({
+    onSubmit: _processForm,
+  });
+
+  export const show = (messageId, cb) => {
+    // Anonymous (Async) functions always as first!!
+    (async () => {
+      // Load all avaliable hardware
+      await fetchNotificationMessageTypes(
+        (data) =>
+          (message_types = data.map((item) => {
+            return { value: item.type, text: item.name, placeholder: item.placeholders };
+          })),
       );
 
-      // Done, close window
-      hide();
+      // Load all the services
+      await fetchNotificationServices(null, (data) => (services = data));
 
-      // Signal the save callback
-      successAction();
+      // If ID is given, load existing data
+      if (messageId) {
+        await fetchNotificationMessages(messageId, (data) => ($formData = data));
+        setFields($formData);
+        enabled_services = $formData.services.map((item) => {
+          return item.id;
+        });
+      }
 
-      // TODO: Somehow, either the save signal callback or here, we have to reload the buttons
-    } catch (error) {
-      // Some kind of an error
+      // Loading done
       loading = false;
-      errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
-    } finally {
-      // Cleanup
-      validated = false;
-    }
-  } else {
-    let error_message = $_('messages.settings.save.error.required_fields', {
-      default: 'Not all required fields are entered correctly.',
-    });
-    error_message += "\n'" + invalid_form_fields(editForm).join("'\n'") + "'";
-    errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
-  }
-};
-
-const { form, setFields, isSubmitting, createSubmitHandler, reset } = createForm({
-  onSubmit: _processForm,
-});
-
-const formSubmit = createSubmitHandler({
-  onSubmit: _processForm,
-});
-
-export const show = (messageId, cb) => {
-  // Anonymous (Async) functions always as first!!
-  (async () => {
-    // Load all avaliable hardware
-    await fetchNotificationMessageTypes(
-      (data) =>
-        (message_types = data.map((item) => {
-          return { value: item.type, text: item.name, placeholder: item.placeholders };
-        })),
-    );
-
-    // Load all the services
-    await fetchNotificationServices(null, (data) => (services = data));
-
-    // If ID is given, load existing data
-    if (messageId) {
-      await fetchNotificationMessages(messageId, (data) => ($formData = data));
-      setFields($formData);
-      enabled_services = $formData.services.map((item) => {
-        return item.id;
-      });
-    }
+    })();
 
-    // Loading done
-    loading = false;
-  })();
+    // Reset form validation
+    reset();
+    enabled_services = [];
+    $formData = formToJSON(editForm);
+    validated = false;
 
-  // Reset form validation
-  reset();
-  enabled_services = [];
-  $formData = formToJSON(editForm);
-  validated = false;
-
-  // Toggle loading div
-  loading = true;
+    // Toggle loading div
+    loading = true;
 
-  // Show the modal
-  wrapper_show();
-};
+    // Show the modal
+    wrapper_show();
+  };
 
-export const hide = () => {
-  // Delay the loading div
-  setTimeout(() => {
-    loading = false;
-  }, 1000);
+  export const hide = () => {
+    // Delay the loading div
+    setTimeout(() => {
+      loading = false;
+    }, 1000);
 
-  // Hide modal
-  wrapper_hide();
-};
+    // Hide modal
+    wrapper_hide();
+  };
 
-onMount(() => {
-  editForm.setAttribute('novalidate', 'novalidate');
-});
+  onMount(() => {
+    editForm.setAttribute('novalidate', 'novalidate');
+  });
 
-$: updatePlaceholders($formData.type);
+  $: updatePlaceholders($formData.type);
 </script>
 
 <ModalForm bind:show="{wrapper_show}" bind:hide="{wrapper_hide}" {loading}>
diff --git a/gui/modals/PlaylistFormModal.svelte b/gui/modals/PlaylistFormModal.svelte
index 62b0a4cea..0cf925eb1 100644
--- a/gui/modals/PlaylistFormModal.svelte
+++ b/gui/modals/PlaylistFormModal.svelte
@@ -1,144 +1,144 @@
 <script>
-import { onMount, createEventDispatcher } from 'svelte';
-import { writable } from 'svelte/store';
-import { _ } from 'svelte-i18n';
-import { createForm } from 'felte';
-
-import { fetchAudiofiles, fetchPlaylists, updatePlaylist } from '../providers/api';
-import { successNotification, errorNotification } from '../providers/notification-provider';
-import { formToJSON, invalid_form_fields } from '../helpers/form-helpers';
-
-import ModalForm from '../user-controls/ModalForm.svelte';
-import Field from '../components/form/Field.svelte';
-import Helper from '../components/form/Helper.svelte';
-import Select from '../components/form/Select.svelte';
-import Switch from '../components/form/Switch.svelte';
-import Slider from '../components/form/Slider.svelte';
-
-let wrapper_show;
-let wrapper_hide;
-let loading = false;
-let validated = false;
-
-let songs = [];
-let formData = writable({});
-
-let editForm;
-
-const formatter = (value) => {
-  return $_('audio.playlists.settings.volume.formatter', {
-    default: 'Volume level {value}',
-    values: { value: value },
-  });
-};
-
-const dispatch = createEventDispatcher();
+  import { onMount, createEventDispatcher } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { _ } from 'svelte-i18n';
+  import { createForm } from 'felte';
+
+  import { fetchAudiofiles, fetchPlaylists, updatePlaylist } from '../providers/api';
+  import { successNotification, errorNotification } from '../providers/notification-provider';
+  import { formToJSON, invalid_form_fields } from '../helpers/form-helpers';
+
+  import ModalForm from '../user-controls/ModalForm.svelte';
+  import Field from '../components/form/Field.svelte';
+  import Helper from '../components/form/Helper.svelte';
+  import Select from '../components/form/Select.svelte';
+  import Switch from '../components/form/Switch.svelte';
+  import Slider from '../components/form/Slider.svelte';
+
+  let wrapper_show;
+  let wrapper_hide;
+  let loading = false;
+  let validated = false;
+
+  let songs = [];
+  let formData = writable({});
+
+  let editForm;
+
+  const formatter = (value) => {
+    return $_('audio.playlists.settings.volume.formatter', {
+      default: 'Volume level {value}',
+      values: { value: value },
+    });
+  };
+
+  const dispatch = createEventDispatcher();
+
+  const successAction = () => {
+    dispatch('save');
+  };
+
+  const _processForm = async (values, context) => {
+    validated = true;
+
+    if (context.form.checkValidity()) {
+      loading = true;
+      values = formToJSON(editForm);
+
+      // Delete generated attributes from object
+      delete values.duration;
+      delete values.length;
+
+      try {
+        // Post data
+        await updatePlaylist(values, (data) => (values = data));
+        // Notifify OK!
+        successNotification(
+          $_('audio.playlists.settings.save.ok.message', {
+            default: "Playlist ''{name}'' is updated",
+            values: { name: values.name },
+          }),
+          $_('notification.form.save.ok.title', { default: 'Save OK' }),
+        );
+
+        // Done, close window
+        hide();
+
+        // Signal the save callback
+        successAction();
+
+        // TODO: Somehow, either the save signal callback or here, we have to reload the buttons
+      } catch (error) {
+        // Some kind of an error
+        loading = false;
+        errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
+      } finally {
+        // Cleanup
+        validated = false;
+      }
+    } else {
+      let error_message = $_('audio.playlists.settings.save.error.required_fields', {
+        default: 'Not all required fields are entered correctly.',
+      });
+      error_message += "\n'" + invalid_form_fields(editForm).join("'\n'") + "'";
+      errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
+    }
+  };
 
-const successAction = () => {
-  dispatch('save');
-};
+  const { form, setFields, isSubmitting, createSubmitHandler, reset } = createForm({
+    onSubmit: _processForm,
+  });
 
-const _processForm = async (values, context) => {
-  validated = true;
+  const formSubmit = createSubmitHandler({
+    onSubmit: _processForm,
+  });
 
-  if (context.form.checkValidity()) {
-    loading = true;
-    values = formToJSON(editForm);
-
-    // Delete generated attributes from object
-    delete values.duration;
-    delete values.length;
-
-    try {
-      // Post data
-      await updatePlaylist(values, (data) => (values = data));
-      // Notifify OK!
-      successNotification(
-        $_('audio.playlists.settings.save.ok.message', {
-          default: "Playlist ''{name}'' is updated",
-          values: { name: values.name },
-        }),
-        $_('notification.form.save.ok.title', { default: 'Save OK' }),
+  export const show = (playlistId, cb) => {
+    // Anonymous (Async) functions always as first!!
+    (async () => {
+      // Load all avaliable hardware
+      await fetchAudiofiles(
+        (data) =>
+          (songs = data.map((item) => {
+            return { value: item.id, text: item.name + '(' + item.filename.split('/').pop() + ')' };
+          })),
       );
 
-      // Done, close window
-      hide();
-
-      // Signal the save callback
-      successAction();
+      // If ID is given, load existing data
+      if (playlistId) {
+        await fetchPlaylists(playlistId, (data) => ($formData = data));
+        setFields($formData);
+      }
 
-      // TODO: Somehow, either the save signal callback or here, we have to reload the buttons
-    } catch (error) {
-      // Some kind of an error
+      // Loading done
       loading = false;
-      errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
-    } finally {
-      // Cleanup
-      validated = false;
-    }
-  } else {
-    let error_message = $_('audio.playlists.settings.save.error.required_fields', {
-      default: 'Not all required fields are entered correctly.',
-    });
-    error_message += "\n'" + invalid_form_fields(editForm).join("'\n'") + "'";
-    errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
-  }
-};
-
-const { form, setFields, isSubmitting, createSubmitHandler, reset } = createForm({
-  onSubmit: _processForm,
-});
-
-const formSubmit = createSubmitHandler({
-  onSubmit: _processForm,
-});
-
-export const show = (playlistId, cb) => {
-  // Anonymous (Async) functions always as first!!
-  (async () => {
-    // Load all avaliable hardware
-    await fetchAudiofiles(
-      (data) =>
-        (songs = data.map((item) => {
-          return { value: item.id, text: item.name + '(' + item.filename.split('/').pop() + ')' };
-        })),
-    );
-
-    // If ID is given, load existing data
-    if (playlistId) {
-      await fetchPlaylists(playlistId, (data) => ($formData = data));
-      setFields($formData);
-    }
-
-    // Loading done
-    loading = false;
-  })();
+    })();
 
-  // Reset form validation
-  reset();
-  $formData = formToJSON(editForm);
-  validated = false;
+    // Reset form validation
+    reset();
+    $formData = formToJSON(editForm);
+    validated = false;
 
-  // Toggle loading div
-  loading = true;
+    // Toggle loading div
+    loading = true;
 
-  // Show the modal
-  wrapper_show();
-};
+    // Show the modal
+    wrapper_show();
+  };
 
-export const hide = () => {
-  // Delay the loading div
-  setTimeout(() => {
-    loading = false;
-  }, 1000);
+  export const hide = () => {
+    // Delay the loading div
+    setTimeout(() => {
+      loading = false;
+    }, 1000);
 
-  // Hide modal
-  wrapper_hide();
-};
+    // Hide modal
+    wrapper_hide();
+  };
 
-onMount(() => {
-  editForm.setAttribute('novalidate', 'novalidate');
-});
+  onMount(() => {
+    editForm.setAttribute('novalidate', 'novalidate');
+  });
 </script>
 
 <ModalForm bind:show="{wrapper_show}" bind:hide="{wrapper_hide}" {loading}>
diff --git a/gui/modals/RelayFormModal.svelte b/gui/modals/RelayFormModal.svelte
index 596a45655..5c6488199 100644
--- a/gui/modals/RelayFormModal.svelte
+++ b/gui/modals/RelayFormModal.svelte
@@ -1,152 +1,152 @@
 <script>
-import { onMount, createEventDispatcher } from 'svelte';
-import { writable } from 'svelte/store';
-import { _ } from 'svelte-i18n';
-import { createForm } from 'felte';
+  import { onMount, createEventDispatcher } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { _ } from 'svelte-i18n';
+  import { createForm } from 'felte';
 
-import { fetchRelays, fetchRelaysHardware, updateRelay } from '../providers/api';
-import { successNotification, errorNotification } from '../providers/notification-provider';
-import { formToJSON, invalid_form_fields } from '../helpers/form-helpers';
+  import { fetchRelays, fetchRelaysHardware, updateRelay } from '../providers/api';
+  import { successNotification, errorNotification } from '../providers/notification-provider';
+  import { formToJSON, invalid_form_fields } from '../helpers/form-helpers';
 
-import ModalForm from '../user-controls/ModalForm.svelte';
-import Field from '../components/form/Field.svelte';
-import Helper from '../components/form/Helper.svelte';
-import Select from '../components/form/Select.svelte';
-import Switch from '../components/form/Switch.svelte';
+  import ModalForm from '../user-controls/ModalForm.svelte';
+  import Field from '../components/form/Field.svelte';
+  import Helper from '../components/form/Helper.svelte';
+  import Select from '../components/form/Select.svelte';
+  import Switch from '../components/form/Switch.svelte';
 
-let wrapper_show;
-let wrapper_hide;
-let loading = false;
-let validated = false;
+  let wrapper_show;
+  let wrapper_hide;
+  let loading = false;
+  let validated = false;
 
-let hardware = [];
+  let hardware = [];
 
-let calibration = false;
-let hardware_type = null;
-let formData = writable({});
+  let calibration = false;
+  let hardware_type = null;
+  let formData = writable({});
 
-let editForm;
+  let editForm;
 
-const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-const successAction = () => {
-  dispatch('save');
-};
+  const successAction = () => {
+    dispatch('save');
+  };
 
-const hardwareType = (hardware) => {
-  hardware_type = hardware;
-  if (hardware_type === 'brightpi-dimmer') {
-    // Change to a fixed default value
-    editForm.elements['address'].value = 'fixed';
-  }
-  calibration = hardware_type.endsWith('-dimmer');
-};
-
-const _processForm = async (values, context) => {
-  validated = true;
-
-  if (context.form.checkValidity()) {
-    loading = true;
-    values = formToJSON(editForm);
-    values.address += '';
-
-    delete values.value;
-    delete values.dimmer;
-
-    // If all items of the calibration object are empty, then reset the complete calibration object.
-    if (!Object.values(values.calibration).some(Boolean)) {
-      values.calibration = {};
+  const hardwareType = (hardware) => {
+    hardware_type = hardware;
+    if (hardware_type === 'brightpi-dimmer') {
+      // Change to a fixed default value
+      editForm.elements['address'].value = 'fixed';
     }
-
-    try {
-      // Post data
-      await updateRelay(values, (data) => (values = data));
-      // Notifify OK!
-      successNotification(
-        $_('relays.settings.save.ok.message', {
-          default: "Relay ''{name}'' is updated",
-          values: { name: values.name },
-        }),
-        $_('notification.form.save.ok.title', { default: 'Save OK' }),
+    calibration = hardware_type.endsWith('-dimmer');
+  };
+
+  const _processForm = async (values, context) => {
+    validated = true;
+
+    if (context.form.checkValidity()) {
+      loading = true;
+      values = formToJSON(editForm);
+      values.address += '';
+
+      delete values.value;
+      delete values.dimmer;
+
+      // If all items of the calibration object are empty, then reset the complete calibration object.
+      if (!Object.values(values.calibration).some(Boolean)) {
+        values.calibration = {};
+      }
+
+      try {
+        // Post data
+        await updateRelay(values, (data) => (values = data));
+        // Notifify OK!
+        successNotification(
+          $_('relays.settings.save.ok.message', {
+            default: "Relay ''{name}'' is updated",
+            values: { name: values.name },
+          }),
+          $_('notification.form.save.ok.title', { default: 'Save OK' }),
+        );
+
+        // Done, close window
+        hide();
+
+        // Signal the save callback
+        successAction();
+
+        // TODO: Somehow, either the save signal callback or here, we have to reload the buttons
+      } catch (error) {
+        // Some kind of an error
+        loading = false;
+        errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
+      } finally {
+        validated = false;
+      }
+    } else {
+      let error_message = $_('relays.settings.save.error.required_fields', {
+        default: 'Not all required fields are entered correctly.',
+      });
+      error_message += "\n'" + invalid_form_fields(editForm).join("'\n'") + "'";
+      errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
+    }
+  };
+
+  const { form, setFields, isSubmitting, createSubmitHandler, reset } = createForm({
+    onSubmit: _processForm,
+  });
+
+  const formSubmit = createSubmitHandler({
+    onSubmit: _processForm,
+  });
+
+  export const show = (relayId, cb) => {
+    // Anonymous (Async) functions always as first!!
+    (async () => {
+      // Load all avaliable hardware
+      await fetchRelaysHardware(
+        (data) =>
+          (hardware = data.map((item) => {
+            return { value: item.hardware, text: item.name };
+          })),
       );
 
-      // Done, close window
-      hide();
+      // If ID is given, load existing data
+      if (relayId) {
+        await fetchRelays(relayId, (data) => ($formData = data));
+        setFields($formData);
+      }
 
-      // Signal the save callback
-      successAction();
-
-      // TODO: Somehow, either the save signal callback or here, we have to reload the buttons
-    } catch (error) {
-      // Some kind of an error
+      // Loading done
       loading = false;
-      errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
-    } finally {
-      validated = false;
-    }
-  } else {
-    let error_message = $_('relays.settings.save.error.required_fields', {
-      default: 'Not all required fields are entered correctly.',
-    });
-    error_message += "\n'" + invalid_form_fields(editForm).join("'\n'") + "'";
-    errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
-  }
-};
-
-const { form, setFields, isSubmitting, createSubmitHandler, reset } = createForm({
-  onSubmit: _processForm,
-});
-
-const formSubmit = createSubmitHandler({
-  onSubmit: _processForm,
-});
-
-export const show = (relayId, cb) => {
-  // Anonymous (Async) functions always as first!!
-  (async () => {
-    // Load all avaliable hardware
-    await fetchRelaysHardware(
-      (data) =>
-        (hardware = data.map((item) => {
-          return { value: item.hardware, text: item.name };
-        })),
-    );
-
-    // If ID is given, load existing data
-    if (relayId) {
-      await fetchRelays(relayId, (data) => ($formData = data));
-      setFields($formData);
-    }
+    })();
 
-    // Loading done
-    loading = false;
-  })();
+    // Reset form validation
+    reset();
+    $formData = formToJSON(editForm);
+    validated = false;
 
-  // Reset form validation
-  reset();
-  $formData = formToJSON(editForm);
-  validated = false;
-
-  // Toggle loading div
-  loading = true;
+    // Toggle loading div
+    loading = true;
 
-  // Show the modal
-  wrapper_show();
-};
+    // Show the modal
+    wrapper_show();
+  };
 
-export const hide = () => {
-  // Delay the loading div
-  setTimeout(() => {
-    loading = false;
-  }, 1000);
+  export const hide = () => {
+    // Delay the loading div
+    setTimeout(() => {
+      loading = false;
+    }, 1000);
 
-  // Hide modal
-  wrapper_hide();
-};
+    // Hide modal
+    wrapper_hide();
+  };
 
-onMount(() => {
-  editForm.setAttribute('novalidate', 'novalidate');
-});
+  onMount(() => {
+    editForm.setAttribute('novalidate', 'novalidate');
+  });
 </script>
 
 <ModalForm bind:show="{wrapper_show}" bind:hide="{wrapper_hide}" {loading}>
diff --git a/gui/modals/SensorFormModal.svelte b/gui/modals/SensorFormModal.svelte
index 28820f901..21efc6599 100644
--- a/gui/modals/SensorFormModal.svelte
+++ b/gui/modals/SensorFormModal.svelte
@@ -1,165 +1,165 @@
 <script>
-import { onMount, createEventDispatcher } from 'svelte';
-import { writable } from 'svelte/store';
-import { _ } from 'svelte-i18n';
-import { createForm } from 'felte';
-import { fetchSensors, fetchSensorsHardware, updateSensor } from '../providers/api';
-import { successNotification, errorNotification } from '../providers/notification-provider';
-import { formToJSON, invalid_form_fields } from '../helpers/form-helpers';
-
-import ModalForm from '../user-controls/ModalForm.svelte';
-import Field from '../components/form/Field.svelte';
-import Helper from '../components/form/Helper.svelte';
-import Select from '../components/form/Select.svelte';
-import Switch from '../components/form/Switch.svelte';
-
-let wrapper_show;
-let wrapper_hide;
-let loading = false;
-let validated = false;
-
-let hardware = [];
-
-let calibration = true; // Calibration is always enabled due to offset setting
-let hardware_type = null;
-let sensor_type = null;
-
-let sensor_types = [];
-
-let ccs811_compensation_sensors = [];
-let formData = writable({});
-
-let editForm;
-
-const dispatch = createEventDispatcher();
-
-const successAction = () => {
-  dispatch('save');
-};
-
-const hardwareType = (device) => {
-  hardware_type = device;
-  if (hardware_type === 'css811' && ccs811_compensation_sensors.length === 0) {
-    fetchSensors(
-      'temperature',
-      (data) =>
-        (ccs811_compensation_sensors = data.map((item) => {
-          return { value: item.id, text: item.name };
-        })),
-    );
-  }
-  sensor_types = [];
-  hardware.forEach((item) => {
-    if (item.value === device) {
-      sensor_types = item.types.map((sensor_type) => {
-        return { value: sensor_type, text: sensor_type };
+  import { onMount, createEventDispatcher } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { _ } from 'svelte-i18n';
+  import { createForm } from 'felte';
+  import { fetchSensors, fetchSensorsHardware, updateSensor } from '../providers/api';
+  import { successNotification, errorNotification } from '../providers/notification-provider';
+  import { formToJSON, invalid_form_fields } from '../helpers/form-helpers';
+
+  import ModalForm from '../user-controls/ModalForm.svelte';
+  import Field from '../components/form/Field.svelte';
+  import Helper from '../components/form/Helper.svelte';
+  import Select from '../components/form/Select.svelte';
+  import Switch from '../components/form/Switch.svelte';
+
+  let wrapper_show;
+  let wrapper_hide;
+  let loading = false;
+  let validated = false;
+
+  let hardware = [];
+
+  let calibration = true; // Calibration is always enabled due to offset setting
+  let hardware_type = null;
+  let sensor_type = null;
+
+  let sensor_types = [];
+
+  let ccs811_compensation_sensors = [];
+  let formData = writable({});
+
+  let editForm;
+
+  const dispatch = createEventDispatcher();
+
+  const successAction = () => {
+    dispatch('save');
+  };
+
+  const hardwareType = (device) => {
+    hardware_type = device;
+    if (hardware_type === 'css811' && ccs811_compensation_sensors.length === 0) {
+      fetchSensors(
+        'temperature',
+        (data) =>
+          (ccs811_compensation_sensors = data.map((item) => {
+            return { value: item.id, text: item.name };
+          })),
+      );
+    }
+    sensor_types = [];
+    hardware.forEach((item) => {
+      if (item.value === device) {
+        sensor_types = item.types.map((sensor_type) => {
+          return { value: sensor_type, text: sensor_type };
+        });
+      }
+    });
+    if (!$formData.id) {
+      $formData.type = '';
+    }
+  };
+
+  const _processForm = async (values, context) => {
+    validated = true;
+
+    if (context.form.checkValidity()) {
+      loading = true;
+      values = formToJSON(editForm);
+      values.address += '';
+
+      delete values.value;
+
+      try {
+        // Post data
+        await updateSensor(values, (data) => (values = data));
+        // Notifify OK!
+        successNotification(
+          $_('sensors.settings.save.ok.message', {
+            default: "Sensor ''{name}'' is updated",
+            values: { name: values.name },
+          }),
+          $_('notification.form.save.ok.title', { default: 'Save OK' }),
+        );
+
+        // Done, close window
+        hide();
+
+        // Signal the save callback
+        successAction();
+
+        // TODO: Somehow, either the save signal callback or here, we have to reload the buttons
+      } catch (error) {
+        // Some kind of an error
+        loading = false;
+        errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
+      } finally {
+        validated = false;
+      }
+    } else {
+      let error_message = $_('sensors.settings.fields.error', {
+        default: 'Not all required fields are entered correctly.',
       });
+      error_message += "\n'" + invalid_form_fields(editForm).join("'\n'") + "'";
+      errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
     }
+  };
+
+  const { form, data, setFields, isSubmitting, createSubmitHandler, reset } = createForm({
+    onSubmit: _processForm,
   });
-  if (!$formData.id) {
-    $formData.type = '';
-  }
-};
 
-const _processForm = async (values, context) => {
-  validated = true;
+  const formSubmit = createSubmitHandler({
+    onSubmit: _processForm,
+  });
 
-  if (context.form.checkValidity()) {
-    loading = true;
-    values = formToJSON(editForm);
-    values.address += '';
-
-    delete values.value;
-
-    try {
-      // Post data
-      await updateSensor(values, (data) => (values = data));
-      // Notifify OK!
-      successNotification(
-        $_('sensors.settings.save.ok.message', {
-          default: "Sensor ''{name}'' is updated",
-          values: { name: values.name },
-        }),
-        $_('notification.form.save.ok.title', { default: 'Save OK' }),
+  export const show = (sensorId, cb) => {
+    // Anonymous (Async) functions always as first!!
+    (async () => {
+      // Load all avaliable hardware
+      await fetchSensorsHardware(
+        (data) =>
+          (hardware = data.map((item) => {
+            return { value: item.hardware, text: item.name, types: item.types };
+          })),
       );
 
-      // Done, close window
-      hide();
-
-      // Signal the save callback
-      successAction();
+      // If ID is given, load existing data
+      if (sensorId) {
+        await fetchSensors(sensorId, (data) => ($formData = data));
+        setFields($formData);
+      }
 
-      // TODO: Somehow, either the save signal callback or here, we have to reload the buttons
-    } catch (error) {
-      // Some kind of an error
+      // Loading done
       loading = false;
-      errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
-    } finally {
-      validated = false;
-    }
-  } else {
-    let error_message = $_('sensors.settings.fields.error', {
-      default: 'Not all required fields are entered correctly.',
-    });
-    error_message += "\n'" + invalid_form_fields(editForm).join("'\n'") + "'";
-    errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
-  }
-};
-
-const { form, data, setFields, isSubmitting, createSubmitHandler, reset } = createForm({
-  onSubmit: _processForm,
-});
-
-const formSubmit = createSubmitHandler({
-  onSubmit: _processForm,
-});
-
-export const show = (sensorId, cb) => {
-  // Anonymous (Async) functions always as first!!
-  (async () => {
-    // Load all avaliable hardware
-    await fetchSensorsHardware(
-      (data) =>
-        (hardware = data.map((item) => {
-          return { value: item.hardware, text: item.name, types: item.types };
-        })),
-    );
-
-    // If ID is given, load existing data
-    if (sensorId) {
-      await fetchSensors(sensorId, (data) => ($formData = data));
-      setFields($formData);
-    }
-
-    // Loading done
-    loading = false;
-  })();
+    })();
 
-  // Reset form validation
-  reset();
-  $formData = formToJSON(editForm);
-  validated = false;
+    // Reset form validation
+    reset();
+    $formData = formToJSON(editForm);
+    validated = false;
 
-  // Toggle loading div
-  loading = true;
+    // Toggle loading div
+    loading = true;
 
-  // Show the modal
-  wrapper_show();
-};
+    // Show the modal
+    wrapper_show();
+  };
 
-export const hide = () => {
-  // Delay the loading div
-  setTimeout(() => {
-    loading = false;
-  }, 1000);
+  export const hide = () => {
+    // Delay the loading div
+    setTimeout(() => {
+      loading = false;
+    }, 1000);
 
-  // Hide modal
-  wrapper_hide();
-};
+    // Hide modal
+    wrapper_hide();
+  };
 
-onMount(() => {
-  editForm.setAttribute('novalidate', 'novalidate');
-});
+  onMount(() => {
+    editForm.setAttribute('novalidate', 'novalidate');
+  });
 </script>
 
 <ModalForm bind:show="{wrapper_show}" bind:hide="{wrapper_hide}" {loading}>
diff --git a/gui/modals/ServiceModal.svelte b/gui/modals/ServiceModal.svelte
index b8974a7a0..215c4847e 100644
--- a/gui/modals/ServiceModal.svelte
+++ b/gui/modals/ServiceModal.svelte
@@ -1,152 +1,152 @@
 <script>
-import { onMount, createEventDispatcher } from 'svelte';
-import { writable } from 'svelte/store';
-import { _ } from 'svelte-i18n';
-import { createForm } from 'felte';
-
-import {
-  fetchNotificationServiceTypes,
-  fetchNotificationServices,
-  updateNotificationService,
-  fetchDisplayTypes,
-} from '../providers/api';
-import { successNotification, errorNotification } from '../providers/notification-provider';
-import { formToJSON, invalid_form_fields } from '../helpers/form-helpers';
-
-import ModalForm from '../user-controls/ModalForm.svelte';
-import Field from '../components/form/Field.svelte';
-import Helper from '../components/form/Helper.svelte';
-import Select from '../components/form/Select.svelte';
-import Switch from '../components/form/Switch.svelte';
-
-let wrapper_show;
-let wrapper_hide;
-let loading = false;
-let validated = false;
-
-let service_types = [];
-let display_types = [];
-
-let formData = writable({});
-
-let editForm;
-
-const dispatch = createEventDispatcher();
-
-const successAction = () => {
-  dispatch('save');
-};
-
-const _processForm = async (values, context) => {
-  validated = true;
-
-  if (context.form.checkValidity()) {
-    loading = true;
-    values = formToJSON(editForm);
-
-    // Delete generated attributes from object
-    delete values.duration;
-    delete values.length;
-
-    try {
-      // Post data
-      await updateNotificationService(values, (data) => (values = data));
-
-      // Notifify OK!
-      successNotification(
-        $_('services.settings.save.ok.message', {
-          default: "Service ''{name}'' is updated",
-          values: { name: values.name },
-        }),
-        $_('notification.form.save.ok.title', { default: 'Save OK' }),
+  import { onMount, createEventDispatcher } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { _ } from 'svelte-i18n';
+  import { createForm } from 'felte';
+
+  import {
+    fetchNotificationServiceTypes,
+    fetchNotificationServices,
+    updateNotificationService,
+    fetchDisplayTypes,
+  } from '../providers/api';
+  import { successNotification, errorNotification } from '../providers/notification-provider';
+  import { formToJSON, invalid_form_fields } from '../helpers/form-helpers';
+
+  import ModalForm from '../user-controls/ModalForm.svelte';
+  import Field from '../components/form/Field.svelte';
+  import Helper from '../components/form/Helper.svelte';
+  import Select from '../components/form/Select.svelte';
+  import Switch from '../components/form/Switch.svelte';
+
+  let wrapper_show;
+  let wrapper_hide;
+  let loading = false;
+  let validated = false;
+
+  let service_types = [];
+  let display_types = [];
+
+  let formData = writable({});
+
+  let editForm;
+
+  const dispatch = createEventDispatcher();
+
+  const successAction = () => {
+    dispatch('save');
+  };
+
+  const _processForm = async (values, context) => {
+    validated = true;
+
+    if (context.form.checkValidity()) {
+      loading = true;
+      values = formToJSON(editForm);
+
+      // Delete generated attributes from object
+      delete values.duration;
+      delete values.length;
+
+      try {
+        // Post data
+        await updateNotificationService(values, (data) => (values = data));
+
+        // Notifify OK!
+        successNotification(
+          $_('services.settings.save.ok.message', {
+            default: "Service ''{name}'' is updated",
+            values: { name: values.name },
+          }),
+          $_('notification.form.save.ok.title', { default: 'Save OK' }),
+        );
+
+        // Done, close window
+        hide();
+
+        // Signal the save callback
+        successAction();
+
+        // TODO: Somehow, either the save signal callback or here, we have to reload the buttons
+      } catch (error) {
+        // Some kind of an error
+        loading = false;
+        errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
+      } finally {
+        // Cleanup
+        validated = false;
+      }
+    } else {
+      let error_message = $_('services.settings.save.error.required_fields', {
+        default: 'Not all required fields are entered correctly.',
+      });
+      error_message += "\n'" + invalid_form_fields(editForm).join("'\n'") + "'";
+      errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
+    }
+  };
+
+  const { form, setFields, isSubmitting, createSubmitHandler, reset } = createForm({
+    onSubmit: _processForm,
+  });
+
+  const formSubmit = createSubmitHandler({
+    onSubmit: _processForm,
+  });
+
+  export const show = (serviceId, cb) => {
+    // Anonymous (Async) functions always as first!!
+    (async () => {
+      // Load all avaliable hardware
+      await fetchNotificationServiceTypes(
+        (data) =>
+          (service_types = data.map((item) => {
+            return { value: item.type, text: item.name };
+          })),
       );
 
-      // Done, close window
-      hide();
+      // Load display hardware
+      await fetchDisplayTypes(
+        (data) =>
+          (display_types = data.map((item) => {
+            return { value: item.hardware, text: item.name };
+          })),
+      );
 
-      // Signal the save callback
-      successAction();
+      // If ID is given, load existing data
+      if (serviceId) {
+        await fetchNotificationServices(serviceId, (data) => ($formData = data));
+        setFields($formData);
+      }
 
-      // TODO: Somehow, either the save signal callback or here, we have to reload the buttons
-    } catch (error) {
-      // Some kind of an error
+      // Loading done
       loading = false;
-      errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
-    } finally {
-      // Cleanup
-      validated = false;
-    }
-  } else {
-    let error_message = $_('services.settings.save.error.required_fields', {
-      default: 'Not all required fields are entered correctly.',
-    });
-    error_message += "\n'" + invalid_form_fields(editForm).join("'\n'") + "'";
-    errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
-  }
-};
-
-const { form, setFields, isSubmitting, createSubmitHandler, reset } = createForm({
-  onSubmit: _processForm,
-});
-
-const formSubmit = createSubmitHandler({
-  onSubmit: _processForm,
-});
-
-export const show = (serviceId, cb) => {
-  // Anonymous (Async) functions always as first!!
-  (async () => {
-    // Load all avaliable hardware
-    await fetchNotificationServiceTypes(
-      (data) =>
-        (service_types = data.map((item) => {
-          return { value: item.type, text: item.name };
-        })),
-    );
-
-    // Load display hardware
-    await fetchDisplayTypes(
-      (data) =>
-        (display_types = data.map((item) => {
-          return { value: item.hardware, text: item.name };
-        })),
-    );
-
-    // If ID is given, load existing data
-    if (serviceId) {
-      await fetchNotificationServices(serviceId, (data) => ($formData = data));
-      setFields($formData);
-    }
-
-    // Loading done
-    loading = false;
-  })();
+    })();
 
-  // Reset form validation
-  reset();
-  $formData = formToJSON(editForm);
-  validated = false;
+    // Reset form validation
+    reset();
+    $formData = formToJSON(editForm);
+    validated = false;
 
-  // Toggle loading div
-  loading = true;
+    // Toggle loading div
+    loading = true;
 
-  // Show the modal
-  wrapper_show();
-};
+    // Show the modal
+    wrapper_show();
+  };
 
-export const hide = () => {
-  // Delay the loading div
-  setTimeout(() => {
-    loading = false;
-  }, 1000);
+  export const hide = () => {
+    // Delay the loading div
+    setTimeout(() => {
+      loading = false;
+    }, 1000);
 
-  // Hide modal
-  wrapper_hide();
-};
+    // Hide modal
+    wrapper_hide();
+  };
 
-onMount(() => {
-  editForm.setAttribute('novalidate', 'novalidate');
-});
+  onMount(() => {
+    editForm.setAttribute('novalidate', 'novalidate');
+  });
 </script>
 
 <ModalForm bind:show="{wrapper_show}" bind:hide="{wrapper_hide}" {loading}>
diff --git a/gui/modals/WeatherFormModal.svelte b/gui/modals/WeatherFormModal.svelte
index 446d0034e..d29789301 100644
--- a/gui/modals/WeatherFormModal.svelte
+++ b/gui/modals/WeatherFormModal.svelte
@@ -1,112 +1,112 @@
 <script>
-import { onMount, createEventDispatcher } from 'svelte';
-import { writable } from 'svelte/store';
-import { _ } from 'svelte-i18n';
-import { createForm } from 'felte';
-
-import { isDay } from '../stores/terrariumpi';
-import { fetchSystemSettings, updateSystemSettings } from '../providers/api';
-import { formToJSON, invalid_form_fields } from '../helpers/form-helpers';
-import { successNotification, errorNotification } from '../providers/notification-provider';
+  import { onMount, createEventDispatcher } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { _ } from 'svelte-i18n';
+  import { createForm } from 'felte';
+
+  import { isDay } from '../stores/terrariumpi';
+  import { fetchSystemSettings, updateSystemSettings } from '../providers/api';
+  import { formToJSON, invalid_form_fields } from '../helpers/form-helpers';
+  import { successNotification, errorNotification } from '../providers/notification-provider';
+
+  import ModalForm from '../user-controls/ModalForm.svelte';
+  import Field from '../components/form/Field.svelte';
+  import Helper from '../components/form/Helper.svelte';
+
+  let wrapper_show;
+  let wrapper_hide;
+  let loading = false;
+  let validated = false;
+
+  let formData = writable({});
+
+  let editForm;
+
+  const dispatch = createEventDispatcher();
+
+  const successAction = () => {
+    dispatch('save');
+  };
+
+  const _processForm = async (values, context) => {
+    validated = true;
+
+    if (context.form.checkValidity()) {
+      loading = true;
+      values = formToJSON(editForm);
+
+      try {
+        // Post data
+        await updateSystemSettings(values);
+        // Notifify OK!
+        successNotification(
+          $_('weather.settings.save.ok.message', { default: 'The weather setting is saved.' }),
+          $_('notification.form.save.ok.title', { default: 'Save OK' }),
+        );
+
+        // Done, close window
+        hide();
+
+        // Signal the save callback
+        successAction();
+
+        // TODO: Somehow, either the save signal callback or here, we have to reload the buttons
+      } catch (error) {
+        // Some kind of an error
+        loading = false;
+        errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
+      } finally {
+        validated = false;
+      }
+    } else {
+      let error_message = $_('weather.settings.fields.error', {
+        default: 'Not all required fields are entered correctly.',
+      });
+      error_message += "\n'" + invalid_form_fields(editForm).join("'\n'") + "'";
+      errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
+    }
+  };
 
-import ModalForm from '../user-controls/ModalForm.svelte';
-import Field from '../components/form/Field.svelte';
-import Helper from '../components/form/Helper.svelte';
+  const { form, setFields, isSubmitting, createSubmitHandler, reset } = createForm({
+    onSubmit: _processForm,
+  });
 
-let wrapper_show;
-let wrapper_hide;
-let loading = false;
-let validated = false;
+  const formSubmit = createSubmitHandler({
+    onSubmit: _processForm,
+  });
 
-let formData = writable({});
+  export const show = () => {
+    // Anonymous (Async) functions always as first!!
+    (async () => {
+      await fetchSystemSettings('weather_source', (data) => ($formData = { weather_source: data.value }));
+      setFields($formData);
 
-let editForm;
+      // Loading done
+      loading = false;
+    })();
 
-const dispatch = createEventDispatcher();
+    // Reset form validation
+    reset();
+    $formData = formToJSON(editForm);
+    validated = false;
 
-const successAction = () => {
-  dispatch('save');
-};
+    // Toggle loading div
+    loading = true;
 
-const _processForm = async (values, context) => {
-  validated = true;
+    // Show the modal
+    wrapper_show();
+  };
 
-  if (context.form.checkValidity()) {
-    loading = true;
-    values = formToJSON(editForm);
-
-    try {
-      // Post data
-      await updateSystemSettings(values);
-      // Notifify OK!
-      successNotification(
-        $_('weather.settings.save.ok.message', { default: 'The weather setting is saved.' }),
-        $_('notification.form.save.ok.title', { default: 'Save OK' }),
-      );
-
-      // Done, close window
-      hide();
-
-      // Signal the save callback
-      successAction();
-
-      // TODO: Somehow, either the save signal callback or here, we have to reload the buttons
-    } catch (error) {
-      // Some kind of an error
+  export const hide = () => {
+    setTimeout(() => {
       loading = false;
-      errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
-    } finally {
-      validated = false;
-    }
-  } else {
-    let error_message = $_('weather.settings.fields.error', {
-      default: 'Not all required fields are entered correctly.',
-    });
-    error_message += "\n'" + invalid_form_fields(editForm).join("'\n'") + "'";
-    errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
-  }
-};
-
-const { form, setFields, isSubmitting, createSubmitHandler, reset } = createForm({
-  onSubmit: _processForm,
-});
-
-const formSubmit = createSubmitHandler({
-  onSubmit: _processForm,
-});
-
-export const show = () => {
-  // Anonymous (Async) functions always as first!!
-  (async () => {
-    await fetchSystemSettings('weather_source', (data) => ($formData = { weather_source: data.value }));
-    setFields($formData);
-
-    // Loading done
-    loading = false;
-  })();
-
-  // Reset form validation
-  reset();
-  $formData = formToJSON(editForm);
-  validated = false;
-
-  // Toggle loading div
-  loading = true;
-
-  // Show the modal
-  wrapper_show();
-};
-
-export const hide = () => {
-  setTimeout(() => {
-    loading = false;
-  }, 1000);
-  wrapper_hide();
-};
-
-onMount(() => {
-  editForm.setAttribute('novalidate', 'novalidate');
-});
+    }, 1000);
+    wrapper_hide();
+  };
+
+  onMount(() => {
+    editForm.setAttribute('novalidate', 'novalidate');
+  });
 </script>
 
 <ModalForm bind:show="{wrapper_show}" bind:hide="{wrapper_hide}" {loading}>
diff --git a/gui/modals/WebcamFormModal.svelte b/gui/modals/WebcamFormModal.svelte
index bb4a18ad9..94e207238 100644
--- a/gui/modals/WebcamFormModal.svelte
+++ b/gui/modals/WebcamFormModal.svelte
@@ -1,313 +1,313 @@
 <script>
-import { onMount, createEventDispatcher, setContext, getContext } from 'svelte';
-import { writable } from 'svelte/store';
-import { _ } from 'svelte-i18n';
-import { createForm } from 'felte';
-import L from 'leaflet';
-
-import { sensors } from '../stores/terrariumpi';
-import { fetchRelays, fetchWebcams, fetchWebcamsHardware, updateWebcam } from '../providers/api';
-import { successNotification, errorNotification } from '../providers/notification-provider';
-import { getCustomConfig } from '../config';
-import { roundToPrecision } from '../helpers/number-helpers';
-import { formToJSON, invalid_form_fields } from '../helpers/form-helpers';
-import { ApiUrl } from '../constants/urls';
-
-import WebcamMarkerModal from '../modals/WebcamMarkerModal.svelte';
-import ModalForm from '../user-controls/ModalForm.svelte';
-import Webcam from '../components/common/Webcam.svelte';
-import Field from '../components/form/Field.svelte';
-import Helper from '../components/form/Helper.svelte';
-import Select from '../components/form/Select.svelte';
-
-const settings = getCustomConfig();
-
-let wrapper_show;
-let wrapper_hide;
-let loading = false;
-let validated = false;
-
-let hardware = [];
-let relays = [];
-let webcamMap = null;
-
-let motion_settings = false; // Calibration is always enabled due to offset setting
-let hardware_type = null;
-let formData = writable({});
-
-let markerModal;
-let editForm;
-
-const rotations = [
-  { value: '0', text: $_('webcams.settings.rotation.options.degrees_0', { default: '0 degrees' }) },
-  { value: '90', text: $_('webcams.settings.rotation.options.degrees_90', { default: '90 degrees' }) },
-  { value: '180', text: $_('webcams.settings.rotation.options.degrees_180', { default: '180 degrees' }) },
-  { value: '270', text: $_('webcams.settings.rotation.options.degrees_270', { default: '270 degrees' }) },
-  { value: 'H', text: $_('webcams.settings.rotation.options.flip_h', { default: 'Flip horizontal' }) },
-  { value: 'V', text: $_('webcams.settings.rotation.options.flip_v', { default: 'Flip vertical' }) },
-];
-
-const white_balances = [
-  { value: 'off', text: $_('webcams.settings.awb.options.off', { default: 'Off' }) },
-  { value: 'auto', text: $_('webcams.settings.awb.options.auto', { default: 'Off' }) },
-  { value: 'sunlight', text: $_('webcams.settings.awb.options.sunlight', { default: 'Sunlight' }) },
-  { value: 'cloudy', text: $_('webcams.settings.awb.options.cloudy', { default: 'Cloudy' }) },
-  { value: 'shade', text: $_('webcams.settings.awb.options.shade', { default: 'Shade' }) },
-  { value: 'tungsten', text: $_('webcams.settings.awb.options.tungsten', { default: 'Tungsten' }) },
-  { value: 'fluorescent', text: $_('webcams.settings.awb.options.fluorescent', { default: 'Fluorescent' }) },
-  { value: 'incandescent', text: $_('webcams.settings.awb.options.incandescent', { default: 'Incandescent' }) },
-  { value: 'flash', text: $_('webcams.settings.awb.options.flash', { default: 'Flash' }) },
-  { value: 'horizon', text: $_('webcams.settings.awb.options.horizon', { default: 'Horizon' }) },
-  { value: 'greyworld', text: $_('webcams.settings.awb.options.greyworld', { default: 'Greyworld' }) },
-];
-
-const archiving = [
-  { value: 'disabled', text: $_('webcams.settings.archive.options.disabled', { default: 'Disabled' }) },
-  { value: 'motion', text: $_('webcams.settings.archive.options.motion', { default: 'Motion' }) },
-  { value: '60', text: $_('webcams.settings.archive.options.minute_1', { default: '1 Minute' }) },
-  { value: '300', text: $_('webcams.settings.archive.options.minute_5', { default: '5 Minutes' }) },
-  { value: '900', text: $_('webcams.settings.archive.options.minute_15', { default: '15 Minutes' }) },
-  { value: '1800', text: $_('webcams.settings.archive.options.minute_30', { default: '30 Minutes' }) },
-  { value: '3600', text: $_('webcams.settings.archive.options.hour_1', { default: 'Disabled' }) },
-  { value: '10800', text: $_('webcams.settings.archive.options.hour_3', { default: '3 Hours' }) },
-  { value: '21600', text: $_('webcams.settings.archive.options.hour_6', { default: '6 Hours' }) },
-  { value: '43200', text: $_('webcams.settings.archive.options.hour_12', { default: '12 Hours' }) },
-  { value: '86400', text: $_('webcams.settings.archive.options.day_1', { default: '1 Day' }) },
-];
-
-const { confirmModal } = getContext('confirm');
-const dispatch = createEventDispatcher();
-
-const successAction = () => {
-  dispatch('save');
-};
-
-// Dummy needed for Webcam.svelte
-setContext('loading', {
-  setLoading: (state) => {},
-});
-
-const setMarker = (data) => {
-  if (data.markerid) {
-    // Update
-    let marker = _get_marker(data.markerid);
-    marker.options.sensors = data.sensors;
-    marker._tooltip.setContent(_update_marker_tooltip(data.sensors));
-  } else {
-    // add
-    L.marker([0, 0], {
-      draggable: true,
-      icon: L.icon(webcamMap.iconOptions),
-      sensors: data.sensors,
-    })
-      .on('move', markerLocations)
-      .on('dblclick', markerModal.show)
-      .bindTooltip(_update_marker_tooltip(data.sensors), webcamMap.toolTipOptions)
-      .addTo(webcamMap.getWebcamMap());
-  }
-  markerLocations();
-};
-
-const deleteMarker = (id) => {
-  let marker = _get_marker(id);
-  if (marker) {
-    confirmModal($_('webcams.marker.delete.confirm.message'), async () => {
-      try {
-        webcamMap.getWebcamMap().removeLayer(marker);
-        markerModal.hide();
-        markerLocations();
-      } catch (e) {
-        errorNotification($_('webcams.marker.delete.error.message'), $_('notification.delete.error.title'));
-      }
-    });
-  } else {
-    errorNotification($_('webcams.marker.delete.invalid.message'), $_('notification.delete.invalid.title'));
-  }
-};
-
-const _update_marker_tooltip = (all_sensors) => {
-  return (
-    `<div><strong>${$sensors[all_sensors[0]].name}</strong><br />` +
-    all_sensors
-      .map((item) => {
-        return (
-          `${settings.units[$sensors[item].type].name.toLowerCase().slice(0, 4)} ` +
-          `${roundToPrecision($sensors[item].value)} ` +
-          `${settings.units[$sensors[item].type].value}`
-        );
+  import { onMount, createEventDispatcher, setContext, getContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { _ } from 'svelte-i18n';
+  import { createForm } from 'felte';
+  import L from 'leaflet';
+
+  import { sensors } from '../stores/terrariumpi';
+  import { fetchRelays, fetchWebcams, fetchWebcamsHardware, updateWebcam } from '../providers/api';
+  import { successNotification, errorNotification } from '../providers/notification-provider';
+  import { getCustomConfig } from '../config';
+  import { roundToPrecision } from '../helpers/number-helpers';
+  import { formToJSON, invalid_form_fields } from '../helpers/form-helpers';
+  import { ApiUrl } from '../constants/urls';
+
+  import WebcamMarkerModal from '../modals/WebcamMarkerModal.svelte';
+  import ModalForm from '../user-controls/ModalForm.svelte';
+  import Webcam from '../components/common/Webcam.svelte';
+  import Field from '../components/form/Field.svelte';
+  import Helper from '../components/form/Helper.svelte';
+  import Select from '../components/form/Select.svelte';
+
+  const settings = getCustomConfig();
+
+  let wrapper_show;
+  let wrapper_hide;
+  let loading = false;
+  let validated = false;
+
+  let hardware = [];
+  let relays = [];
+  let webcamMap = null;
+
+  let motion_settings = false; // Calibration is always enabled due to offset setting
+  let hardware_type = null;
+  let formData = writable({});
+
+  let markerModal;
+  let editForm;
+
+  const rotations = [
+    { value: '0', text: $_('webcams.settings.rotation.options.degrees_0', { default: '0 degrees' }) },
+    { value: '90', text: $_('webcams.settings.rotation.options.degrees_90', { default: '90 degrees' }) },
+    { value: '180', text: $_('webcams.settings.rotation.options.degrees_180', { default: '180 degrees' }) },
+    { value: '270', text: $_('webcams.settings.rotation.options.degrees_270', { default: '270 degrees' }) },
+    { value: 'H', text: $_('webcams.settings.rotation.options.flip_h', { default: 'Flip horizontal' }) },
+    { value: 'V', text: $_('webcams.settings.rotation.options.flip_v', { default: 'Flip vertical' }) },
+  ];
+
+  const white_balances = [
+    { value: 'off', text: $_('webcams.settings.awb.options.off', { default: 'Off' }) },
+    { value: 'auto', text: $_('webcams.settings.awb.options.auto', { default: 'Off' }) },
+    { value: 'sunlight', text: $_('webcams.settings.awb.options.sunlight', { default: 'Sunlight' }) },
+    { value: 'cloudy', text: $_('webcams.settings.awb.options.cloudy', { default: 'Cloudy' }) },
+    { value: 'shade', text: $_('webcams.settings.awb.options.shade', { default: 'Shade' }) },
+    { value: 'tungsten', text: $_('webcams.settings.awb.options.tungsten', { default: 'Tungsten' }) },
+    { value: 'fluorescent', text: $_('webcams.settings.awb.options.fluorescent', { default: 'Fluorescent' }) },
+    { value: 'incandescent', text: $_('webcams.settings.awb.options.incandescent', { default: 'Incandescent' }) },
+    { value: 'flash', text: $_('webcams.settings.awb.options.flash', { default: 'Flash' }) },
+    { value: 'horizon', text: $_('webcams.settings.awb.options.horizon', { default: 'Horizon' }) },
+    { value: 'greyworld', text: $_('webcams.settings.awb.options.greyworld', { default: 'Greyworld' }) },
+  ];
+
+  const archiving = [
+    { value: 'disabled', text: $_('webcams.settings.archive.options.disabled', { default: 'Disabled' }) },
+    { value: 'motion', text: $_('webcams.settings.archive.options.motion', { default: 'Motion' }) },
+    { value: '60', text: $_('webcams.settings.archive.options.minute_1', { default: '1 Minute' }) },
+    { value: '300', text: $_('webcams.settings.archive.options.minute_5', { default: '5 Minutes' }) },
+    { value: '900', text: $_('webcams.settings.archive.options.minute_15', { default: '15 Minutes' }) },
+    { value: '1800', text: $_('webcams.settings.archive.options.minute_30', { default: '30 Minutes' }) },
+    { value: '3600', text: $_('webcams.settings.archive.options.hour_1', { default: 'Disabled' }) },
+    { value: '10800', text: $_('webcams.settings.archive.options.hour_3', { default: '3 Hours' }) },
+    { value: '21600', text: $_('webcams.settings.archive.options.hour_6', { default: '6 Hours' }) },
+    { value: '43200', text: $_('webcams.settings.archive.options.hour_12', { default: '12 Hours' }) },
+    { value: '86400', text: $_('webcams.settings.archive.options.day_1', { default: '1 Day' }) },
+  ];
+
+  const { confirmModal } = getContext('confirm');
+  const dispatch = createEventDispatcher();
+
+  const successAction = () => {
+    dispatch('save');
+  };
+
+  // Dummy needed for Webcam.svelte
+  setContext('loading', {
+    setLoading: (state) => {},
+  });
+
+  const setMarker = (data) => {
+    if (data.markerid) {
+      // Update
+      let marker = _get_marker(data.markerid);
+      marker.options.sensors = data.sensors;
+      marker._tooltip.setContent(_update_marker_tooltip(data.sensors));
+    } else {
+      // add
+      L.marker([0, 0], {
+        draggable: true,
+        icon: L.icon(webcamMap.iconOptions),
+        sensors: data.sensors,
       })
-      .join('<br />') +
-    '</div>'
-  );
-};
-
-const _get_marker = (id) => {
-  let item = null;
-  webcamMap.getWebcamMap().eachLayer((layer) => {
-    if (item === null && layer instanceof L.Marker) {
-      if (id === layer._leaflet_id) {
-        item = layer;
-      }
+        .on('move', markerLocations)
+        .on('dblclick', markerModal.show)
+        .bindTooltip(_update_marker_tooltip(data.sensors), webcamMap.toolTipOptions)
+        .addTo(webcamMap.getWebcamMap());
     }
-  });
-  return item;
-};
-
-const markerLocations = () => {
-  let markers = [];
-  webcamMap.getWebcamMap().eachLayer((layer) => {
-    if (layer instanceof L.Marker) {
-      markers.push({
-        lat: layer.getLatLng().lat,
-        long: layer.getLatLng().lng,
-        sensors: layer.options.sensors,
+    markerLocations();
+  };
+
+  const deleteMarker = (id) => {
+    let marker = _get_marker(id);
+    if (marker) {
+      confirmModal($_('webcams.marker.delete.confirm.message'), async () => {
+        try {
+          webcamMap.getWebcamMap().removeLayer(marker);
+          markerModal.hide();
+          markerLocations();
+        } catch (e) {
+          errorNotification($_('webcams.marker.delete.error.message'), $_('notification.delete.error.title'));
+        }
       });
+    } else {
+      errorNotification($_('webcams.marker.delete.invalid.message'), $_('notification.delete.invalid.title'));
     }
+  };
+
+  const _update_marker_tooltip = (all_sensors) => {
+    return (
+      `<div><strong>${$sensors[all_sensors[0]].name}</strong><br />` +
+      all_sensors
+        .map((item) => {
+          return (
+            `${settings.units[$sensors[item].type].name.toLowerCase().slice(0, 4)} ` +
+            `${roundToPrecision($sensors[item].value)} ` +
+            `${settings.units[$sensors[item].type].value}`
+          );
+        })
+        .join('<br />') +
+      '</div>'
+    );
+  };
+
+  const _get_marker = (id) => {
+    let item = null;
+    webcamMap.getWebcamMap().eachLayer((layer) => {
+      if (item === null && layer instanceof L.Marker) {
+        if (id === layer._leaflet_id) {
+          item = layer;
+        }
+      }
+    });
+    return item;
+  };
+
+  const markerLocations = () => {
+    let markers = [];
+    webcamMap.getWebcamMap().eachLayer((layer) => {
+      if (layer instanceof L.Marker) {
+        markers.push({
+          lat: layer.getLatLng().lat,
+          long: layer.getLatLng().lng,
+          sensors: layer.options.sensors,
+        });
+      }
+    });
+    editForm.elements['markers'].value = JSON.stringify(markers);
+  };
+
+  setContext('webcamMarker', {
+    showModal: (marker) => markerModal.show(marker),
+    setMarker: (marker) => setMarker(marker),
+    deleteMarker: (marker) => deleteMarker(marker),
+    markerLocations: () => markerLocations(),
   });
-  editForm.elements['markers'].value = JSON.stringify(markers);
-};
-
-setContext('webcamMarker', {
-  showModal: (marker) => markerModal.show(marker),
-  setMarker: (marker) => setMarker(marker),
-  deleteMarker: (marker) => deleteMarker(marker),
-  markerLocations: () => markerLocations(),
-});
-
-const hardwareType = (device) => {
-  hardware_type = device;
-
-  if (!editForm.elements) {
-    return;
-  }
-
-  switch (device) {
-    case 'rpicam':
-      editForm.elements['address'].value = 'rpicam';
-      editForm.elements['width'].value = 3280;
-      editForm.elements['height'].value = 2464;
-      break;
-    case 'rpicam-live':
-      editForm.elements['address'].value = 'rpicam_live';
-      editForm.elements['width'].value = 1920;
-      editForm.elements['height'].value = 1080;
-      break;
-  }
-};
-
-const archivingCalibration = (state) => {
-  motion_settings = state === 'motion';
-};
-
-const _processForm = async (values, context) => {
-  validated = true;
-
-  if (context.form.checkValidity()) {
-    loading = true;
-    values = formToJSON(editForm);
 
-    // Make some fields exclusive string values
-    values.address += '';
-    values.rotation += '';
+  const hardwareType = (device) => {
+    hardware_type = device;
 
-    delete values.value;
+    if (!editForm.elements) {
+      return;
+    }
 
-    try {
-      values.markers = JSON.parse(values.markers);
-    } catch (error) {
-      values.markers = [];
+    switch (device) {
+      case 'rpicam':
+        editForm.elements['address'].value = 'rpicam';
+        editForm.elements['width'].value = 3280;
+        editForm.elements['height'].value = 2464;
+        break;
+      case 'rpicam-live':
+        editForm.elements['address'].value = 'rpicam_live';
+        editForm.elements['width'].value = 1920;
+        editForm.elements['height'].value = 1080;
+        break;
     }
+  };
 
-    try {
-      // Post data
-      await updateWebcam(values, (data) => (values = data));
-
-      // Notify OK!
-      successNotification(
-        $_('webcams.settings.save.ok.message', {
-          default: "Webcam ''{name}'' is updated",
-          values: { name: values.name },
-        }),
-        $_('notification.form.save.ok.title', { default: 'Save OK' }),
-      );
+  const archivingCalibration = (state) => {
+    motion_settings = state === 'motion';
+  };
 
-      // Done, close window
-      hide();
+  const _processForm = async (values, context) => {
+    validated = true;
 
-      // Signal the save callback
-      successAction();
-    } catch (error) {
-      // Some kind of an error
-      loading = false;
-      errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
-    } finally {
-      // Cleanup
-      validated = false;
-    }
-  } else {
-    let error_message = $_('webcams.settings.save.error.required_fields', {
-      default: 'Not all required fields are entered correctly.',
-    });
-    error_message += "\n'" + invalid_form_fields(editForm).join("'\n'") + "'";
-    errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
-  }
-};
-
-const { form, setFields, isSubmitting, createSubmitHandler, reset } = createForm({
-  onSubmit: _processForm,
-});
-
-const formSubmit = createSubmitHandler({
-  onSubmit: _processForm,
-});
-
-export const show = (webcamId, cb) => {
-  // Anonymous (Async) functions always as first!!
-  (async () => {
-    await fetchRelays(
-      false,
-      (data) =>
-        (relays = data.map((item) => {
-          return { value: item.hardware, text: item.name };
-        })),
-    );
-    // Load all avaliable hardware
-    await fetchWebcamsHardware(
-      (data) =>
-        (hardware = data.map((item) => {
-          return { value: item.hardware, text: item.name };
-        })),
-    );
-    // If ID is given, load existing data
-    if (webcamId) {
-      await fetchWebcams(webcamId, (data) => ($formData = data));
-      setFields($formData);
+    if (context.form.checkValidity()) {
+      loading = true;
+      values = formToJSON(editForm);
+
+      // Make some fields exclusive string values
+      values.address += '';
+      values.rotation += '';
+
+      delete values.value;
+
+      try {
+        values.markers = JSON.parse(values.markers);
+      } catch (error) {
+        values.markers = [];
+      }
+
+      try {
+        // Post data
+        await updateWebcam(values, (data) => (values = data));
+
+        // Notify OK!
+        successNotification(
+          $_('webcams.settings.save.ok.message', {
+            default: "Webcam ''{name}'' is updated",
+            values: { name: values.name },
+          }),
+          $_('notification.form.save.ok.title', { default: 'Save OK' }),
+        );
+
+        // Done, close window
+        hide();
+
+        // Signal the save callback
+        successAction();
+      } catch (error) {
+        // Some kind of an error
+        loading = false;
+        errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
+      } finally {
+        // Cleanup
+        validated = false;
+      }
+    } else {
+      let error_message = $_('webcams.settings.save.error.required_fields', {
+        default: 'Not all required fields are entered correctly.',
+      });
+      error_message += "\n'" + invalid_form_fields(editForm).join("'\n'") + "'";
+      errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
     }
+  };
 
-    // Loading done
-    loading = false;
-  })();
+  const { form, setFields, isSubmitting, createSubmitHandler, reset } = createForm({
+    onSubmit: _processForm,
+  });
 
-  // Reset form validation
-  reset();
-  $formData = formToJSON(editForm);
-  validated = false;
+  const formSubmit = createSubmitHandler({
+    onSubmit: _processForm,
+  });
+
+  export const show = (webcamId, cb) => {
+    // Anonymous (Async) functions always as first!!
+    (async () => {
+      await fetchRelays(
+        false,
+        (data) =>
+          (relays = data.map((item) => {
+            return { value: item.hardware, text: item.name };
+          })),
+      );
+      // Load all avaliable hardware
+      await fetchWebcamsHardware(
+        (data) =>
+          (hardware = data.map((item) => {
+            return { value: item.hardware, text: item.name };
+          })),
+      );
+      // If ID is given, load existing data
+      if (webcamId) {
+        await fetchWebcams(webcamId, (data) => ($formData = data));
+        setFields($formData);
+      }
 
-  // Toggle loading div
-  loading = true;
+      // Loading done
+      loading = false;
+    })();
+
+    // Reset form validation
+    reset();
+    $formData = formToJSON(editForm);
+    validated = false;
 
-  // Show the modal
-  wrapper_show();
-};
+    // Toggle loading div
+    loading = true;
 
-export const hide = () => {
-  // Hide modal
-  wrapper_hide();
-};
+    // Show the modal
+    wrapper_show();
+  };
 
-onMount(() => {
-  editForm.setAttribute('novalidate', 'novalidate');
-});
+  export const hide = () => {
+    // Hide modal
+    wrapper_hide();
+  };
+
+  onMount(() => {
+    editForm.setAttribute('novalidate', 'novalidate');
+  });
 </script>
 
 <ModalForm bind:show="{wrapper_show}" bind:hide="{wrapper_hide}" {loading}>
diff --git a/gui/modals/WebcamMarkerModal.svelte b/gui/modals/WebcamMarkerModal.svelte
index 0057a961d..bc2ab9380 100644
--- a/gui/modals/WebcamMarkerModal.svelte
+++ b/gui/modals/WebcamMarkerModal.svelte
@@ -1,70 +1,70 @@
 <script>
-import { Modal } from '@keenmate/svelte-adminlte';
-import { onMount, getContext } from 'svelte';
-import { _ } from 'svelte-i18n';
-import { createForm } from 'felte';
-
-import { errorNotification } from '../providers/notification-provider';
-import { updateSensor } from '../stores/terrariumpi';
-import { fetchSensors } from '../providers/api';
-import { formToJSON } from '../helpers/form-helpers';
-
-import Helper from '../components/form/Helper.svelte';
-import Select from '../components/form/Select.svelte';
-
-let modal;
-let editForm;
-
-let validated = false;
-let sensors = [];
-let selected = [];
-
-let edit = false;
-
-const { setMarker, deleteMarker } = getContext('webcamMarker');
-
-const _processForm = async (values, context) => {
-  validated = true;
-  if (context.form.checkValidity()) {
-    values = formToJSON(editForm);
-    setMarker(values);
-    hide();
-  } else {
-    errorNotification('Error saving markers', 'ERROR');
-  }
-};
-
-const { form, isSubmitting, createSubmitHandler } = createForm({
-  onSubmit: _processForm,
-});
-
-const formSubmit = createSubmitHandler({
-  onSubmit: _processForm,
-});
-
-export const show = (marker) => {
-  edit = marker ? true : false;
-  selected = edit ? marker.target.options.sensors : [];
-  editForm.elements['markerid'].value = edit ? marker.target._leaflet_id : '';
-
-  fetchSensors(false, (data) => {
-    sensors = data.map((item) => {
-      updateSensor(item);
-      return { value: item.id, text: item.name };
-    });
+  import { Modal } from '@keenmate/svelte-adminlte';
+  import { onMount, getContext } from 'svelte';
+  import { _ } from 'svelte-i18n';
+  import { createForm } from 'felte';
+
+  import { errorNotification } from '../providers/notification-provider';
+  import { updateSensor } from '../stores/terrariumpi';
+  import { fetchSensors } from '../providers/api';
+  import { formToJSON } from '../helpers/form-helpers';
+
+  import Helper from '../components/form/Helper.svelte';
+  import Select from '../components/form/Select.svelte';
+
+  let modal;
+  let editForm;
+
+  let validated = false;
+  let sensors = [];
+  let selected = [];
+
+  let edit = false;
+
+  const { setMarker, deleteMarker } = getContext('webcamMarker');
+
+  const _processForm = async (values, context) => {
+    validated = true;
+    if (context.form.checkValidity()) {
+      values = formToJSON(editForm);
+      setMarker(values);
+      hide();
+    } else {
+      errorNotification('Error saving markers', 'ERROR');
+    }
+  };
+
+  const { form, isSubmitting, createSubmitHandler } = createForm({
+    onSubmit: _processForm,
+  });
+
+  const formSubmit = createSubmitHandler({
+    onSubmit: _processForm,
   });
 
-  validated = false;
-  modal.show();
-};
+  export const show = (marker) => {
+    edit = marker ? true : false;
+    selected = edit ? marker.target.options.sensors : [];
+    editForm.elements['markerid'].value = edit ? marker.target._leaflet_id : '';
 
-export const hide = () => {
-  modal.hide();
-};
+    fetchSensors(false, (data) => {
+      sensors = data.map((item) => {
+        updateSensor(item);
+        return { value: item.id, text: item.name };
+      });
+    });
 
-onMount(() => {
-  editForm.setAttribute('novalidate', 'novalidate');
-});
+    validated = false;
+    modal.show();
+  };
+
+  export const hide = () => {
+    modal.hide();
+  };
+
+  onMount(() => {
+    editForm.setAttribute('novalidate', 'novalidate');
+  });
 </script>
 
 <Modal bind:this="{modal}">
diff --git a/gui/pages/About.svelte b/gui/pages/About.svelte
index 025e95749..5546ae462 100644
--- a/gui/pages/About.svelte
+++ b/gui/pages/About.svelte
@@ -1,22 +1,22 @@
 <script>
-import { onMount, onDestroy } from 'svelte';
-import { PageHeader } from '@keenmate/svelte-adminlte';
-import { _ } from 'svelte-i18n';
+  import { onMount, onDestroy } from 'svelte';
+  import { PageHeader } from '@keenmate/svelte-adminlte';
+  import { _ } from 'svelte-i18n';
 
-import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
-import { getCustomConfig } from '../config';
+  import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
+  import { getCustomConfig } from '../config';
 
-import Card from '../user-controls/Card.svelte';
+  import Card from '../user-controls/Card.svelte';
 
-let settings = getCustomConfig();
+  let settings = getCustomConfig();
 
-onMount(() => {
-  setCustomPageTitle($_('about.title', { default: 'About' }));
-});
+  onMount(() => {
+    setCustomPageTitle($_('about.title', { default: 'About' }));
+  });
 
-onDestroy(() => {
-  customPageTitleUsed.set(false);
-});
+  onDestroy(() => {
+    customPageTitleUsed.set(false);
+  });
 </script>
 
 <PageHeader>
diff --git a/gui/pages/Audiofiles.svelte b/gui/pages/Audiofiles.svelte
index ab196ff96..f6c766932 100644
--- a/gui/pages/Audiofiles.svelte
+++ b/gui/pages/Audiofiles.svelte
@@ -1,142 +1,142 @@
 <script>
-import { dayjs } from 'svelte-time';
-import duration from 'dayjs/esm/plugin/duration';
-dayjs.extend(duration);
-import { onMount, onDestroy, getContext } from 'svelte';
-import { _ } from 'svelte-i18n';
-import { PageHeader, FileInput } from '@keenmate/svelte-adminlte';
-
-import { locale } from '../locale/i18n';
-import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
-import { isAuthenticated } from '../stores/authentication';
-import { ApiUrl } from '../constants/urls';
-import { fetchAudiofiles, deleteAudioFile } from '../providers/api';
-import { formatBytes } from '../helpers/file-size-helpers';
-import { errorNotification, successNotification } from '../providers/notification-provider';
-import { isDay } from '../stores/terrariumpi';
-import { DataTablesLanguageUrl } from '../constants/urls';
-
-import Card from '../user-controls/Card.svelte';
-import Player from '../components/common/Player.svelte';
-
-let audiofiles = [];
-let loading = true;
-let dataTable;
-let fileUploader;
-let percent_completed = 0;
-
-const { confirmModal } = getContext('confirm');
-
-const loadData = async () => {
-  loading = true;
-  if (dataTable) {
-    dataTable.destroy();
-  }
-  await fetchAudiofiles((data) => (audiofiles = data));
-  dataTable = jQuery('#audio_files').DataTable({
-    language: {
-      url: `${DataTablesLanguageUrl}/${$locale}.json`,
-    },
-    columnDefs: [
-      {
-        targets: 'no-sort',
-        orderable: false,
+  import { dayjs } from 'svelte-time';
+  import duration from 'dayjs/esm/plugin/duration';
+  dayjs.extend(duration);
+  import { onMount, onDestroy, getContext } from 'svelte';
+  import { _ } from 'svelte-i18n';
+  import { PageHeader, FileInput } from '@keenmate/svelte-adminlte';
+
+  import { locale } from '../locale/i18n';
+  import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
+  import { isAuthenticated } from '../stores/authentication';
+  import { ApiUrl } from '../constants/urls';
+  import { fetchAudiofiles, deleteAudioFile } from '../providers/api';
+  import { formatBytes } from '../helpers/file-size-helpers';
+  import { errorNotification, successNotification } from '../providers/notification-provider';
+  import { isDay } from '../stores/terrariumpi';
+  import { DataTablesLanguageUrl } from '../constants/urls';
+
+  import Card from '../user-controls/Card.svelte';
+  import Player from '../components/common/Player.svelte';
+
+  let audiofiles = [];
+  let loading = true;
+  let dataTable;
+  let fileUploader;
+  let percent_completed = 0;
+
+  const { confirmModal } = getContext('confirm');
+
+  const loadData = async () => {
+    loading = true;
+    if (dataTable) {
+      dataTable.destroy();
+    }
+    await fetchAudiofiles((data) => (audiofiles = data));
+    dataTable = jQuery('#audio_files').DataTable({
+      language: {
+        url: `${DataTablesLanguageUrl}/${$locale}.json`,
       },
-    ],
-  });
-  loading = false;
-};
-
-const deleteAudiofileAction = (audiofile) => {
-  confirmModal(
-    $_('audio.files.delete.confirm.message', {
-      default: "Are you sure to delete audio file ''{name}'' ({filename})?",
-      values: { name: audiofile.name, filename: audiofile.filename },
-    }),
-    async () => {
-      try {
-        await deleteAudioFile(audiofile.id);
-        successNotification(
-          $_('audio.files.delete.ok.message', {
-            default: "The audio file ''{name}'' is deleted.",
-            values: { name: audiofile.name },
-          }),
-          $_('notification.delete.ok.title'),
-        );
-        loadData();
-      } catch (e) {
-        errorNotification(
-          $_('audio.files.delete.error.message', {
-            default: "The audio file ''{name}'' could not be deleted!\nError: {error}",
-            values: { name: audiofile.name, error: e.message },
-          }),
-          $_('notification.delete.error.title'),
-        );
-      }
-    },
-  );
-};
-
-const uploadFiles = async (files) => {
-  if (!$isAuthenticated) {
-    let error_message = $_('audio.files.settings.upload.error.nologin', { default: 'Please login to upload files.' });
-    errorNotification(error_message, $_('notification.form.upload.error.title', { default: 'Upload Error' }));
-    return;
-  }
-
-  if (!fileUploader.isValid()) {
-    let error_message = $_('audio.files.settings.save.error.invalid_file', { default: 'Invalid audio file(s)' });
-    errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
-    return;
-  }
-
-  let formData = new FormData();
-  for (let i = 0; i < files.detail.length; i++) {
-    formData.append('audiofiles', files.detail[i]);
-  }
-
-  let request = new XMLHttpRequest();
-  request.open('POST', `${ApiUrl}/api/audio/files/`);
-  request.withCredentials = true;
-
-  // upload progress event
-  request.upload.addEventListener('progress', function (e) {
-    // upload progress as percentage
-    percent_completed = (e.loaded / e.total) * 100;
-  });
+      columnDefs: [
+        {
+          targets: 'no-sort',
+          orderable: false,
+        },
+      ],
+    });
+    loading = false;
+  };
+
+  const deleteAudiofileAction = (audiofile) => {
+    confirmModal(
+      $_('audio.files.delete.confirm.message', {
+        default: "Are you sure to delete audio file ''{name}'' ({filename})?",
+        values: { name: audiofile.name, filename: audiofile.filename },
+      }),
+      async () => {
+        try {
+          await deleteAudioFile(audiofile.id);
+          successNotification(
+            $_('audio.files.delete.ok.message', {
+              default: "The audio file ''{name}'' is deleted.",
+              values: { name: audiofile.name },
+            }),
+            $_('notification.delete.ok.title'),
+          );
+          loadData();
+        } catch (e) {
+          errorNotification(
+            $_('audio.files.delete.error.message', {
+              default: "The audio file ''{name}'' could not be deleted!\nError: {error}",
+              values: { name: audiofile.name, error: e.message },
+            }),
+            $_('notification.delete.error.title'),
+          );
+        }
+      },
+    );
+  };
+
+  const uploadFiles = async (files) => {
+    if (!$isAuthenticated) {
+      let error_message = $_('audio.files.settings.upload.error.nologin', { default: 'Please login to upload files.' });
+      errorNotification(error_message, $_('notification.form.upload.error.title', { default: 'Upload Error' }));
+      return;
+    }
 
-  // request finished event
-  request.addEventListener('load', (e) => {
-    switch (request.status) {
-      case 200:
-        successNotification(
-          $_('audio.files.settings.save.ok.message', {
-            default: 'Uploaded {amount, plural, =1 {# audio file} other {# audio files}}',
-            values: { amount: files.detail.length },
-          }),
-          $_('notification.form.save.ok.title', { default: 'Save OK' }),
-        );
-        percent_completed = 0;
-        loadData();
-        break;
-      default:
-        errorNotification(request.response, $_('notification.form.save.error.title', { default: 'Save Error' }));
-        break;
+    if (!fileUploader.isValid()) {
+      let error_message = $_('audio.files.settings.save.error.invalid_file', { default: 'Invalid audio file(s)' });
+      errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
+      return;
     }
-  });
 
-  // send POST request to server
-  request.send(formData);
-};
+    let formData = new FormData();
+    for (let i = 0; i < files.detail.length; i++) {
+      formData.append('audiofiles', files.detail[i]);
+    }
+
+    let request = new XMLHttpRequest();
+    request.open('POST', `${ApiUrl}/api/audio/files/`);
+    request.withCredentials = true;
+
+    // upload progress event
+    request.upload.addEventListener('progress', function (e) {
+      // upload progress as percentage
+      percent_completed = (e.loaded / e.total) * 100;
+    });
+
+    // request finished event
+    request.addEventListener('load', (e) => {
+      switch (request.status) {
+        case 200:
+          successNotification(
+            $_('audio.files.settings.save.ok.message', {
+              default: 'Uploaded {amount, plural, =1 {# audio file} other {# audio files}}',
+              values: { amount: files.detail.length },
+            }),
+            $_('notification.form.save.ok.title', { default: 'Save OK' }),
+          );
+          percent_completed = 0;
+          loadData();
+          break;
+        default:
+          errorNotification(request.response, $_('notification.form.save.error.title', { default: 'Save Error' }));
+          break;
+      }
+    });
 
-onMount(() => {
-  setCustomPageTitle($_('audio.files.title', { default: 'Audio files' }));
-  loadData();
-});
+    // send POST request to server
+    request.send(formData);
+  };
 
-onDestroy(() => {
-  customPageTitleUsed.set(false);
-});
+  onMount(() => {
+    setCustomPageTitle($_('audio.files.title', { default: 'Audio files' }));
+    loadData();
+  });
+
+  onDestroy(() => {
+    customPageTitleUsed.set(false);
+  });
 </script>
 
 <PageHeader>
diff --git a/gui/pages/Buttons.svelte b/gui/pages/Buttons.svelte
index 36d36c95b..9029605a1 100644
--- a/gui/pages/Buttons.svelte
+++ b/gui/pages/Buttons.svelte
@@ -1,95 +1,95 @@
 <script>
-import { onMount, onDestroy, getContext, setContext } from 'svelte';
-import { PageHeader } from '@keenmate/svelte-adminlte';
-import { _ } from 'svelte-i18n';
+  import { onMount, onDestroy, getContext, setContext } from 'svelte';
+  import { PageHeader } from '@keenmate/svelte-adminlte';
+  import { _ } from 'svelte-i18n';
 
-import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
-import { fetchButtons, deleteButton, updateSystemSettings } from '../providers/api';
-import { successNotification, errorNotification } from '../providers/notification-provider';
+  import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
+  import { fetchButtons, deleteButton, updateSystemSettings } from '../providers/api';
+  import { successNotification, errorNotification } from '../providers/notification-provider';
 
-import ButtonCard from '../user-controls/ButtonCard.svelte';
+  import ButtonCard from '../user-controls/ButtonCard.svelte';
 
-let buttons = [];
+  let buttons = [];
 
-const { confirmModal } = getContext('confirm');
+  const { confirmModal } = getContext('confirm');
 
-const loadData = () => {
-  fetchButtons(false, (data) => (buttons = data));
-};
+  const loadData = () => {
+    fetchButtons(false, (data) => (buttons = data));
+  };
 
-const deleteButtonAction = (button) => {
-  confirmModal(
-    $_('buttons.delete.confirm.message', {
-      default: "Are you sure you want to delete the button ''{name}''?",
-      values: { name: button.name },
-    }),
-    async () => {
-      try {
-        await deleteButton(button.id);
-        successNotification(
-          $_('buttons.delete.ok.message', {
-            default: "The button ''{name}'' is deleted.",
-            values: { name: button.name },
-          }),
-          $_('notification.delete.ok.title', { default: 'OK' }),
-        );
-        loadData();
-      } catch (e) {
-        errorNotification(
-          $_('buttons.delete.error.message', {
-            default: "The button ''{name}'' could not be deleted!\nError: {error}",
-            values: { name: button.name, error: e.message },
-          }),
-          $_('notification.delete.error.title', { default: 'ERROR' }),
-        );
-      }
-    },
-  );
-};
+  const deleteButtonAction = (button) => {
+    confirmModal(
+      $_('buttons.delete.confirm.message', {
+        default: "Are you sure you want to delete the button ''{name}''?",
+        values: { name: button.name },
+      }),
+      async () => {
+        try {
+          await deleteButton(button.id);
+          successNotification(
+            $_('buttons.delete.ok.message', {
+              default: "The button ''{name}'' is deleted.",
+              values: { name: button.name },
+            }),
+            $_('notification.delete.ok.title', { default: 'OK' }),
+          );
+          loadData();
+        } catch (e) {
+          errorNotification(
+            $_('buttons.delete.error.message', {
+              default: "The button ''{name}'' could not be deleted!\nError: {error}",
+              values: { name: button.name, error: e.message },
+            }),
+            $_('notification.delete.error.title', { default: 'ERROR' }),
+          );
+        }
+      },
+    );
+  };
 
-const ignoreButtonAction = (button) => {
-  confirmModal(
-    $_('buttons.ignore.confirm.message', {
-      default: "Are you sure you want to ignore the button ''{name}''?",
-      values: { name: button.name },
-    }),
-    async () => {
-      try {
-        await updateSystemSettings({ exclude_ids: button.id });
-        successNotification(
-          $_('buttons.ignore.ok.message', {
-            default: "The button ''{name}'' is ignored.",
-            values: { name: button.name },
-          }),
-          $_('notification.exclude.ok.title'),
-        );
-        loadData();
-      } catch (e) {
-        errorNotification(
-          $_('buttons.ignore.error.message', {
-            default: "The button ''{name}'' could not be ignored!\nError: {error}",
-            values: { name: button.name, error: e.message },
-          }),
-          $_('notification.exclude.error.title'),
-        );
-      }
-    },
-  );
-};
+  const ignoreButtonAction = (button) => {
+    confirmModal(
+      $_('buttons.ignore.confirm.message', {
+        default: "Are you sure you want to ignore the button ''{name}''?",
+        values: { name: button.name },
+      }),
+      async () => {
+        try {
+          await updateSystemSettings({ exclude_ids: button.id });
+          successNotification(
+            $_('buttons.ignore.ok.message', {
+              default: "The button ''{name}'' is ignored.",
+              values: { name: button.name },
+            }),
+            $_('notification.exclude.ok.title'),
+          );
+          loadData();
+        } catch (e) {
+          errorNotification(
+            $_('buttons.ignore.error.message', {
+              default: "The button ''{name}'' could not be ignored!\nError: {error}",
+              values: { name: button.name, error: e.message },
+            }),
+            $_('notification.exclude.error.title'),
+          );
+        }
+      },
+    );
+  };
 
-setContext('buttonActions', {
-  deleteAction: (button) => deleteButtonAction(button),
-  ignoreAction: (button) => ignoreButtonAction(button),
-});
+  setContext('buttonActions', {
+    deleteAction: (button) => deleteButtonAction(button),
+    ignoreAction: (button) => ignoreButtonAction(button),
+  });
 
-onMount(() => {
-  setCustomPageTitle($_('buttons.title', { default: 'Buttons' }));
-  loadData();
-});
+  onMount(() => {
+    setCustomPageTitle($_('buttons.title', { default: 'Buttons' }));
+    loadData();
+  });
 
-onDestroy(() => {
-  customPageTitleUsed.set(false);
-});
+  onDestroy(() => {
+    customPageTitleUsed.set(false);
+  });
 </script>
 
 <PageHeader>
diff --git a/gui/pages/Calendar.svelte b/gui/pages/Calendar.svelte
index 502e625c5..66880a534 100644
--- a/gui/pages/Calendar.svelte
+++ b/gui/pages/Calendar.svelte
@@ -1,266 +1,266 @@
 <style>
-@import '../../node_modules/admin-lte/plugins/fullcalendar/main.min.css';
+  @import '../../node_modules/admin-lte/plugins/fullcalendar/main.min.css';
 </style>
 
 <script>
-import { dayjs } from 'svelte-time';
-import duration from 'dayjs/esm/plugin/duration';
-dayjs.extend(duration);
-import { onDestroy, onMount, getContext } from 'svelte';
-import { _ } from 'svelte-i18n';
-import { PageHeader } from '@keenmate/svelte-adminlte';
-import tippy from 'sveltejs-tippy';
-import { followCursor } from 'tippy.js';
+  import { dayjs } from 'svelte-time';
+  import duration from 'dayjs/esm/plugin/duration';
+  dayjs.extend(duration);
+  import { onDestroy, onMount, getContext } from 'svelte';
+  import { _ } from 'svelte-i18n';
+  import { PageHeader } from '@keenmate/svelte-adminlte';
+  import tippy from 'sveltejs-tippy';
+  import { followCursor } from 'tippy.js';
 
-import { locale } from '../locale/i18n';
-import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
-import { isAuthenticated } from '../stores/authentication';
-import { getCustomConfig } from '../config';
-import { ApiUrl } from '../constants/urls';
-import { fetchCalendarEvents, updateCalendarEvent, deleteCalendarEvent, downloadCalendar } from '../providers/api';
-import { successNotification, errorNotification } from '../providers/notification-provider';
+  import { locale } from '../locale/i18n';
+  import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
+  import { isAuthenticated } from '../stores/authentication';
+  import { getCustomConfig } from '../config';
+  import { ApiUrl } from '../constants/urls';
+  import { fetchCalendarEvents, updateCalendarEvent, deleteCalendarEvent, downloadCalendar } from '../providers/api';
+  import { successNotification, errorNotification } from '../providers/notification-provider';
 
-import Card from '../user-controls/Card.svelte';
-import LoginLink from '../components/common/LoginLink.svelte';
-import EventModel from '../modals/EventFormModal.svelte';
+  import Card from '../user-controls/Card.svelte';
+  import LoginLink from '../components/common/LoginLink.svelte';
+  import EventModel from '../modals/EventFormModal.svelte';
 
-let calendar;
-let loading = true;
-let showModal;
+  let calendar;
+  let loading = true;
+  let showModal;
 
-let downloading = false;
+  let downloading = false;
 
-const settings = getCustomConfig();
+  const settings = getCustomConfig();
 
-const { confirmModal } = getContext('confirm');
+  const { confirmModal } = getContext('confirm');
 
-const loadData = () => {
-  calendar.refetchEvents();
-};
+  const loadData = () => {
+    calendar.refetchEvents();
+  };
 
-const download_calendar = async () => {
-  downloading = true;
+  const download_calendar = async () => {
+    downloading = true;
 
-  const filename = 'terrariumpi_calendar.ics';
-  let ical = '';
-  await downloadCalendar((data) => (ical = data));
+    const filename = 'terrariumpi_calendar.ics';
+    let ical = '';
+    await downloadCalendar((data) => (ical = data));
 
-  const link = document.createElement('a');
-  link.href = window.URL.createObjectURL(new Blob([ical]));
-  link.download = filename;
-  link.click();
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(new Blob([ical]));
+    link.download = filename;
+    link.click();
 
-  downloading = false;
-};
+    downloading = false;
+  };
 
-const deleteCalendarEventCall = (event) => {
-  event.stopPropagation();
-  let data = JSON.parse(event.currentTarget.dataset.calendar);
-  confirmModal(
-    $_('calendar.event.delete.confirm.message', {
-      default: "Are you sure you want to delete the event ''{name}''?",
-      values: { name: data.name },
-    }),
-    async () => {
-      try {
-        await deleteCalendarEvent(data.id);
-        successNotification(
-          $_('calendar.event.delete.ok.message', {
-            default: "The event ''{name}'' is deleted.",
-            values: { name: button.name },
-          }),
-          $_('notification.delete.ok.title', { default: 'OK' }),
-        );
-        loadData();
-      } catch (e) {
-        errorNotification(
-          $_('calendar.event.delete.error.message', {
-            default: "The event ''{name}'' could not be deleted!\nError: {error}",
-            values: { name: button.name, error: e.message },
-          }),
-          $_('notification.delete.error.title', { default: 'ERROR' }),
-        );
-      }
-    },
-  );
-};
+  const deleteCalendarEventCall = (event) => {
+    event.stopPropagation();
+    let data = JSON.parse(event.currentTarget.dataset.calendar);
+    confirmModal(
+      $_('calendar.event.delete.confirm.message', {
+        default: "Are you sure you want to delete the event ''{name}''?",
+        values: { name: data.name },
+      }),
+      async () => {
+        try {
+          await deleteCalendarEvent(data.id);
+          successNotification(
+            $_('calendar.event.delete.ok.message', {
+              default: "The event ''{name}'' is deleted.",
+              values: { name: button.name },
+            }),
+            $_('notification.delete.ok.title', { default: 'OK' }),
+          );
+          loadData();
+        } catch (e) {
+          errorNotification(
+            $_('calendar.event.delete.error.message', {
+              default: "The event ''{name}'' could not be deleted!\nError: {error}",
+              values: { name: button.name, error: e.message },
+            }),
+            $_('notification.delete.error.title', { default: 'ERROR' }),
+          );
+        }
+      },
+    );
+  };
 
-const editCalendarEvent = (eventData) => {
-  showModal(eventData);
-};
+  const editCalendarEvent = (eventData) => {
+    showModal(eventData);
+  };
 
-onMount(() => {
-  setCustomPageTitle($_('calendar.title', { default: 'Calendar' }));
+  onMount(() => {
+    setCustomPageTitle($_('calendar.title', { default: 'Calendar' }));
 
-  let deleteButton = document.createElement('button');
-  deleteButton.type = 'button';
-  deleteButton.style =
-    'display:block; background-color: transparent; border: 0px; position: absolute; right:0px; top: 0px; z-index: 999';
-  deleteButton.innerHTML = '<i class="fas fa-trash-alt text-danger">';
-  deleteButton.onclick = deleteCalendarEventCall;
+    let deleteButton = document.createElement('button');
+    deleteButton.type = 'button';
+    deleteButton.style =
+      'display:block; background-color: transparent; border: 0px; position: absolute; right:0px; top: 0px; z-index: 999';
+    deleteButton.innerHTML = '<i class="fas fa-trash-alt text-danger">';
+    deleteButton.onclick = deleteCalendarEventCall;
 
-  // We use the AdminLTE compiled calendar version which has better theming..
-  calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
-    initialView: 'dayGridMonth',
-    locale: $locale.substring(0, 2),
-    headerToolbar: {
-      left: 'prev,next today',
-      center: 'title',
-      right: 'dayGridMonth,timeGridWeek,timeGridDay',
-    },
-    themeSystem: 'bootstrap',
-    events: {
-      url: `${ApiUrl}/api/calendar/`,
-    },
+    // We use the AdminLTE compiled calendar version which has better theming..
+    calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
+      initialView: 'dayGridMonth',
+      locale: $locale.substring(0, 2),
+      headerToolbar: {
+        left: 'prev,next today',
+        center: 'title',
+        right: 'dayGridMonth,timeGridWeek,timeGridDay',
+      },
+      themeSystem: 'bootstrap',
+      events: {
+        url: `${ApiUrl}/api/calendar/`,
+      },
 
-    droppable: false, // this allows things to be dropped onto the calendar !!!
-    selectable: false,
-    editable: false,
+      droppable: false, // this allows things to be dropped onto the calendar !!!
+      selectable: false,
+      editable: false,
 
-    loading: function (loading_state) {
-      loading = loading_state;
-    },
+      loading: function (loading_state) {
+        loading = loading_state;
+      },
 
-    eventMouseEnter: function (data) {
-      if ($isAuthenticated) {
-        deleteButton.setAttribute('data-calendar', JSON.stringify({ name: data.event.title, id: data.event.id }));
-        data.el.appendChild(deleteButton);
-      }
-    },
+      eventMouseEnter: function (data) {
+        if ($isAuthenticated) {
+          deleteButton.setAttribute('data-calendar', JSON.stringify({ name: data.event.title, id: data.event.id }));
+          data.el.appendChild(deleteButton);
+        }
+      },
 
-    eventMouseLeave: function (data) {
-      deleteButton.remove();
-    },
+      eventMouseLeave: function (data) {
+        deleteButton.remove();
+      },
 
-    eventDidMount: function (data) {
-      let end = data.event.end || data.event.start + 24 * 3600;
-      tippy(data.el, {
-        allowHTML: true,
-        arrow: true,
-        followCursor: 'horizontal',
-        plugins: [followCursor],
-        content:
-          '<h6 style="font-weight: bold">' +
-          data.event.title +
-          '</h6>' +
-          data.event.extendedProps.description +
-          '<strong>' +
-          $_('calendar.event.duration', { default: 'Duration' }) +
-          ':' +
-          '</strong> ' +
-          dayjs.duration(end - data.event.start).humanize(),
-      });
-    },
+      eventDidMount: function (data) {
+        let end = data.event.end || data.event.start + 24 * 3600;
+        tippy(data.el, {
+          allowHTML: true,
+          arrow: true,
+          followCursor: 'horizontal',
+          plugins: [followCursor],
+          content:
+            '<h6 style="font-weight: bold">' +
+            data.event.title +
+            '</h6>' +
+            data.event.extendedProps.description +
+            '<strong>' +
+            $_('calendar.event.duration', { default: 'Duration' }) +
+            ':' +
+            '</strong> ' +
+            dayjs.duration(end - data.event.start).humanize(),
+        });
+      },
 
-    select: function (data) {
-      if (!$isAuthenticated) {
-        calendar.unselect();
-      } else {
-        // Open modal for adding event
-        data.mode = 'repeat';
-        editCalendarEvent(data);
-      }
-    },
-    eventClick: function (data) {
-      if ($isAuthenticated) {
-        // Open modal for adding event
-        data = {
-          id: data.event.id,
-          mode: 'repeat',
-        };
-        editCalendarEvent(data);
-      }
-    },
+      select: function (data) {
+        if (!$isAuthenticated) {
+          calendar.unselect();
+        } else {
+          // Open modal for adding event
+          data.mode = 'repeat';
+          editCalendarEvent(data);
+        }
+      },
+      eventClick: function (data) {
+        if ($isAuthenticated) {
+          // Open modal for adding event
+          data = {
+            id: data.event.id,
+            mode: 'repeat',
+          };
+          editCalendarEvent(data);
+        }
+      },
 
-    eventDrop: function (data) {
-      let move = data.delta.days * (24 * 3600) + data.delta.months * (30 * 24 * 3600);
-      if ($isAuthenticated && move !== 0) {
-        (async () => {
-          let item = null;
-          await fetchCalendarEvents(data.event.id, (data) => (item = data));
-          item.dtstart += move;
-          item.dtend += move;
+      eventDrop: function (data) {
+        let move = data.delta.days * (24 * 3600) + data.delta.months * (30 * 24 * 3600);
+        if ($isAuthenticated && move !== 0) {
+          (async () => {
+            let item = null;
+            await fetchCalendarEvents(data.event.id, (data) => (item = data));
+            item.dtstart += move;
+            item.dtend += move;
 
-          if (item) {
-            try {
-              await updateCalendarEvent(item);
-              successNotification(
-                $_('calendar.event.settings.update.ok.message', {
-                  default: "The event ''{name}'' is updated.",
-                  values: { name: item.summary },
-                }),
-                $_('notification.delete.ok.title', { default: 'OK' }),
-              );
-              loadData();
-            } catch (e) {
-              errorNotification(
-                $_('calendar.event.settings.update.error.message', {
-                  default: "The event ''{name}'' could not be updated!\nError: {error}",
-                  values: { name: item.summary, error: e.message },
-                }),
-                $_('notification.delete.error.title', { default: 'ERROR' }),
-              );
+            if (item) {
+              try {
+                await updateCalendarEvent(item);
+                successNotification(
+                  $_('calendar.event.settings.update.ok.message', {
+                    default: "The event ''{name}'' is updated.",
+                    values: { name: item.summary },
+                  }),
+                  $_('notification.delete.ok.title', { default: 'OK' }),
+                );
+                loadData();
+              } catch (e) {
+                errorNotification(
+                  $_('calendar.event.settings.update.error.message', {
+                    default: "The event ''{name}'' could not be updated!\nError: {error}",
+                    values: { name: item.summary, error: e.message },
+                  }),
+                  $_('notification.delete.error.title', { default: 'ERROR' }),
+                );
+              }
             }
-          }
-        })();
-      } else {
-        data.revert();
-      }
-    },
+          })();
+        } else {
+          data.revert();
+        }
+      },
 
-    eventResize: function (data) {
-      let moveStart = data.startDelta.days * (24 * 3600) + data.startDelta.months * (30 * 24 * 3600);
-      let moveEnd = data.endDelta.days * (24 * 3600) + data.endDelta.months * (30 * 24 * 3600);
-      if ($isAuthenticated && (moveStart !== 0 || moveEnd !== 0)) {
-        (async () => {
-          let item = null;
-          await fetchCalendarEvents(data.event.id, (data) => (item = data));
-          item.dtstart += moveStart;
-          item.dtend += moveEnd;
+      eventResize: function (data) {
+        let moveStart = data.startDelta.days * (24 * 3600) + data.startDelta.months * (30 * 24 * 3600);
+        let moveEnd = data.endDelta.days * (24 * 3600) + data.endDelta.months * (30 * 24 * 3600);
+        if ($isAuthenticated && (moveStart !== 0 || moveEnd !== 0)) {
+          (async () => {
+            let item = null;
+            await fetchCalendarEvents(data.event.id, (data) => (item = data));
+            item.dtstart += moveStart;
+            item.dtend += moveEnd;
 
-          if (item) {
-            try {
-              await updateCalendarEvent(item);
-              successNotification(
-                $_('calendar.event.settings.update.ok.message', {
-                  default: "The event ''{name}'' is updated.",
-                  values: { name: item.summary },
-                }),
-                $_('notification.delete.ok.title', { default: 'OK' }),
-              );
-              loadData();
-            } catch (e) {
-              errorNotification(
-                $_('calendar.event.settings.update.error.message', {
-                  default: "The event ''{name}'' could not be updated!\nError: {error}",
-                  values: { name: item.summary, error: e.message },
-                }),
-                $_('notification.delete.error.title', { default: 'ERROR' }),
-              );
+            if (item) {
+              try {
+                await updateCalendarEvent(item);
+                successNotification(
+                  $_('calendar.event.settings.update.ok.message', {
+                    default: "The event ''{name}'' is updated.",
+                    values: { name: item.summary },
+                  }),
+                  $_('notification.delete.ok.title', { default: 'OK' }),
+                );
+                loadData();
+              } catch (e) {
+                errorNotification(
+                  $_('calendar.event.settings.update.error.message', {
+                    default: "The event ''{name}'' could not be updated!\nError: {error}",
+                    values: { name: item.summary, error: e.message },
+                  }),
+                  $_('notification.delete.error.title', { default: 'ERROR' }),
+                );
+              }
             }
-          }
-        })();
-      } else {
-        data.revert();
-      }
-    },
-  });
+          })();
+        } else {
+          data.revert();
+        }
+      },
+    });
 
-  calendar.render();
-});
+    calendar.render();
+  });
 
-onDestroy(() => {
-  calendar.destroy();
-  customPageTitleUsed.set(false);
-});
+  onDestroy(() => {
+    calendar.destroy();
+    customPageTitleUsed.set(false);
+  });
 
-$: {
-  if (calendar) {
-    calendar.setOption('selectable', $isAuthenticated);
-    calendar.setOption('editable', $isAuthenticated);
-    calendar.setOption('eventResizableFromStart', $isAuthenticated);
+  $: {
+    if (calendar) {
+      calendar.setOption('selectable', $isAuthenticated);
+      calendar.setOption('editable', $isAuthenticated);
+      calendar.setOption('eventResizableFromStart', $isAuthenticated);
+    }
   }
-}
 </script>
 
 <PageHeader>
diff --git a/gui/pages/Dashboard.svelte b/gui/pages/Dashboard.svelte
index 5efd3728d..174f7294b 100644
--- a/gui/pages/Dashboard.svelte
+++ b/gui/pages/Dashboard.svelte
@@ -14,203 +14,203 @@
 </style>
 
 <script>
-import { PageHeader, InfoBox } from '@keenmate/svelte-adminlte';
-import { _, number } from 'svelte-i18n';
-import { onMount, onDestroy, setContext } from 'svelte';
-import { dayjs } from 'svelte-time';
-import duration from 'dayjs/esm/plugin/duration';
-dayjs.extend(duration);
-
-import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
-import {
-  uptime,
-  systemLoad,
-  currentPower,
-  maxPower,
-  currentWater,
-  maxWater,
-  totalPower,
-  totalPowerCosts,
-  totalPowerDuration,
-  totalWater,
-  totalWaterCosts,
-  totalWaterDuration,
-  updateButton,
-  buttons,
-  updateSensor,
-} from '../stores/terrariumpi';
-import { uptime_format, average } from '../helpers/number-helpers';
-import { animateHourglass } from '../helpers/animation-helpers';
-import { fetchEnclosures, fetchSensors } from '../providers/api';
-import { getCustomConfig } from '../config';
-import { websocket } from '../providers/websocket';
-import { currency } from '../locale/i18n';
-import { enclosureNameSort } from '../helpers/string-helpers';
-
-import Card from '../user-controls/Card.svelte';
-import Enclosure from '../components/enclosure/Enclosure.svelte';
-import EnclosureAccordion from '../user-controls/EnclosureAccordion.svelte';
-import SensorCard from '../user-controls/SensorCard.svelte';
-import EnclosureDoorIcon from '../components/enclosure/EnclosureDoorIcon.svelte';
-
-let settings = getCustomConfig();
-let sensor_types;
-let enclosures = [];
-let loading_enclosures = settings.dashboard_mode !== 1;
-let enclosures_doors = {};
-
-const updateEnclosureDoors = (buttons) => {
-  Object.keys(enclosures_doors).map((enclosure_id) => {
-    enclosures_doors[enclosure_id].closed = enclosures_doors[enclosure_id].doors.every(
-      (doorid) => !buttons[doorid] || buttons[doorid].value === 1,
-    );
-  });
-};
+  import { PageHeader, InfoBox } from '@keenmate/svelte-adminlte';
+  import { _, number } from 'svelte-i18n';
+  import { onMount, onDestroy, setContext } from 'svelte';
+  import { dayjs } from 'svelte-time';
+  import duration from 'dayjs/esm/plugin/duration';
+  dayjs.extend(duration);
+
+  import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
+  import {
+    uptime,
+    systemLoad,
+    currentPower,
+    maxPower,
+    currentWater,
+    maxWater,
+    totalPower,
+    totalPowerCosts,
+    totalPowerDuration,
+    totalWater,
+    totalWaterCosts,
+    totalWaterDuration,
+    updateButton,
+    buttons,
+    updateSensor,
+  } from '../stores/terrariumpi';
+  import { uptime_format, average } from '../helpers/number-helpers';
+  import { animateHourglass } from '../helpers/animation-helpers';
+  import { fetchEnclosures, fetchSensors } from '../providers/api';
+  import { getCustomConfig } from '../config';
+  import { websocket } from '../providers/websocket';
+  import { currency } from '../locale/i18n';
+  import { enclosureNameSort } from '../helpers/string-helpers';
+
+  import Card from '../user-controls/Card.svelte';
+  import Enclosure from '../components/enclosure/Enclosure.svelte';
+  import EnclosureAccordion from '../user-controls/EnclosureAccordion.svelte';
+  import SensorCard from '../user-controls/SensorCard.svelte';
+  import EnclosureDoorIcon from '../components/enclosure/EnclosureDoorIcon.svelte';
+
+  let settings = getCustomConfig();
+  let sensor_types;
+  let enclosures = [];
+  let loading_enclosures = settings.dashboard_mode !== 1;
+  let enclosures_doors = {};
+
+  const updateEnclosureDoors = (buttons) => {
+    Object.keys(enclosures_doors).map((enclosure_id) => {
+      enclosures_doors[enclosure_id].closed = enclosures_doors[enclosure_id].doors.every(
+        (doorid) => !buttons[doorid] || buttons[doorid].value === 1,
+      );
+    });
+  };
 
-// Set some dummy actions, else sensor cards are crashing
-setContext('sensorActions', {
-  deleteAction: (sensor) => {},
-  ignoreAction: (sensor) => {},
-});
+  // Set some dummy actions, else sensor cards are crashing
+  setContext('sensorActions', {
+    deleteAction: (sensor) => {},
+    ignoreAction: (sensor) => {},
+  });
 
-onMount(() => {
-  // Load dashboard data
-  $websocket = { type: 'load_dashboard' };
+  onMount(() => {
+    // Load dashboard data
+    $websocket = { type: 'load_dashboard' };
+
+    // Load REST API data async
+    if (loading_enclosures) {
+      (async () => {
+        // Store data in a enclosure store
+        await fetchEnclosures(false, (data) => (enclosures = data));
+        if (Array.isArray(enclosures) && enclosures.length > 0) {
+          enclosures.map((enclosure) => {
+            enclosures_doors[enclosure.id] = {
+              doors: enclosure.doors.map((door) => {
+                updateButton({ ...door, ...{ enclosure: enclosure.id } });
+                return door.id;
+              }), // Bad hack, but we get both door updates as enclosure door updates
+              closed: true,
+            };
+          });
+        }
+        loading_enclosures = false;
+      })();
+    }
 
-  // Load REST API data async
-  if (loading_enclosures) {
     (async () => {
-      // Store data in a enclosure store
-      await fetchEnclosures(false, (data) => (enclosures = data));
-      if (Array.isArray(enclosures) && enclosures.length > 0) {
-        enclosures.map((enclosure) => {
-          enclosures_doors[enclosure.id] = {
-            doors: enclosure.doors.map((door) => {
-              updateButton({ ...door, ...{ enclosure: enclosure.id } });
-              return door.id;
-            }), // Bad hack, but we get both door updates as enclosure door updates
-            closed: true,
-          };
-        });
-      }
-      loading_enclosures = false;
-    })();
-  }
-
-  (async () => {
-    let averages = {};
-
-    await fetchSensors(false, (data) => {
-      data.map((sensor) => {
-        updateSensor(sensor);
-        if (!averages[sensor.type]) {
-          averages[sensor.type] = {
-            value: [],
-            alarm_min: [],
-            alarm_max: [],
-            limit_min: [],
-            limit_max: [],
-            error: [],
-          };
-        }
+      let averages = {};
+
+      await fetchSensors(false, (data) => {
+        data.map((sensor) => {
+          updateSensor(sensor);
+          if (!averages[sensor.type]) {
+            averages[sensor.type] = {
+              value: [],
+              alarm_min: [],
+              alarm_max: [],
+              limit_min: [],
+              limit_max: [],
+              error: [],
+            };
+          }
 
-        averages[sensor.type].error.push(sensor.error);
+          averages[sensor.type].error.push(sensor.error);
 
-        if (!sensor.exclude_avg) {
-          averages[sensor.type].value.push(sensor.value);
-          averages[sensor.type].alarm_min.push(sensor.alarm_min);
-          averages[sensor.type].alarm_max.push(sensor.alarm_max);
-          averages[sensor.type].limit_min.push(sensor.limit_min);
-          averages[sensor.type].limit_max.push(sensor.limit_max);
-        }
-      });
+          if (!sensor.exclude_avg) {
+            averages[sensor.type].value.push(sensor.value);
+            averages[sensor.type].alarm_min.push(sensor.alarm_min);
+            averages[sensor.type].alarm_max.push(sensor.alarm_max);
+            averages[sensor.type].limit_min.push(sensor.limit_min);
+            averages[sensor.type].limit_max.push(sensor.limit_max);
+          }
+        });
 
-      Object.keys(averages).map((sensor_type) => {
-        if (averages[sensor_type]['value'].length === 0) {
-          // All sensors are excluded from average. Ignore this sensor type
-          delete averages[sensor_type];
-        } else {
-          averages[sensor_type]['type'] = sensor_type;
-          averages[sensor_type]['id'] = sensor_type;
-          averages[sensor_type]['name'] = $_(`sensors.average.${sensor_type}`, { default: `Average ${sensor_type}` });
-          averages[sensor_type]['exclude_avg'] = false;
-          averages[sensor_type]['error'] =
-            averages[sensor_type]['error'].filter((item) => {
-              return item === true;
-            }).length > 0;
-
-          for (let value of ['value', 'alarm_min', 'alarm_max', 'limit_min', 'limit_max']) {
-            averages[sensor_type][value] = average(averages[sensor_type][value]);
+        Object.keys(averages).map((sensor_type) => {
+          if (averages[sensor_type]['value'].length === 0) {
+            // All sensors are excluded from average. Ignore this sensor type
+            delete averages[sensor_type];
+          } else {
+            averages[sensor_type]['type'] = sensor_type;
+            averages[sensor_type]['id'] = sensor_type;
+            averages[sensor_type]['name'] = $_(`sensors.average.${sensor_type}`, { default: `Average ${sensor_type}` });
+            averages[sensor_type]['exclude_avg'] = false;
+            averages[sensor_type]['error'] =
+              averages[sensor_type]['error'].filter((item) => {
+                return item === true;
+              }).length > 0;
+
+            for (let value of ['value', 'alarm_min', 'alarm_max', 'limit_min', 'limit_max']) {
+              averages[sensor_type][value] = average(averages[sensor_type][value]);
+            }
+            averages[sensor_type]['alarm'] =
+              averages[sensor_type]['alarm_min'] > averages[sensor_type]['value'] ||
+              averages[sensor_type]['value'] > averages[sensor_type]['alarm_max'];
           }
-          averages[sensor_type]['alarm'] =
-            averages[sensor_type]['alarm_min'] > averages[sensor_type]['value'] ||
-            averages[sensor_type]['value'] > averages[sensor_type]['alarm_max'];
-        }
-      });
+        });
 
-      sensor_types = averages;
-    });
-  })();
+        sensor_types = averages;
+      });
+    })();
 
-  setCustomPageTitle($_('dashboard.title'));
+    setCustomPageTitle($_('dashboard.title'));
 
-  // CSS Hacks :(
-  document.querySelectorAll('div.info-box div.info-box-content').forEach((item) => {
-    item.style.lineHeight = 1.2;
-  });
-  document.querySelector('.content-header').innerHTML = '';
-
-  // TODO: Make a PR for info box icon color
-  document.querySelectorAll('div.info-box span.info-box-icon').forEach((item, counter) => {
-    item.classList.remove('bg-transparent');
-    item.classList.add('elevation-1');
-    item.classList.add('float');
-    switch (counter) {
-      case 0:
-        item.classList.add('bg-secondary');
-        break;
-
-      case 1:
-        item.classList.add('bg-danger');
-        break;
-
-      case 2:
-        item.classList.add('bg-info');
-        break;
-
-      case 3:
-        item.classList.add('bg-danger');
-        break;
-
-      case 4:
-        item.classList.add('bg-info');
-        break;
-
-      default:
-        break;
+    // CSS Hacks :(
+    document.querySelectorAll('div.info-box div.info-box-content').forEach((item) => {
+      item.style.lineHeight = 1.2;
+    });
+    document.querySelector('.content-header').innerHTML = '';
+
+    // TODO: Make a PR for info box icon color
+    document.querySelectorAll('div.info-box span.info-box-icon').forEach((item, counter) => {
+      item.classList.remove('bg-transparent');
+      item.classList.add('elevation-1');
+      item.classList.add('float');
+      switch (counter) {
+        case 0:
+          item.classList.add('bg-secondary');
+          break;
+
+        case 1:
+          item.classList.add('bg-danger');
+          break;
+
+        case 2:
+          item.classList.add('bg-info');
+          break;
+
+        case 3:
+          item.classList.add('bg-danger');
+          break;
+
+        case 4:
+          item.classList.add('bg-info');
+          break;
+
+        default:
+          break;
+      }
+    });
+    animateHourglass();
+
+    let interval = null;
+    if (settings.dashboard_mode !== 1) {
+      // Reload every 30 seconds the enclosure data
+      interval = setInterval(async () => {
+        fetchEnclosures(false, (data) => (enclosures = data));
+      }, 30 * 1000);
     }
+
+    //If a function is returned from onMount, it will be called when the component is unmounted.
+    return () => {
+      clearInterval(interval);
+    };
   });
-  animateHourglass();
-
-  let interval = null;
-  if (settings.dashboard_mode !== 1) {
-    // Reload every 30 seconds the enclosure data
-    interval = setInterval(async () => {
-      fetchEnclosures(false, (data) => (enclosures = data));
-    }, 30 * 1000);
-  }
-
-  //If a function is returned from onMount, it will be called when the component is unmounted.
-  return () => {
-    clearInterval(interval);
-  };
-});
 
-onDestroy(() => {
-  customPageTitleUsed.set(false);
-});
+  onDestroy(() => {
+    customPageTitleUsed.set(false);
+  });
 
-$: updateEnclosureDoors($buttons);
+  $: updateEnclosureDoors($buttons);
 </script>
 
 <PageHeader />
diff --git a/gui/pages/Enclosures.svelte b/gui/pages/Enclosures.svelte
index cc8f16825..0d2a758b5 100644
--- a/gui/pages/Enclosures.svelte
+++ b/gui/pages/Enclosures.svelte
@@ -1,102 +1,102 @@
 <script>
-import { onMount, onDestroy, getContext, setContext } from 'svelte';
-import { PageHeader } from '@keenmate/svelte-adminlte';
-import { _ } from 'svelte-i18n';
+  import { onMount, onDestroy, getContext, setContext } from 'svelte';
+  import { PageHeader } from '@keenmate/svelte-adminlte';
+  import { _ } from 'svelte-i18n';
 
-import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
-import { fetchEnclosures, deleteEnclosure, deleteArea } from '../providers/api';
-import { successNotification, errorNotification } from '../providers/notification-provider';
-import { enclosureNameSort } from '../helpers/string-helpers';
+  import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
+  import { fetchEnclosures, deleteEnclosure, deleteArea } from '../providers/api';
+  import { successNotification, errorNotification } from '../providers/notification-provider';
+  import { enclosureNameSort } from '../helpers/string-helpers';
 
-import EnclosureCard from '../user-controls/EnclosureCard.svelte';
+  import EnclosureCard from '../user-controls/EnclosureCard.svelte';
 
-let enclosures = [];
+  let enclosures = [];
 
-const { confirmModal } = getContext('confirm');
+  const { confirmModal } = getContext('confirm');
 
-const loadData = () => {
-  fetchEnclosures(false, (data) => (enclosures = data));
-};
+  const loadData = () => {
+    fetchEnclosures(false, (data) => (enclosures = data));
+  };
 
-const deleteEnclosureAction = (enclosure) => {
-  confirmModal(
-    $_('enclosures.delete.confirm.message', {
-      default: "Are you sure you want to delete the enclosure ''{name}''?",
-      values: { name: enclosure.name },
-    }),
-    async () => {
-      try {
-        await deleteEnclosure(enclosure.id);
-        successNotification(
-          $_('enclosures.delete.ok.message', {
-            default: "The enclosure ''{name}'' is deleted.",
-            values: { name: enclosure.name },
-          }),
-          $_('notification.delete.ok.title', { default: 'OK' }),
-        );
-        loadData();
-      } catch (e) {
-        errorNotification(
-          $_('enclosures.delete.error.message', {
-            default: "The enclosure ''{name}'' could not be deleted!\nError: {error}",
-            values: { name: enclosure.name, error: e.message },
-          }),
-          $_('notification.delete.error.title', { default: 'ERROR' }),
-        );
-      }
-    },
-  );
-};
+  const deleteEnclosureAction = (enclosure) => {
+    confirmModal(
+      $_('enclosures.delete.confirm.message', {
+        default: "Are you sure you want to delete the enclosure ''{name}''?",
+        values: { name: enclosure.name },
+      }),
+      async () => {
+        try {
+          await deleteEnclosure(enclosure.id);
+          successNotification(
+            $_('enclosures.delete.ok.message', {
+              default: "The enclosure ''{name}'' is deleted.",
+              values: { name: enclosure.name },
+            }),
+            $_('notification.delete.ok.title', { default: 'OK' }),
+          );
+          loadData();
+        } catch (e) {
+          errorNotification(
+            $_('enclosures.delete.error.message', {
+              default: "The enclosure ''{name}'' could not be deleted!\nError: {error}",
+              values: { name: enclosure.name, error: e.message },
+            }),
+            $_('notification.delete.error.title', { default: 'ERROR' }),
+          );
+        }
+      },
+    );
+  };
 
-const deleteAreaAction = (area) => {
-  confirmModal(
-    $_('areas.delete.confirm.message', {
-      default: "Are you sure you want to delete the area ''{name}''?",
-      values: { name: area.name },
-    }),
-    async () => {
-      try {
-        await deleteArea(area.id);
-        successNotification(
-          $_('areas.delete.ok.message', { default: "The area ''{name}'' is deleted.", values: { name: area.name } }),
-          $_('notification.delete.ok.title', { default: 'OK' }),
-        );
-        loadData();
-      } catch (e) {
-        errorNotification(
-          $_('areas.delete.error.message', {
-            default: "The area ''{name}'' could not be deleted!\nError: {error}",
-            values: { name: area.name, error: e.message },
-          }),
-          $_('notification.delete.error.title', { default: 'ERROR' }),
-        );
-      }
-    },
-  );
-};
+  const deleteAreaAction = (area) => {
+    confirmModal(
+      $_('areas.delete.confirm.message', {
+        default: "Are you sure you want to delete the area ''{name}''?",
+        values: { name: area.name },
+      }),
+      async () => {
+        try {
+          await deleteArea(area.id);
+          successNotification(
+            $_('areas.delete.ok.message', { default: "The area ''{name}'' is deleted.", values: { name: area.name } }),
+            $_('notification.delete.ok.title', { default: 'OK' }),
+          );
+          loadData();
+        } catch (e) {
+          errorNotification(
+            $_('areas.delete.error.message', {
+              default: "The area ''{name}'' could not be deleted!\nError: {error}",
+              values: { name: area.name, error: e.message },
+            }),
+            $_('notification.delete.error.title', { default: 'ERROR' }),
+          );
+        }
+      },
+    );
+  };
 
-setContext('enclosureActions', {
-  deleteAction: (enclosure) => deleteEnclosureAction(enclosure),
-  deleteArea: (area) => deleteAreaAction(area),
-  //    reloadAction: () => loadData() // TODO: Figure this out. Reload can only be done when on the enclosure page... :(
-});
+  setContext('enclosureActions', {
+    deleteAction: (enclosure) => deleteEnclosureAction(enclosure),
+    deleteArea: (area) => deleteAreaAction(area),
+    //    reloadAction: () => loadData() // TODO: Figure this out. Reload can only be done when on the enclosure page... :(
+  });
 
-onMount(() => {
-  setCustomPageTitle($_('enclosures.title', { default: 'Enclosures' }));
-  loadData();
-
-  // Reload every 30 seconds the enclosure data
-  const interval = setInterval(() => {
+  onMount(() => {
+    setCustomPageTitle($_('enclosures.title', { default: 'Enclosures' }));
     loadData();
-  }, 30 * 1000);
 
-  //If a function is returned from onMount, it will be called when the component is unmounted.
-  return () => clearInterval(interval);
-});
+    // Reload every 30 seconds the enclosure data
+    const interval = setInterval(() => {
+      loadData();
+    }, 30 * 1000);
+
+    //If a function is returned from onMount, it will be called when the component is unmounted.
+    return () => clearInterval(interval);
+  });
 
-onDestroy(() => {
-  customPageTitleUsed.set(false);
-});
+  onDestroy(() => {
+    customPageTitleUsed.set(false);
+  });
 </script>
 
 <PageHeader>
diff --git a/gui/pages/Home.svelte b/gui/pages/Home.svelte
index 4ef8e9278..b5903b36f 100644
--- a/gui/pages/Home.svelte
+++ b/gui/pages/Home.svelte
@@ -1,19 +1,19 @@
 <script>
-import { PageHeader } from '@keenmate/svelte-adminlte';
-import { _ } from 'svelte-i18n';
-import { onMount, onDestroy } from 'svelte';
+  import { PageHeader } from '@keenmate/svelte-adminlte';
+  import { _ } from 'svelte-i18n';
+  import { onMount, onDestroy } from 'svelte';
 
-import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
+  import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
 
-onMount(() => {
-  setCustomPageTitle($_('home.title', { default: 'Home' }));
-  // Redirect to dashboard
-  location.href = '/#/dashboard/';
-});
+  onMount(() => {
+    setCustomPageTitle($_('home.title', { default: 'Home' }));
+    // Redirect to dashboard
+    location.href = '/#/dashboard/';
+  });
 
-onDestroy(() => {
-  customPageTitleUsed.set(false);
-});
+  onDestroy(() => {
+    customPageTitleUsed.set(false);
+  });
 </script>
 
 <PageHeader>
diff --git a/gui/pages/Log.svelte b/gui/pages/Log.svelte
index 118bfb82a..bf305ecf5 100644
--- a/gui/pages/Log.svelte
+++ b/gui/pages/Log.svelte
@@ -1,109 +1,109 @@
 <style>
-textarea {
-  font-size: 0.8rem;
-}
+  textarea {
+    font-size: 0.8rem;
+  }
 </style>
 
 <script>
-import { _ } from 'svelte-i18n';
-import { onMount, onDestroy } from 'svelte';
-import { PageHeader, BreadcrumbItem } from '@keenmate/svelte-adminlte';
-import { date, time } from 'svelte-i18n';
-
-import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
-import { last_log_line } from '../stores/terrariumpi';
-import { fetchLoglines } from '../providers/api';
-import { isAuthenticated } from '../stores/authentication';
-
-let text_filter,
-  error_filter,
-  warning_filter = null;
-let logdata,
-  filtered_logdata = '';
-let last_change = new Date();
-let lines_counter = 0;
-let downloading = false;
-
-const show_log_lines = (new_line, text_filter, error_filter, warning_filter) => {
-  if (!logdata || logdata === undefined || logdata === '') {
-    return;
-  }
+  import { _ } from 'svelte-i18n';
+  import { onMount, onDestroy } from 'svelte';
+  import { PageHeader, BreadcrumbItem } from '@keenmate/svelte-adminlte';
+  import { date, time } from 'svelte-i18n';
+
+  import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
+  import { last_log_line } from '../stores/terrariumpi';
+  import { fetchLoglines } from '../providers/api';
+  import { isAuthenticated } from '../stores/authentication';
+
+  let text_filter,
+    error_filter,
+    warning_filter = null;
+  let logdata,
+    filtered_logdata = '';
+  let last_change = new Date();
+  let lines_counter = 0;
+  let downloading = false;
+
+  const show_log_lines = (new_line, text_filter, error_filter, warning_filter) => {
+    if (!logdata || logdata === undefined || logdata === '') {
+      return;
+    }
 
-  if (new_line) {
-    logdata = new_line + '\n' + logdata;
-    last_log_line.set('');
-  }
+    if (new_line) {
+      logdata = new_line + '\n' + logdata;
+      last_log_line.set('');
+    }
 
-  text_filter = text_filter || '';
+    text_filter = text_filter || '';
 
-  let filters = [];
-  if (error_filter) {
-    filters.push('ERROR');
-  }
-  if (warning_filter) {
-    filters.push('WARNING');
-  }
-
-  if (text_filter !== '' || filters.length > 0) {
-    if (text_filter !== '' && filters.length > 0) {
-      text_filter =
-        '(.*' +
-        text_filter +
-        '.*\\s+-\\s+(' +
-        filters.join('|') +
-        ')\\s+-\\s+' +
-        ')|(.*\\s+-\\s+(' +
-        filters.join('|') +
-        ')\\s+-\\s+.*' +
-        text_filter +
-        '.*)';
-    } else if (text_filter === '' || filters.length > 0) {
-      text_filter = '\\s+-\\s+(' + filters.join('|') + ')\\s+-';
+    let filters = [];
+    if (error_filter) {
+      filters.push('ERROR');
+    }
+    if (warning_filter) {
+      filters.push('WARNING');
     }
 
-    text_filter = new RegExp('^.*' + text_filter + '.*', 'img');
-    filtered_logdata = logdata.match(text_filter);
-
-    if (filtered_logdata !== null) {
-      filtered_logdata = filtered_logdata.join('\n').trim();
+    if (text_filter !== '' || filters.length > 0) {
+      if (text_filter !== '' && filters.length > 0) {
+        text_filter =
+          '(.*' +
+          text_filter +
+          '.*\\s+-\\s+(' +
+          filters.join('|') +
+          ')\\s+-\\s+' +
+          ')|(.*\\s+-\\s+(' +
+          filters.join('|') +
+          ')\\s+-\\s+.*' +
+          text_filter +
+          '.*)';
+      } else if (text_filter === '' || filters.length > 0) {
+        text_filter = '\\s+-\\s+(' + filters.join('|') + ')\\s+-';
+      }
+
+      text_filter = new RegExp('^.*' + text_filter + '.*', 'img');
+      filtered_logdata = logdata.match(text_filter);
+
+      if (filtered_logdata !== null) {
+        filtered_logdata = filtered_logdata.join('\n').trim();
+      } else {
+        filtered_logdata = '';
+      }
     } else {
-      filtered_logdata = '';
+      text_filter = false;
+      filtered_logdata = logdata;
     }
-  } else {
-    text_filter = false;
-    filtered_logdata = logdata;
-  }
 
-  lines_counter = (filtered_logdata.match(/\n/g) || []).length;
-  lines_counter = lines_counter > 0 ? lines_counter++ : lines_counter; // Add extra lastline if there are more then 0 lines
-  last_change = new Date();
-};
+    lines_counter = (filtered_logdata.match(/\n/g) || []).length;
+    lines_counter = lines_counter > 0 ? lines_counter++ : lines_counter; // Add extra lastline if there are more then 0 lines
+    last_change = new Date();
+  };
 
-const download_logfile = async () => {
-  downloading = true;
+  const download_logfile = async () => {
+    downloading = true;
 
-  const filename = 'terrariumpi_logfile.txt';
-  let loglines = '';
-  await fetchLoglines((data) => (loglines = data));
+    const filename = 'terrariumpi_logfile.txt';
+    let loglines = '';
+    await fetchLoglines((data) => (loglines = data));
 
-  const link = document.createElement('a');
-  link.href = window.URL.createObjectURL(new Blob([loglines]));
-  link.download = filename;
-  link.click();
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(new Blob([loglines]));
+    link.download = filename;
+    link.click();
 
-  downloading = false;
-};
+    downloading = false;
+  };
 
-onMount(() => {
-  setCustomPageTitle($_('system.log.title', { default: 'System logging' }));
-  fetchLoglines((data) => (logdata = data.split('\n').reverse().join('\n').trim()), true);
-});
+  onMount(() => {
+    setCustomPageTitle($_('system.log.title', { default: 'System logging' }));
+    fetchLoglines((data) => (logdata = data.split('\n').reverse().join('\n').trim()), true);
+  });
 
-onDestroy(() => {
-  customPageTitleUsed.set(false);
-});
+  onDestroy(() => {
+    customPageTitleUsed.set(false);
+  });
 
-$: show_log_lines($last_log_line, text_filter, error_filter, warning_filter);
+  $: show_log_lines($last_log_line, text_filter, error_filter, warning_filter);
 </script>
 
 <PageHeader>
diff --git a/gui/pages/NotFound.svelte b/gui/pages/NotFound.svelte
index 95e0ef8a7..d5ab0a72a 100644
--- a/gui/pages/NotFound.svelte
+++ b/gui/pages/NotFound.svelte
@@ -1,18 +1,18 @@
 <script>
-import { onMount, onDestroy } from 'svelte';
-import { PageHeader } from '@keenmate/svelte-adminlte';
-import { _ } from 'svelte-i18n';
+  import { onMount, onDestroy } from 'svelte';
+  import { PageHeader } from '@keenmate/svelte-adminlte';
+  import { _ } from 'svelte-i18n';
 
-import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
+  import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
 
-onMount(() => {
-  setCustomPageTitle('404 ' + $_('not-found.title', { default: 'Page not found' }));
-  console.log('Location href', document.location);
-});
+  onMount(() => {
+    setCustomPageTitle('404 ' + $_('not-found.title', { default: 'Page not found' }));
+    console.log('Location href', document.location);
+  });
 
-onDestroy(() => {
-  customPageTitleUsed.set(false);
-});
+  onDestroy(() => {
+    customPageTitleUsed.set(false);
+  });
 </script>
 
 <PageHeader>
diff --git a/gui/pages/Notifications.svelte b/gui/pages/Notifications.svelte
index 02c64f6cb..8e4aab4d9 100644
--- a/gui/pages/Notifications.svelte
+++ b/gui/pages/Notifications.svelte
@@ -1,130 +1,130 @@
 <style>
-div.info-box:hover div.info-box-content button.text-danger {
-  display: block !important;
-}
+  div.info-box:hover div.info-box-content button.text-danger {
+    display: block !important;
+  }
 
-.info-box-content {
-  line-height: 120% !important;
-}
+  .info-box-content {
+    line-height: 120% !important;
+  }
 
-button.text-danger {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  display: none;
-}
+  button.text-danger {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    display: none;
+  }
 </style>
 
 <script>
-import { onMount, onDestroy, getContext } from 'svelte';
-import { PageHeader } from '@keenmate/svelte-adminlte';
-import { _ } from 'svelte-i18n';
+  import { onMount, onDestroy, getContext } from 'svelte';
+  import { PageHeader } from '@keenmate/svelte-adminlte';
+  import { _ } from 'svelte-i18n';
 
-import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
-import {
-  fetchNotificationServices,
-  deleteNotificationService,
-  fetchNotificationMessages,
-  deleteNotificationMessage,
-} from '../providers/api';
-import { successNotification, errorNotification } from '../providers/notification-provider';
-import { template_sensor_type_icon } from '../helpers/icon-helpers';
-import { isDarkInterface } from '../stores/terrariumpi';
-import { nl2br } from '../helpers/string-helpers';
+  import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
+  import {
+    fetchNotificationServices,
+    deleteNotificationService,
+    fetchNotificationMessages,
+    deleteNotificationMessage,
+  } from '../providers/api';
+  import { successNotification, errorNotification } from '../providers/notification-provider';
+  import { template_sensor_type_icon } from '../helpers/icon-helpers';
+  import { isDarkInterface } from '../stores/terrariumpi';
+  import { nl2br } from '../helpers/string-helpers';
 
-import Card from '../user-controls/Card.svelte';
-import CardSettingsTools from '../components/common/CardSettingsTools.svelte';
+  import Card from '../user-controls/Card.svelte';
+  import CardSettingsTools from '../components/common/CardSettingsTools.svelte';
 
-let services_loading = false;
-let services = [];
+  let services_loading = false;
+  let services = [];
 
-let messages_loading = false;
-let messages = [];
+  let messages_loading = false;
+  let messages = [];
 
-const { confirmModal } = getContext('confirm');
-const { editService, editMessage } = getContext('modals');
+  const { confirmModal } = getContext('confirm');
+  const { editService, editMessage } = getContext('modals');
 
-const deleteServiceAction = (service) => {
-  confirmModal(
-    $_('services.delete.confirm.message', {
-      default: "Are you sure you want to delete the service ''{name}''?",
-      values: { name: service.name },
-    }),
-    async () => {
-      try {
-        await deleteNotificationService(service.id);
-        successNotification(
-          $_('services.delete.ok.message', {
-            default: "The service ''{name}'' is deleted.",
-            values: { name: service.name },
-          }),
-          $_('notification.delete.ok.title', { default: 'OK' }),
-        );
-        loadServices();
-      } catch (e) {
-        errorNotification(
-          $_('services.delete.error.message', {
-            default: "The service ''{name}'' could not be deleted!\nError: {error}",
-            values: { name: service.name, error: e.message },
-          }),
-          $_('notification.delete.error.title', { default: 'ERROR' }),
-        );
-      }
-    },
-  );
-};
+  const deleteServiceAction = (service) => {
+    confirmModal(
+      $_('services.delete.confirm.message', {
+        default: "Are you sure you want to delete the service ''{name}''?",
+        values: { name: service.name },
+      }),
+      async () => {
+        try {
+          await deleteNotificationService(service.id);
+          successNotification(
+            $_('services.delete.ok.message', {
+              default: "The service ''{name}'' is deleted.",
+              values: { name: service.name },
+            }),
+            $_('notification.delete.ok.title', { default: 'OK' }),
+          );
+          loadServices();
+        } catch (e) {
+          errorNotification(
+            $_('services.delete.error.message', {
+              default: "The service ''{name}'' could not be deleted!\nError: {error}",
+              values: { name: service.name, error: e.message },
+            }),
+            $_('notification.delete.error.title', { default: 'ERROR' }),
+          );
+        }
+      },
+    );
+  };
 
-const deleteMessageAction = (message) => {
-  confirmModal(
-    $_('messages.delete.confirm.message', {
-      default: "Are you sure you want to delete the message ''{name}''?",
-      values: { name: message.title },
-    }),
-    async () => {
-      try {
-        await deleteNotificationMessage(message.id);
-        successNotification(
-          $_('messages.delete.ok.message', {
-            default: "The message ''{name}'' is deleted.",
-            values: { name: message.title },
-          }),
-          $_('notification.delete.ok.title', { default: 'OK' }),
-        );
-        loadMessages();
-      } catch (e) {
-        errorNotification(
-          $_('messages.delete.error.message', {
-            default: "The message ''{name}'' could not be deleted!\nError: {error}",
-            values: { name: message.title, error: e.message },
-          }),
-          $_('notification.delete.error.title', { default: 'ERROR' }),
-        );
-      }
-    },
-  );
-};
+  const deleteMessageAction = (message) => {
+    confirmModal(
+      $_('messages.delete.confirm.message', {
+        default: "Are you sure you want to delete the message ''{name}''?",
+        values: { name: message.title },
+      }),
+      async () => {
+        try {
+          await deleteNotificationMessage(message.id);
+          successNotification(
+            $_('messages.delete.ok.message', {
+              default: "The message ''{name}'' is deleted.",
+              values: { name: message.title },
+            }),
+            $_('notification.delete.ok.title', { default: 'OK' }),
+          );
+          loadMessages();
+        } catch (e) {
+          errorNotification(
+            $_('messages.delete.error.message', {
+              default: "The message ''{name}'' could not be deleted!\nError: {error}",
+              values: { name: message.title, error: e.message },
+            }),
+            $_('notification.delete.error.title', { default: 'ERROR' }),
+          );
+        }
+      },
+    );
+  };
 
-const loadServices = async () => {
-  services_loading = true;
-  await fetchNotificationServices(null, (data) => (services = data));
-  services_loading = false;
-};
+  const loadServices = async () => {
+    services_loading = true;
+    await fetchNotificationServices(null, (data) => (services = data));
+    services_loading = false;
+  };
 
-const loadMessages = async () => {
-  messages_loading = true;
-  await fetchNotificationMessages(null, (data) => (messages = data));
-  messages_loading = false;
-};
+  const loadMessages = async () => {
+    messages_loading = true;
+    await fetchNotificationMessages(null, (data) => (messages = data));
+    messages_loading = false;
+  };
 
-onMount(() => {
-  loadServices();
-  loadMessages();
-  setCustomPageTitle($_('system.notifications.title', { default: 'Notifications' }));
-});
+  onMount(() => {
+    loadServices();
+    loadMessages();
+    setCustomPageTitle($_('system.notifications.title', { default: 'Notifications' }));
+  });
 
-onDestroy(() => {
-  customPageTitleUsed.set(false);
-});
+  onDestroy(() => {
+    customPageTitleUsed.set(false);
+  });
 </script>
 
 <PageHeader>
diff --git a/gui/pages/Playlists.svelte b/gui/pages/Playlists.svelte
index 42ae754b1..7a0ad448f 100644
--- a/gui/pages/Playlists.svelte
+++ b/gui/pages/Playlists.svelte
@@ -1,87 +1,87 @@
 <script>
-import { onDestroy, onMount, getContext } from 'svelte';
-import { _ } from 'svelte-i18n';
-import { PageHeader } from '@keenmate/svelte-adminlte';
-import { dayjs } from 'svelte-time';
-import duration from 'dayjs/esm/plugin/duration';
-dayjs.extend(duration);
+  import { onDestroy, onMount, getContext } from 'svelte';
+  import { _ } from 'svelte-i18n';
+  import { PageHeader } from '@keenmate/svelte-adminlte';
+  import { dayjs } from 'svelte-time';
+  import duration from 'dayjs/esm/plugin/duration';
+  dayjs.extend(duration);
 
-import { locale } from '../locale/i18n';
-import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
-import { isAuthenticated } from '../stores/authentication';
-import { fetchPlaylists, deletePlaylist } from '../providers/api';
-import { successNotification, errorNotification } from '../providers/notification-provider';
-import { isDay } from '../stores/terrariumpi';
-import { DataTablesLanguageUrl } from '../constants/urls';
+  import { locale } from '../locale/i18n';
+  import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
+  import { isAuthenticated } from '../stores/authentication';
+  import { fetchPlaylists, deletePlaylist } from '../providers/api';
+  import { successNotification, errorNotification } from '../providers/notification-provider';
+  import { isDay } from '../stores/terrariumpi';
+  import { DataTablesLanguageUrl } from '../constants/urls';
 
-import Card from '../user-controls/Card.svelte';
+  import Card from '../user-controls/Card.svelte';
 
-const { editPlaylist } = getContext('modals');
+  const { editPlaylist } = getContext('modals');
 
-const loadData = async () => {
-  loading = true;
-  if (dataTable) {
-    dataTable.destroy();
-  }
-  await fetchPlaylists(false, (data) => (playlists = data));
-  dataTable = jQuery('#playlists').DataTable({
-    language: {
-      url: `${DataTablesLanguageUrl}/${$locale}.json`,
-    },
-    columnDefs: [
-      {
-        targets: 'no-sort',
-        orderable: false,
+  const loadData = async () => {
+    loading = true;
+    if (dataTable) {
+      dataTable.destroy();
+    }
+    await fetchPlaylists(false, (data) => (playlists = data));
+    dataTable = jQuery('#playlists').DataTable({
+      language: {
+        url: `${DataTablesLanguageUrl}/${$locale}.json`,
       },
-    ],
-  });
-  loading = false;
-};
+      columnDefs: [
+        {
+          targets: 'no-sort',
+          orderable: false,
+        },
+      ],
+    });
+    loading = false;
+  };
 
-const { confirmModal } = getContext('confirm');
+  const { confirmModal } = getContext('confirm');
 
-const deletePlaylistAction = (playlist) => {
-  confirmModal(
-    $_('audio.playlists.delete.confirm.message', {
-      default: "Are you sure to delete the playlist ''{name}'' with {length} numbers?",
-      values: { name: playlist.name, length: playlist.length },
-    }),
-    async () => {
-      try {
-        await deletePlaylist(playlist.id);
-        successNotification(
-          $_('audio.playlists.delete.ok.message', {
-            default: "The playlist ''{name}'' is deleted.",
-            values: { name: playlist.name },
-          }),
-          $_('notification.delete.ok.title'),
-        );
-        loadData();
-      } catch (e) {
-        errorNotification(
-          $_('audio.playlists.delete.error.message', {
-            default: "The playlist ''{name}'' could not be deleted!\nError: {error}",
-            values: { name: playlist.name, error: e.message },
-          }),
-          $_('notification.delete.error.title'),
-        );
-      }
-    },
-  );
-};
+  const deletePlaylistAction = (playlist) => {
+    confirmModal(
+      $_('audio.playlists.delete.confirm.message', {
+        default: "Are you sure to delete the playlist ''{name}'' with {length} numbers?",
+        values: { name: playlist.name, length: playlist.length },
+      }),
+      async () => {
+        try {
+          await deletePlaylist(playlist.id);
+          successNotification(
+            $_('audio.playlists.delete.ok.message', {
+              default: "The playlist ''{name}'' is deleted.",
+              values: { name: playlist.name },
+            }),
+            $_('notification.delete.ok.title'),
+          );
+          loadData();
+        } catch (e) {
+          errorNotification(
+            $_('audio.playlists.delete.error.message', {
+              default: "The playlist ''{name}'' could not be deleted!\nError: {error}",
+              values: { name: playlist.name, error: e.message },
+            }),
+            $_('notification.delete.error.title'),
+          );
+        }
+      },
+    );
+  };
 
-let playlists = [];
-let loading = true;
-let dataTable;
+  let playlists = [];
+  let loading = true;
+  let dataTable;
 
-onMount(() => {
-  setCustomPageTitle($_('audio.playlists.title', { default: 'Playlists' }));
-  loadData();
-});
+  onMount(() => {
+    setCustomPageTitle($_('audio.playlists.title', { default: 'Playlists' }));
+    loadData();
+  });
 
-onDestroy(() => {
-  customPageTitleUsed.set(false);
-});
+  onDestroy(() => {
+    customPageTitleUsed.set(false);
+  });
 </script>
 
 <PageHeader>
diff --git a/gui/pages/Relays.svelte b/gui/pages/Relays.svelte
index 68cbb3a35..63216328b 100644
--- a/gui/pages/Relays.svelte
+++ b/gui/pages/Relays.svelte
@@ -1,167 +1,167 @@
 <script>
-import { PageHeader } from '@keenmate/svelte-adminlte';
-import { _ } from 'svelte-i18n';
-import { onMount, onDestroy, getContext, setContext } from 'svelte';
+  import { PageHeader } from '@keenmate/svelte-adminlte';
+  import { _ } from 'svelte-i18n';
+  import { onMount, onDestroy, getContext, setContext } from 'svelte';
 
-import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
-import { fetchRelays, deleteRelay, toggleRelay, dimRelay, manualRelay, updateSystemSettings } from '../providers/api';
-import { successNotification, errorNotification } from '../providers/notification-provider';
-import { isAuthenticated } from '../stores/authentication';
+  import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
+  import { fetchRelays, deleteRelay, toggleRelay, dimRelay, manualRelay, updateSystemSettings } from '../providers/api';
+  import { successNotification, errorNotification } from '../providers/notification-provider';
+  import { isAuthenticated } from '../stores/authentication';
 
-import RelayCard from '../user-controls/RelayCard.svelte';
-import EventModel from '../modals/EventFormModal.svelte';
+  import RelayCard from '../user-controls/RelayCard.svelte';
+  import EventModel from '../modals/EventFormModal.svelte';
 
-let relays = [];
-let showModal;
+  let relays = [];
+  let showModal;
 
-const { confirmModal } = getContext('confirm');
+  const { confirmModal } = getContext('confirm');
 
-const loadData = () => {
-  fetchRelays(false, (data) => (relays = data));
-};
+  const loadData = () => {
+    fetchRelays(false, (data) => (relays = data));
+  };
 
-const loadCalendar = () => {
-  location.href = '/#/calendar';
-};
+  const loadCalendar = () => {
+    location.href = '/#/calendar';
+  };
 
-const deleteRelayAction = (relay) => {
-  confirmModal(
-    $_('relays.delete.confirm.message', {
-      default: "Are you sure you want to delete the relay ''{name}''?",
-      values: { name: relay.name },
-    }),
-    async () => {
-      try {
-        await deleteRelay(relay.id);
-        successNotification(
-          $_('relays.delete.ok.message', {
-            default: "The relay ''{name}'' is deleted.",
-            values: { name: relay.name },
-          }),
-          $_('notification.delete.ok.title', { default: 'OK' }),
-        );
-        loadData();
-      } catch (e) {
-        errorNotification(
-          $_('relays.delete.error.message', {
-            default: "The relay ''{name}'' could not be deleted!\nError: {error}",
-            values: { name: relay.name, error: e.message },
-          }),
-          $_('notification.delete.error.title', { default: 'ERROR' }),
-        );
-      }
-    },
-  );
-};
-
-const ignoreRelayAction = (relay) => {
-  confirmModal(
-    $_('relays.confirm.ignore.message', {
-      default: "Are you sure you want to ignore the relay ''{name}''?",
-      values: { name: relay.name },
-    }),
-    async () => {
-      try {
-        await updateSystemSettings({ exclude_ids: relay.id });
-        successNotification(
-          $_('relays.exclude.ok.message', {
-            default: "The relay ''{name}'' is ignored.",
-            values: { name: relay.name },
-          }),
-          $_('notification.exclude.ok.title', { default: 'OK' }),
-        );
-        loadData();
-      } catch (e) {
-        errorNotification(
-          $_('relays.exclude.error.message', {
-            default: "The relay ''{name}'' could not be ignored!\nError: {error}",
-            values: { name: relay.name, error: e.message },
-          }),
-          $_('notification.exclude.error.title', { default: 'ERROR' }),
-        );
-      }
-    },
-  );
-};
-
-const replaceHardware = (relay) => {
-  let eventData = { mode: 'reminder', summary: 'Replace hardware relay ' + relay.name };
-  showModal(eventData);
-};
-
-const relayManualMode = (relay) => {
-  confirmModal(
-    $_('relays.confirm.manual_mode.message', {
-      default: "Toggle manual mode for relay ''{name}''?",
-      values: { name: relay.name },
-    }),
-    async () => {
-      try {
-        await manualRelay(relay.id);
-        successNotification(
-          $_('relays.manual_mode.ok.message', {
-            default: "The manual mode for relay ''{name}'' is changed.",
-            values: { name: relay.name },
-          }),
-          $_('notification.manual_mode.ok.title', { default: 'OK' }),
-        );
-        loadData();
-      } catch (e) {
-        errorNotification(
-          $_('relays.manual_mode.error.message', {
-            default: "Error changing manual mode for relay ''{name}''.\nError: {error}",
-            values: { name: relay.name, error: e.message },
-          }),
-          $_('notification.manual_mode.error.title', { default: 'ERROR' }),
-        );
-      }
-    },
-  );
-};
+  const deleteRelayAction = (relay) => {
+    confirmModal(
+      $_('relays.delete.confirm.message', {
+        default: "Are you sure you want to delete the relay ''{name}''?",
+        values: { name: relay.name },
+      }),
+      async () => {
+        try {
+          await deleteRelay(relay.id);
+          successNotification(
+            $_('relays.delete.ok.message', {
+              default: "The relay ''{name}'' is deleted.",
+              values: { name: relay.name },
+            }),
+            $_('notification.delete.ok.title', { default: 'OK' }),
+          );
+          loadData();
+        } catch (e) {
+          errorNotification(
+            $_('relays.delete.error.message', {
+              default: "The relay ''{name}'' could not be deleted!\nError: {error}",
+              values: { name: relay.name, error: e.message },
+            }),
+            $_('notification.delete.error.title', { default: 'ERROR' }),
+          );
+        }
+      },
+    );
+  };
 
-const toggleRelayAction = async (relay, state) => {
-  try {
-    let result = '';
-    if (relay.dimmer) {
-      await dimRelay(relay.id, state, (data) => (result = data));
-    } else {
-      await toggleRelay(relay.id, (data) => (result = data));
-    }
-    result = relay.dimmer ? result.value + '%' : result.value > 0 ? 'on' : 'off';
-    successNotification(
-      $_('relays.toggle.ok.message', {
-        default: "Toggled relay ''{name}'' to state {value}",
-        values: { name: relay.name, value: result },
+  const ignoreRelayAction = (relay) => {
+    confirmModal(
+      $_('relays.confirm.ignore.message', {
+        default: "Are you sure you want to ignore the relay ''{name}''?",
+        values: { name: relay.name },
       }),
-      $_('notification.toggle.ok.title', { default: 'OK' }),
+      async () => {
+        try {
+          await updateSystemSettings({ exclude_ids: relay.id });
+          successNotification(
+            $_('relays.exclude.ok.message', {
+              default: "The relay ''{name}'' is ignored.",
+              values: { name: relay.name },
+            }),
+            $_('notification.exclude.ok.title', { default: 'OK' }),
+          );
+          loadData();
+        } catch (e) {
+          errorNotification(
+            $_('relays.exclude.error.message', {
+              default: "The relay ''{name}'' could not be ignored!\nError: {error}",
+              values: { name: relay.name, error: e.message },
+            }),
+            $_('notification.exclude.error.title', { default: 'ERROR' }),
+          );
+        }
+      },
     );
-  } catch (e) {
-    errorNotification(
-      $_('relays.toggle.error.message', {
-        default: "Error toggling relay ''{name}''.\nError: {error}",
-        values: { name: relay.name, error: e.message },
+  };
+
+  const replaceHardware = (relay) => {
+    let eventData = { mode: 'reminder', summary: 'Replace hardware relay ' + relay.name };
+    showModal(eventData);
+  };
+
+  const relayManualMode = (relay) => {
+    confirmModal(
+      $_('relays.confirm.manual_mode.message', {
+        default: "Toggle manual mode for relay ''{name}''?",
+        values: { name: relay.name },
       }),
-      $_('notification.toggle.error.title', { default: 'ERROR' }),
+      async () => {
+        try {
+          await manualRelay(relay.id);
+          successNotification(
+            $_('relays.manual_mode.ok.message', {
+              default: "The manual mode for relay ''{name}'' is changed.",
+              values: { name: relay.name },
+            }),
+            $_('notification.manual_mode.ok.title', { default: 'OK' }),
+          );
+          loadData();
+        } catch (e) {
+          errorNotification(
+            $_('relays.manual_mode.error.message', {
+              default: "Error changing manual mode for relay ''{name}''.\nError: {error}",
+              values: { name: relay.name, error: e.message },
+            }),
+            $_('notification.manual_mode.error.title', { default: 'ERROR' }),
+          );
+        }
+      },
     );
-  }
-};
+  };
+
+  const toggleRelayAction = async (relay, state) => {
+    try {
+      let result = '';
+      if (relay.dimmer) {
+        await dimRelay(relay.id, state, (data) => (result = data));
+      } else {
+        await toggleRelay(relay.id, (data) => (result = data));
+      }
+      result = relay.dimmer ? result.value + '%' : result.value > 0 ? 'on' : 'off';
+      successNotification(
+        $_('relays.toggle.ok.message', {
+          default: "Toggled relay ''{name}'' to state {value}",
+          values: { name: relay.name, value: result },
+        }),
+        $_('notification.toggle.ok.title', { default: 'OK' }),
+      );
+    } catch (e) {
+      errorNotification(
+        $_('relays.toggle.error.message', {
+          default: "Error toggling relay ''{name}''.\nError: {error}",
+          values: { name: relay.name, error: e.message },
+        }),
+        $_('notification.toggle.error.title', { default: 'ERROR' }),
+      );
+    }
+  };
 
-setContext('relayActions', {
-  toggleAction: (relay, state) => toggleRelayAction(relay, state),
-  deleteAction: (relay) => deleteRelayAction(relay),
-  ignoreAction: (relay) => ignoreRelayAction(relay),
-  replaceAction: (relay) => replaceHardware(relay),
-  manualAction: (relay) => relayManualMode(relay),
-});
+  setContext('relayActions', {
+    toggleAction: (relay, state) => toggleRelayAction(relay, state),
+    deleteAction: (relay) => deleteRelayAction(relay),
+    ignoreAction: (relay) => ignoreRelayAction(relay),
+    replaceAction: (relay) => replaceHardware(relay),
+    manualAction: (relay) => relayManualMode(relay),
+  });
 
-onMount(() => {
-  setCustomPageTitle($_('relays.title', { default: 'Relays' }));
-  loadData();
-});
+  onMount(() => {
+    setCustomPageTitle($_('relays.title', { default: 'Relays' }));
+    loadData();
+  });
 
-onDestroy(() => {
-  customPageTitleUsed.set(false);
-});
+  onDestroy(() => {
+    customPageTitleUsed.set(false);
+  });
 </script>
 
 <PageHeader>
diff --git a/gui/pages/Sensors.svelte b/gui/pages/Sensors.svelte
index be794d8a2..2b4593e08 100644
--- a/gui/pages/Sensors.svelte
+++ b/gui/pages/Sensors.svelte
@@ -1,106 +1,106 @@
 <script>
-import { onMount, onDestroy, getContext, setContext } from 'svelte';
-import { PageHeader } from '@keenmate/svelte-adminlte';
-import { _ } from 'svelte-i18n';
+  import { onMount, onDestroy, getContext, setContext } from 'svelte';
+  import { PageHeader } from '@keenmate/svelte-adminlte';
+  import { _ } from 'svelte-i18n';
 
-import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
-import { fetchSensors, deleteSensor, updateSystemSettings } from '../providers/api';
-import { successNotification, errorNotification } from '../providers/notification-provider';
+  import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
+  import { fetchSensors, deleteSensor, updateSystemSettings } from '../providers/api';
+  import { successNotification, errorNotification } from '../providers/notification-provider';
 
-import SensorCard from '../user-controls/SensorCard.svelte';
+  import SensorCard from '../user-controls/SensorCard.svelte';
 
-export let params = null;
+  export let params = null;
 
-let sensors = [];
-let translate_sensor_type = '';
-let enableGraph = params && params.type ? true : false;
+  let sensors = [];
+  let translate_sensor_type = '';
+  let enableGraph = params && params.type ? true : false;
 
-const { confirmModal } = getContext('confirm');
+  const { confirmModal } = getContext('confirm');
 
-const loadData = () => {
-  fetchSensors(params && params.type ? params.type : false, (data) => (sensors = data));
-};
+  const loadData = () => {
+    fetchSensors(params && params.type ? params.type : false, (data) => (sensors = data));
+  };
 
-const deleteSensorAction = function (sensor) {
-  confirmModal(
-    $_('sensors.delete.confirm.message', {
-      default: "Are you sure you want to delete the sensor ''{name}''?",
-      values: { name: sensor.name },
-    }),
-    async () => {
-      try {
-        await deleteSensor(sensor.id);
-        successNotification(
-          $_('sensors.delete.ok.message', {
-            default: "The sensor ''{name}'' is deleted.",
-            values: { name: sensor.name },
-          }),
-          $_('notification.delete.ok.title', { default: 'OK' }),
-        );
-        loadData();
-      } catch (e) {
-        errorNotification(
-          $_('sensors.delete.error.message', {
-            default: "The sensor ''{name}'' could not be deleted!\nError: {error}",
-            values: { name: sensor.name, error: e.message },
-          }),
-          $_('notification.delete.error.title', { default: 'ERROR' }),
-        );
-      }
-    },
-  );
-};
+  const deleteSensorAction = function (sensor) {
+    confirmModal(
+      $_('sensors.delete.confirm.message', {
+        default: "Are you sure you want to delete the sensor ''{name}''?",
+        values: { name: sensor.name },
+      }),
+      async () => {
+        try {
+          await deleteSensor(sensor.id);
+          successNotification(
+            $_('sensors.delete.ok.message', {
+              default: "The sensor ''{name}'' is deleted.",
+              values: { name: sensor.name },
+            }),
+            $_('notification.delete.ok.title', { default: 'OK' }),
+          );
+          loadData();
+        } catch (e) {
+          errorNotification(
+            $_('sensors.delete.error.message', {
+              default: "The sensor ''{name}'' could not be deleted!\nError: {error}",
+              values: { name: sensor.name, error: e.message },
+            }),
+            $_('notification.delete.error.title', { default: 'ERROR' }),
+          );
+        }
+      },
+    );
+  };
 
-const ignoreSensorAction = function (sensor) {
-  confirmModal(
-    $_('sensors.confirm.ignore.message', {
-      default: "Are you sure you want to ignore the sensor ''{name}''?",
-      values: { name: sensor.name },
-    }),
-    async () => {
-      try {
-        await updateSystemSettings({ exclude_ids: sensor.id });
-        successNotification(
-          $_('sensors.exclude.ok.message', {
-            default: "The sensor ''{name}'' is ignored.",
-            values: { name: sensor.name },
-          }),
-          $_('notification.exclude.ok.title', { default: 'OK' }),
-        );
-        loadData();
-      } catch (e) {
-        errorNotification(
-          $_('sensors.exclude.error.message', {
-            default: "The sensor ''{name}'' could not be ignored!\nError: {error}",
-            values: { name: sensor.name, error: e.message },
-          }),
-          $_('notification.exclude.error.title', { default: 'ERROR' }),
-        );
-      }
-    },
-  );
-};
+  const ignoreSensorAction = function (sensor) {
+    confirmModal(
+      $_('sensors.confirm.ignore.message', {
+        default: "Are you sure you want to ignore the sensor ''{name}''?",
+        values: { name: sensor.name },
+      }),
+      async () => {
+        try {
+          await updateSystemSettings({ exclude_ids: sensor.id });
+          successNotification(
+            $_('sensors.exclude.ok.message', {
+              default: "The sensor ''{name}'' is ignored.",
+              values: { name: sensor.name },
+            }),
+            $_('notification.exclude.ok.title', { default: 'OK' }),
+          );
+          loadData();
+        } catch (e) {
+          errorNotification(
+            $_('sensors.exclude.error.message', {
+              default: "The sensor ''{name}'' could not be ignored!\nError: {error}",
+              values: { name: sensor.name, error: e.message },
+            }),
+            $_('notification.exclude.error.title', { default: 'ERROR' }),
+          );
+        }
+      },
+    );
+  };
 
-setContext('sensorActions', {
-  deleteAction: (sensor) => deleteSensorAction(sensor),
-  ignoreAction: (sensor) => ignoreSensorAction(sensor),
-});
+  setContext('sensorActions', {
+    deleteAction: (sensor) => deleteSensorAction(sensor),
+    ignoreAction: (sensor) => ignoreSensorAction(sensor),
+  });
 
-onMount(() => {
-  // Page title will be set based on the params.type and enableGraph settings
-  loadData();
-});
+  onMount(() => {
+    // Page title will be set based on the params.type and enableGraph settings
+    loadData();
+  });
 
-$: {
-  translate_sensor_type = params && params.type !== '' ? `.${params.type}` : !enableGraph ? '.all' : '';
-  setCustomPageTitle($_(`sensors${translate_sensor_type}.title`));
-  sensors = [];
-  loadData();
-}
+  $: {
+    translate_sensor_type = params && params.type !== '' ? `.${params.type}` : !enableGraph ? '.all' : '';
+    setCustomPageTitle($_(`sensors${translate_sensor_type}.title`));
+    sensors = [];
+    loadData();
+  }
 
-onDestroy(() => {
-  customPageTitleUsed.set(false);
-});
+  onDestroy(() => {
+    customPageTitleUsed.set(false);
+  });
 </script>
 
 <PageHeader>
diff --git a/gui/pages/Settings.svelte b/gui/pages/Settings.svelte
index 5f3d32521..12b2520d9 100644
--- a/gui/pages/Settings.svelte
+++ b/gui/pages/Settings.svelte
@@ -1,172 +1,172 @@
 <script>
-import { onMount, onDestroy } from 'svelte';
-import { writable } from 'svelte/store';
-import { _, number } from 'svelte-i18n';
-import { PageHeader, BreadcrumbItem } from '@keenmate/svelte-adminlte';
-import { createForm } from 'felte';
-import { Config } from '@keenmate/svelte-adminlte';
-
-import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
-import { successNotification, errorNotification } from '../providers/notification-provider';
-import { autoDarkMode } from '../helpers/color-helpers';
-import { formToJSON, invalid_form_fields } from '../helpers/form-helpers';
-import { languageFlag } from '../helpers/string-helpers';
-import { fetchSystemSettings, updateSystemSettings, uploadFile } from '../providers/api';
-import { changeLang, languages, currencies, currency } from '../locale/i18n';
-import { isDay, isDarkDesktop } from '../stores/terrariumpi';
-
-import Card from '../user-controls/Card.svelte';
-import CardSettingsTools from '../components/common/CardSettingsTools.svelte';
-import Field from '../components/form/Field.svelte';
-import FileUpload from '../components/form/FileUpload.svelte';
-import Select from '../components/form/Select.svelte';
-import Switch from '../components/form/Switch.svelte';
-import Helper from '../components/form/Helper.svelte';
-
-let formData = writable({});
-let editForm = null;
-
-const units = {
-  temperature: [
-    { value: 'celsius', text: $_('settings.units.celsius', { default: 'Celsius' }) },
-    { value: 'fahrenheit', text: $_('settings.units.fahrenheit', { default: 'Fahrenheit' }) },
-    { value: 'kelvin', text: $_('settings.units.kelvin', { default: 'Kelvin' }) },
-  ],
-  distance: [
-    { value: 'cm', text: $_('settings.units.cm', { default: 'Centimeter' }) },
-    { value: 'inch', text: $_('settings.units.inch', { default: 'Inch' }) },
-  ],
-  liquid_volume: [
-    { value: 'l', text: $_('settings.units.l', { default: 'Liter' }) },
-    { value: 'ukgall', text: $_('settings.units.ukgall', { default: 'UK Gallons' }) },
-    { value: 'usgall', text: $_('settings.units.usgall', { default: 'US Gallons' }) },
-  ],
-  wind_speed: [
-    { value: 'm/s', text: $_('settings.units.m_s', { default: 'Meter per second' }) },
-    { value: 'km/h', text: $_('settings.units.km_h', { default: 'Kilometer per hour' }) },
-    { value: 'm/h', text: $_('settings.units.m_h', { default: 'Miles per hour' }) },
-    { value: 'beaufort', text: $_('settings.units.beaufort', { default: 'Beaufort' }) },
-  ],
-};
-
-const { form, setFields, isSubmitting, reset } = createForm({
-  onSubmit: async (values, context) => {
-    // Extra check on the password
-    if (values.password !== '' && values.password2 !== '' && values.password !== values.password2) {
-      context.form.elements['password2'].setCustomValidity('dummy');
-    } else {
-      // Reset error
-      context.form.elements['password2'].setCustomValidity('');
-    }
-
-    validated = true;
-    if (context.form.checkValidity()) {
-      loading = true;
-      values = formToJSON(context.form);
-
-      if (values.file_profile_image) {
-        // Upload first image to make sure it is valid
-        try {
-          values.profile_image = await uploadFile(context.form.file_profile_image);
-          values.delete_image = false;
-        } catch (error) {
-          errorNotification(error.message, $_('notification.form.upload.error.title', { default: 'Upload error' }));
+  import { onMount, onDestroy } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { _, number } from 'svelte-i18n';
+  import { PageHeader, BreadcrumbItem } from '@keenmate/svelte-adminlte';
+  import { createForm } from 'felte';
+  import { Config } from '@keenmate/svelte-adminlte';
+
+  import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
+  import { successNotification, errorNotification } from '../providers/notification-provider';
+  import { autoDarkMode } from '../helpers/color-helpers';
+  import { formToJSON, invalid_form_fields } from '../helpers/form-helpers';
+  import { languageFlag } from '../helpers/string-helpers';
+  import { fetchSystemSettings, updateSystemSettings, uploadFile } from '../providers/api';
+  import { changeLang, languages, currencies, currency } from '../locale/i18n';
+  import { isDay, isDarkDesktop } from '../stores/terrariumpi';
+
+  import Card from '../user-controls/Card.svelte';
+  import CardSettingsTools from '../components/common/CardSettingsTools.svelte';
+  import Field from '../components/form/Field.svelte';
+  import FileUpload from '../components/form/FileUpload.svelte';
+  import Select from '../components/form/Select.svelte';
+  import Switch from '../components/form/Switch.svelte';
+  import Helper from '../components/form/Helper.svelte';
+
+  let formData = writable({});
+  let editForm = null;
+
+  const units = {
+    temperature: [
+      { value: 'celsius', text: $_('settings.units.celsius', { default: 'Celsius' }) },
+      { value: 'fahrenheit', text: $_('settings.units.fahrenheit', { default: 'Fahrenheit' }) },
+      { value: 'kelvin', text: $_('settings.units.kelvin', { default: 'Kelvin' }) },
+    ],
+    distance: [
+      { value: 'cm', text: $_('settings.units.cm', { default: 'Centimeter' }) },
+      { value: 'inch', text: $_('settings.units.inch', { default: 'Inch' }) },
+    ],
+    liquid_volume: [
+      { value: 'l', text: $_('settings.units.l', { default: 'Liter' }) },
+      { value: 'ukgall', text: $_('settings.units.ukgall', { default: 'UK Gallons' }) },
+      { value: 'usgall', text: $_('settings.units.usgall', { default: 'US Gallons' }) },
+    ],
+    wind_speed: [
+      { value: 'm/s', text: $_('settings.units.m_s', { default: 'Meter per second' }) },
+      { value: 'km/h', text: $_('settings.units.km_h', { default: 'Kilometer per hour' }) },
+      { value: 'm/h', text: $_('settings.units.m_h', { default: 'Miles per hour' }) },
+      { value: 'beaufort', text: $_('settings.units.beaufort', { default: 'Beaufort' }) },
+    ],
+  };
+
+  const { form, setFields, isSubmitting, reset } = createForm({
+    onSubmit: async (values, context) => {
+      // Extra check on the password
+      if (values.password !== '' && values.password2 !== '' && values.password !== values.password2) {
+        context.form.elements['password2'].setCustomValidity('dummy');
+      } else {
+        // Reset error
+        context.form.elements['password2'].setCustomValidity('');
+      }
+
+      validated = true;
+      if (context.form.checkValidity()) {
+        loading = true;
+        values = formToJSON(context.form);
+
+        if (values.file_profile_image) {
+          // Upload first image to make sure it is valid
+          try {
+            values.profile_image = await uploadFile(context.form.file_profile_image);
+            values.delete_image = false;
+          } catch (error) {
+            errorNotification(error.message, $_('notification.form.upload.error.title', { default: 'Upload error' }));
+
+            loading = false;
+            validated = false;
+
+            // Return to current form
+            return;
+          }
+        }
 
-          loading = false;
-          validated = false;
+        delete values.file_profile_image;
+        // TODO: Fix this. We need to convert to string, so that backend settings will work.... not handy or nice
+        Object.keys(values).forEach((key) => {
+          if (key === 'exclude_ids') {
+            values[key] = values[key].join(',');
+          } else {
+            values[key] = values[key] + '';
+          }
+        });
 
-          // Return to current form
-          return;
+        try {
+          await updateSystemSettings(values);
+          successNotification(
+            $_('system.settings.save.ok.message', { default: 'Settings are updated.' }),
+            $_('notification.form.save.ok.title', { default: 'Update OK' }),
+          );
+
+          changeLang(values.language);
+          currency.set(values.currency);
+          Config.set(formToJSON(context.form));
+          autoDarkMode($isDay, $isDarkDesktop);
+        } catch (error) {
+          errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
         }
+        loading = false;
+        validated = false;
+      } else {
+        let error_message = $_('webcams.settings.save.error.required_fields', {
+          default: 'Not all required fields are entered correctly.',
+        });
+        error_message += "\n'" + invalid_form_fields(editForm).join("'\n'") + "'";
+        errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
       }
-
-      delete values.file_profile_image;
-      // TODO: Fix this. We need to convert to string, so that backend settings will work.... not handy or nice
-      Object.keys(values).forEach((key) => {
-        if (key === 'exclude_ids') {
-          values[key] = values[key].join(',');
-        } else {
-          values[key] = values[key] + '';
+    },
+  });
+
+  //let languages    = []
+  let loading = true;
+  let validated = false;
+  let excluded_ids = [];
+
+  onMount(() => {
+    (async () => {
+      await fetchSystemSettings(null, (settings) => {
+        for (let field of settings) {
+          $formData[field.id] = field.value;
+
+          // TODO: Fix json data to real true and false values
+          $formData[field.id] =
+            $formData[field.id] === 'true' ? true : $formData[field.id] === 'false' ? false : $formData[field.id];
+
+          if (field.id === 'exclude_ids') {
+            excluded_ids = $formData[field.id].map((item) => {
+              return { value: item.id, text: item.name };
+            });
+            $formData[field.id] = $formData[field.id].map((item) => {
+              return item.id;
+            });
+          } else if (field.id === 'language') {
+            $formData[field.id] = $formData[field.id].replace(/_/gm, '-');
+          } else if (
+            field.id === 'always_authenticate' &&
+            ($formData[field.id] === true || $formData[field.id] === false)
+          ) {
+            $formData[field.id] = $formData[field.id] ? 1 : 0;
+          }
         }
+        setFields($formData);
+        loading = false;
       });
+    })();
 
-      try {
-        await updateSystemSettings(values);
-        successNotification(
-          $_('system.settings.save.ok.message', { default: 'Settings are updated.' }),
-          $_('notification.form.save.ok.title', { default: 'Update OK' }),
-        );
-
-        changeLang(values.language);
-        currency.set(values.currency);
-        Config.set(formToJSON(context.form));
-        autoDarkMode($isDay, $isDarkDesktop);
-      } catch (error) {
-        errorNotification(error.message, $_('notification.form.save.error.title', { default: 'Save Error' }));
-      }
-      loading = false;
-      validated = false;
-    } else {
-      let error_message = $_('webcams.settings.save.error.required_fields', {
-        default: 'Not all required fields are entered correctly.',
-      });
-      error_message += "\n'" + invalid_form_fields(editForm).join("'\n'") + "'";
-      errorNotification(error_message, $_('notification.form.save.error.title', { default: 'Save Error' }));
-    }
-  },
-});
-
-//let languages    = []
-let loading = true;
-let validated = false;
-let excluded_ids = [];
-
-onMount(() => {
-  (async () => {
-    await fetchSystemSettings(null, (settings) => {
-      for (let field of settings) {
-        $formData[field.id] = field.value;
-
-        // TODO: Fix json data to real true and false values
-        $formData[field.id] =
-          $formData[field.id] === 'true' ? true : $formData[field.id] === 'false' ? false : $formData[field.id];
-
-        if (field.id === 'exclude_ids') {
-          excluded_ids = $formData[field.id].map((item) => {
-            return { value: item.id, text: item.name };
-          });
-          $formData[field.id] = $formData[field.id].map((item) => {
-            return item.id;
-          });
-        } else if (field.id === 'language') {
-          $formData[field.id] = $formData[field.id].replace(/_/gm, '-');
-        } else if (
-          field.id === 'always_authenticate' &&
-          ($formData[field.id] === true || $formData[field.id] === false)
-        ) {
-          $formData[field.id] = $formData[field.id] ? 1 : 0;
-        }
-      }
-      setFields($formData);
-      loading = false;
-    });
-  })();
-
-  // Reset form validation
-  reset();
-  $formData = formToJSON(editForm);
-  validated = false;
-
-  // Toggle loading div
-  loading = true;
-
-  setCustomPageTitle($_('system.settings.page.title', { default: 'System settings' }));
-  editForm.setAttribute('novalidate', 'novalidate');
-});
-
-onDestroy(() => {
-  customPageTitleUsed.set(false);
-});
+    // Reset form validation
+    reset();
+    $formData = formToJSON(editForm);
+    validated = false;
+
+    // Toggle loading div
+    loading = true;
+
+    setCustomPageTitle($_('system.settings.page.title', { default: 'System settings' }));
+    editForm.setAttribute('novalidate', 'novalidate');
+  });
+
+  onDestroy(() => {
+    customPageTitleUsed.set(false);
+  });
 </script>
 
 <PageHeader>
diff --git a/gui/pages/Status.svelte b/gui/pages/Status.svelte
index e8bef15b0..8a660f6bc 100644
--- a/gui/pages/Status.svelte
+++ b/gui/pages/Status.svelte
@@ -1,106 +1,106 @@
 <script>
-import { onMount, onDestroy, setContext } from 'svelte';
-import { PageHeader } from '@keenmate/svelte-adminlte';
-import { _ } from 'svelte-i18n';
+  import { onMount, onDestroy, setContext } from 'svelte';
+  import { PageHeader } from '@keenmate/svelte-adminlte';
+  import { _ } from 'svelte-i18n';
 
-import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
-import { fetchSystemstats } from '../providers/api';
-import { uptime_format } from '../helpers/number-helpers';
-import { uptime } from '../stores/terrariumpi';
+  import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
+  import { fetchSystemstats } from '../providers/api';
+  import { uptime_format } from '../helpers/number-helpers';
+  import { uptime } from '../stores/terrariumpi';
 
-import SensorCard from '../user-controls/SensorCard.svelte';
-import Card from '../user-controls/Card.svelte';
+  import SensorCard from '../user-controls/SensorCard.svelte';
+  import Card from '../user-controls/Card.svelte';
 
-let systemStats;
-let summary;
+  let systemStats;
+  let summary;
 
-// Dummy function for Sensor cards
-setContext('sensorActions', {
-  deleteAction: (sensor) => {},
-  ignoreAction: (sensor) => {},
-});
+  // Dummy function for Sensor cards
+  setContext('sensorActions', {
+    deleteAction: (sensor) => {},
+    ignoreAction: (sensor) => {},
+  });
 
-onMount(() => {
-  (async () => {
-    await fetchSystemstats((data) => {
-      systemStats = {
-        load: {
-          id: 'system_load',
-          name: $_('system.status.load.title', { default: 'System load' }),
-          type: 'humidity',
-          error: false,
-          value: data.load.percentage[0],
-          alarm_min: 0,
-          alarm_max: 100,
-          limit_min: 0,
-          limit_max: 100,
-          exclude_avg: false,
-        },
-        cpu_temp: {
-          id: 'cpu_temp',
-          name: $_('system.status.cpu_temp.title', { default: 'CPU Temperature' }),
-          type: 'temperature',
-          error: false,
-          value: data.cpu_temperature,
-          alarm_min: 30,
-          alarm_max: 80,
-          limit_min: 0,
-          limit_max: 100,
-          exclude_avg: false,
-        },
-        memory: {
-          id: 'memory',
-          name: $_('system.status.memory.title', { default: 'Memory usage' }),
-          type: 'filesize',
-          error: false,
-          value: data.memory.used,
-          alarm_min: 0,
-          alarm_max: 0.6 * data.memory.total,
-          limit_min: 0,
-          limit_max: data.memory.total,
-          exclude_avg: false,
-        },
-        disk: {
-          id: 'disk',
-          name: $_('system.status.disk.title', { default: 'Disk usage' }),
-          type: 'filesize',
-          error: false,
-          value: data.storage.used,
-          alarm_min: 0,
-          alarm_max: 0.8 * data.storage.total,
-          limit_min: 0,
-          limit_max: data.storage.total,
-          exclude_avg: false,
-        },
-      };
-      summary = data.summary;
-    });
+  onMount(() => {
+    (async () => {
+      await fetchSystemstats((data) => {
+        systemStats = {
+          load: {
+            id: 'system_load',
+            name: $_('system.status.load.title', { default: 'System load' }),
+            type: 'humidity',
+            error: false,
+            value: data.load.percentage[0],
+            alarm_min: 0,
+            alarm_max: 100,
+            limit_min: 0,
+            limit_max: 100,
+            exclude_avg: false,
+          },
+          cpu_temp: {
+            id: 'cpu_temp',
+            name: $_('system.status.cpu_temp.title', { default: 'CPU Temperature' }),
+            type: 'temperature',
+            error: false,
+            value: data.cpu_temperature,
+            alarm_min: 30,
+            alarm_max: 80,
+            limit_min: 0,
+            limit_max: 100,
+            exclude_avg: false,
+          },
+          memory: {
+            id: 'memory',
+            name: $_('system.status.memory.title', { default: 'Memory usage' }),
+            type: 'filesize',
+            error: false,
+            value: data.memory.used,
+            alarm_min: 0,
+            alarm_max: 0.6 * data.memory.total,
+            limit_min: 0,
+            limit_max: data.memory.total,
+            exclude_avg: false,
+          },
+          disk: {
+            id: 'disk',
+            name: $_('system.status.disk.title', { default: 'Disk usage' }),
+            type: 'filesize',
+            error: false,
+            value: data.storage.used,
+            alarm_min: 0,
+            alarm_max: 0.8 * data.storage.total,
+            limit_min: 0,
+            limit_max: data.storage.total,
+            exclude_avg: false,
+          },
+        };
+        summary = data.summary;
+      });
 
-    // GUI hacks
-    for (let card of document.querySelectorAll('h3.card-title > i.fas')) {
-      card.classList = 'fas fa-microchip mr-2';
-    }
-    for (let text of document.querySelectorAll('h3.card-title > small.text-muted')) {
-      text.remove();
-    }
-    for (let tools of document.querySelectorAll('.card-tools i.fa-wrench')) {
-      tools.parentNode.remove();
-    }
-  })();
-  setCustomPageTitle($_('system.status.title', { default: 'System status' }));
+      // GUI hacks
+      for (let card of document.querySelectorAll('h3.card-title > i.fas')) {
+        card.classList = 'fas fa-microchip mr-2';
+      }
+      for (let text of document.querySelectorAll('h3.card-title > small.text-muted')) {
+        text.remove();
+      }
+      for (let tools of document.querySelectorAll('.card-tools i.fa-wrench')) {
+        tools.parentNode.remove();
+      }
+    })();
+    setCustomPageTitle($_('system.status.title', { default: 'System status' }));
 
-  // Reload every 30 seconds the enclosure data
-  let interval = setInterval(async () => {
-    fetchSystemstats((data) => (summary = data.summary));
-  }, 30 * 1000);
+    // Reload every 30 seconds the enclosure data
+    let interval = setInterval(async () => {
+      fetchSystemstats((data) => (summary = data.summary));
+    }, 30 * 1000);
 
-  //If a function is returned from onMount, it will be called when the component is unmounted.
-  return () => clearInterval(interval);
-});
+    //If a function is returned from onMount, it will be called when the component is unmounted.
+    return () => clearInterval(interval);
+  });
 
-onDestroy(() => {
-  customPageTitleUsed.set(false);
-});
+  onDestroy(() => {
+    customPageTitleUsed.set(false);
+  });
 </script>
 
 <PageHeader>
diff --git a/gui/pages/Weather.svelte b/gui/pages/Weather.svelte
index 4bef634a1..8a3924b72 100644
--- a/gui/pages/Weather.svelte
+++ b/gui/pages/Weather.svelte
@@ -1,160 +1,169 @@
 <script>
-import { onMount, onDestroy } from 'svelte';
-import { Line } from 'svelte-chartjs';
-import { Chart as ChartJS, Title, Tooltip, Legend, TimeScale, LinearScale, PointElement, LineElement } from 'chart.js';
-ChartJS.register(Title, Tooltip, Legend, TimeScale, LinearScale, PointElement, LineElement);
-import 'chartjs-adapter-dayjs-4';
-import { _ } from 'svelte-i18n';
-import { PageHeader, BreadcrumbItem } from '@keenmate/svelte-adminlte';
-import { date, time } from 'svelte-i18n';
+  import { onMount, onDestroy } from 'svelte';
+  import { Line } from 'svelte-chartjs';
+  import {
+    Chart as ChartJS,
+    Title,
+    Tooltip,
+    Legend,
+    TimeScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+  } from 'chart.js';
+  ChartJS.register(Title, Tooltip, Legend, TimeScale, LinearScale, PointElement, LineElement);
+  import 'chartjs-adapter-dayjs-4';
+  import { _ } from 'svelte-i18n';
+  import { PageHeader, BreadcrumbItem } from '@keenmate/svelte-adminlte';
+  import { date, time } from 'svelte-i18n';
 
-import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
-import { roundToPrecision } from '../helpers/number-helpers';
-import { get_weather_icon } from '../helpers/icon-helpers';
-import { isAuthenticated } from '../stores/authentication';
-import { fetchWeatherData, fetchWeatherForecast } from '../providers/api';
-import { graphDefaultOpts, graphTypes } from '../constants/graph';
-import { get_template_color } from '../helpers/color-helpers';
-import { isDay } from '../stores/terrariumpi';
+  import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
+  import { roundToPrecision } from '../helpers/number-helpers';
+  import { get_weather_icon } from '../helpers/icon-helpers';
+  import { isAuthenticated } from '../stores/authentication';
+  import { fetchWeatherData, fetchWeatherForecast } from '../providers/api';
+  import { graphDefaultOpts, graphTypes } from '../constants/graph';
+  import { get_template_color } from '../helpers/color-helpers';
+  import { isDay } from '../stores/terrariumpi';
 
-import Card from '../user-controls/Card.svelte';
-import LoginLink from '../components/common/LoginLink.svelte';
-import WeatherSettings from '../modals/WeatherFormModal.svelte';
+  import Card from '../user-controls/Card.svelte';
+  import LoginLink from '../components/common/LoginLink.svelte';
+  import WeatherSettings from '../modals/WeatherFormModal.svelte';
 
-let weatherData = {};
-let graphData = [];
-let loading_current = true;
-let loading_forecast = true;
-let showModal;
+  let weatherData = {};
+  let graphData = [];
+  let loading_current = true;
+  let loading_forecast = true;
+  let showModal;
 
-let graphOpts = { ...graphDefaultOpts };
+  let graphOpts = { ...graphDefaultOpts };
 
-const loadData = () => {
-  loadCurrentData(true);
-  loadForecastData(true);
-};
+  const loadData = () => {
+    loadCurrentData(true);
+    loadForecastData(true);
+  };
 
-const fixCardHeight = () => {
-  let cards = document.querySelectorAll('div.card div.card-body');
-  cards[1].style.height = cards[0].clientHeight + 'px';
-};
+  const fixCardHeight = () => {
+    let cards = document.querySelectorAll('div.card div.card-body');
+    cards[1].style.height = cards[0].clientHeight + 'px';
+  };
 
-const loadCurrentData = async (loading) => {
-  loading = loading || false;
-  loading_current = loading === true;
+  const loadCurrentData = async (loading) => {
+    loading = loading || false;
+    loading_current = loading === true;
 
-  if (loading === true) {
-    await fetchWeatherData((data) => (weatherData = data));
-  } else {
-    fetchWeatherData((data) => (weatherData = data));
-  }
-  loading_current = false;
-};
+    if (loading === true) {
+      await fetchWeatherData((data) => (weatherData = data));
+    } else {
+      fetchWeatherData((data) => (weatherData = data));
+    }
+    loading_current = false;
+  };
 
-const loadForecastData = async (loading) => {
-  loading = loading || false;
-  loading_forecast = loading === true;
+  const loadForecastData = async (loading) => {
+    loading = loading || false;
+    loading_forecast = loading === true;
 
-  let new_data;
-  await fetchWeatherForecast((data) => {
-    new_data = data.map((point) => {
-      point.timestamp *= 1000;
-      return point;
+    let new_data;
+    await fetchWeatherForecast((data) => {
+      new_data = data.map((point) => {
+        point.timestamp *= 1000;
+        return point;
+      });
     });
-  });
 
-  if (loading === true) {
-    graphData = {
-      labels: null,
-      datasets: [
-        {
-          label: $_('general.temperature', { default: 'Temperature' }),
-          graphType: 'temperature',
-          lineTension: 0.5,
-          data: new_data,
-          parsing: {
-            xAxisKey: 'timestamp',
-            yAxisKey: 'temperature',
+    if (loading === true) {
+      graphData = {
+        labels: null,
+        datasets: [
+          {
+            label: $_('general.temperature', { default: 'Temperature' }),
+            graphType: 'temperature',
+            lineTension: 0.5,
+            data: new_data,
+            parsing: {
+              xAxisKey: 'timestamp',
+              yAxisKey: 'temperature',
+            },
+            yAxisID: 'y',
+            fill: false,
+            borderColor: graphTypes['value'].colors.line,
+            backgroundColor: graphTypes['value'].colors.background,
           },
-          yAxisID: 'y',
-          fill: false,
-          borderColor: graphTypes['value'].colors.line,
-          backgroundColor: graphTypes['value'].colors.background,
-        },
-        {
-          label: $_('general.humidity', { default: 'Humdity' }),
-          graphType: 'humidity',
-          lineTension: 0.5,
-          data: new_data,
-          parsing: {
-            xAxisKey: 'timestamp',
-            yAxisKey: 'humidity',
+          {
+            label: $_('general.humidity', { default: 'Humdity' }),
+            graphType: 'humidity',
+            lineTension: 0.5,
+            data: new_data,
+            parsing: {
+              xAxisKey: 'timestamp',
+              yAxisKey: 'humidity',
+            },
+            yAxisID: 'y2',
+            fill: false,
+            borderColor: get_template_color('text-primary'),
+            backgroundColor: get_template_color('text-primary', 0.7),
           },
-          yAxisID: 'y2',
-          fill: false,
-          borderColor: get_template_color('text-primary'),
-          backgroundColor: get_template_color('text-primary', 0.7),
-        },
-      ],
-    };
-  } else {
-    graphOpts.animation = { duration: 0 };
-    graphData.datasets[0].data = new_data;
-    graphData.datasets[1].data = new_data;
-    graphData.labels = new_data.map((point) => {
-      return point.timestamp;
-    });
-  }
+        ],
+      };
+    } else {
+      graphOpts.animation = { duration: 0 };
+      graphData.datasets[0].data = new_data;
+      graphData.datasets[1].data = new_data;
+      graphData.labels = new_data.map((point) => {
+        return point.timestamp;
+      });
+    }
 
-  fixCardHeight();
-  setTimeout(() => {
     fixCardHeight();
-  }, 0.25);
+    setTimeout(() => {
+      fixCardHeight();
+    }, 0.25);
 
-  loading_forecast = false;
-};
+    loading_forecast = false;
+  };
 
-onMount(() => {
-  (async () => {
-    // Get initial data
-    await loadCurrentData(true);
-    loadForecastData(true);
-  })();
+  onMount(() => {
+    (async () => {
+      // Get initial data
+      await loadCurrentData(true);
+      loadForecastData(true);
+    })();
 
-  graphOpts.scales.x.time.unit = 'hour';
-  graphOpts.scales.x.time.displayFormats.hour = 'dd LT';
-  graphOpts.scales.y2.display = true;
-  graphOpts.scales.y.min = null;
-  graphOpts.scales.y2.min = null;
+    graphOpts.scales.x.time.unit = 'hour';
+    graphOpts.scales.x.time.displayFormats.hour = 'dd LT';
+    graphOpts.scales.y2.display = true;
+    graphOpts.scales.y.min = null;
+    graphOpts.scales.y2.min = null;
 
-  setCustomPageTitle($_('weather.title', { default: 'Weather' }));
+    setCustomPageTitle($_('weather.title', { default: 'Weather' }));
 
-  // Reload every 15 minutes
-  const intervalCurrent = setInterval(
-    async () => {
-      loadCurrentData(false);
-    },
-    15 * 60 * 1000,
-  );
+    // Reload every 15 minutes
+    const intervalCurrent = setInterval(
+      async () => {
+        loadCurrentData(false);
+      },
+      15 * 60 * 1000,
+    );
 
-  // Reload every 60 minutes
-  const intervalForecast = setInterval(
-    async () => {
-      loadForecastData(false);
-    },
-    60 * 60 * 1000,
-  );
+    // Reload every 60 minutes
+    const intervalForecast = setInterval(
+      async () => {
+        loadForecastData(false);
+      },
+      60 * 60 * 1000,
+    );
 
-  //If a function is returned from onMount, it will be called when the component is unmounted.
-  return () => {
-    clearInterval(intervalCurrent);
-    clearInterval(intervalForecast);
-  };
-});
+    //If a function is returned from onMount, it will be called when the component is unmounted.
+    return () => {
+      clearInterval(intervalCurrent);
+      clearInterval(intervalForecast);
+    };
+  });
 
-onDestroy(() => {
-  customPageTitleUsed.set(false);
-});
+  onDestroy(() => {
+    customPageTitleUsed.set(false);
+  });
 </script>
 
 <PageHeader>
diff --git a/gui/pages/Webcams.svelte b/gui/pages/Webcams.svelte
index 610677e47..dea453563 100644
--- a/gui/pages/Webcams.svelte
+++ b/gui/pages/Webcams.svelte
@@ -1,95 +1,95 @@
 <script>
-import { PageHeader } from '@keenmate/svelte-adminlte';
-import { _ } from 'svelte-i18n';
-import { onMount, onDestroy, getContext, setContext } from 'svelte';
+  import { PageHeader } from '@keenmate/svelte-adminlte';
+  import { _ } from 'svelte-i18n';
+  import { onMount, onDestroy, getContext, setContext } from 'svelte';
 
-import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
-import { fetchWebcams, deleteWebcam, updateSystemSettings } from '../providers/api';
-import { successNotification, errorNotification } from '../providers/notification-provider';
+  import { setCustomPageTitle, customPageTitleUsed } from '../stores/page-title';
+  import { fetchWebcams, deleteWebcam, updateSystemSettings } from '../providers/api';
+  import { successNotification, errorNotification } from '../providers/notification-provider';
 
-import WebcamCard from '../user-controls/WebcamCard.svelte';
+  import WebcamCard from '../user-controls/WebcamCard.svelte';
 
-let webcams = [];
+  let webcams = [];
 
-const { confirmModal } = getContext('confirm');
+  const { confirmModal } = getContext('confirm');
 
-const loadData = () => {
-  fetchWebcams(false, (data) => (webcams = data));
-};
+  const loadData = () => {
+    fetchWebcams(false, (data) => (webcams = data));
+  };
 
-const deleteWebcamAction = (webcam) => {
-  confirmModal(
-    $_('webcams.delete.confirm.message', {
-      default: "Are you sure you want to delete the webcam ''{name}''?",
-      values: { name: webcam.name },
-    }),
-    async () => {
-      try {
-        await deleteWebcam(webcam.id);
-        successNotification(
-          $_('webcams.delete.ok.message', {
-            default: "The webcam ''{name}'' is deleted.",
-            values: { name: webcam.name },
-          }),
-          $_('notification.delete.ok.title', { default: 'OK' }),
-        );
-        loadData();
-      } catch (e) {
-        errorNotification(
-          $_('webcams.delete.error.message', {
-            default: "The webcam ''{name}'' could not be deleted!\nError: {error}",
-            values: { name: webcam.name, error: e.message },
-          }),
-          $_('notification.delete.error.title', { default: 'ERROR' }),
-        );
-      }
-    },
-  );
-};
+  const deleteWebcamAction = (webcam) => {
+    confirmModal(
+      $_('webcams.delete.confirm.message', {
+        default: "Are you sure you want to delete the webcam ''{name}''?",
+        values: { name: webcam.name },
+      }),
+      async () => {
+        try {
+          await deleteWebcam(webcam.id);
+          successNotification(
+            $_('webcams.delete.ok.message', {
+              default: "The webcam ''{name}'' is deleted.",
+              values: { name: webcam.name },
+            }),
+            $_('notification.delete.ok.title', { default: 'OK' }),
+          );
+          loadData();
+        } catch (e) {
+          errorNotification(
+            $_('webcams.delete.error.message', {
+              default: "The webcam ''{name}'' could not be deleted!\nError: {error}",
+              values: { name: webcam.name, error: e.message },
+            }),
+            $_('notification.delete.error.title', { default: 'ERROR' }),
+          );
+        }
+      },
+    );
+  };
 
-const ignoreWebcamAction = (webcam) => {
-  confirmModal(
-    $_('webcams.confirm.ignore.message', {
-      default: "Are you sure you want to ignore the webcam ''{name}''?",
-      values: { name: webcam.name },
-    }),
-    async () => {
-      try {
-        await updateSystemSettings({ exclude_ids: webcam.id });
-        successNotification(
-          $_('webcams.exclude.ok.message', {
-            default: "The webcam ''{name}'' is ignored.",
-            values: { name: webcam.name },
-          }),
-          $_('notification.exclude.ok.title', { default: 'OK' }),
-        );
-        loadData();
-      } catch (e) {
-        errorNotification(
-          $_('webcams.exclude.error.message', {
-            default: "The webcam ''{name}'' could not be ignored!\nError: {error}",
-            values: { name: webcam.name, error: e.message },
-          }),
-          $_('notification.exclude.error.title', { default: 'ERROR' }),
-        );
-      }
-    },
-  );
-};
+  const ignoreWebcamAction = (webcam) => {
+    confirmModal(
+      $_('webcams.confirm.ignore.message', {
+        default: "Are you sure you want to ignore the webcam ''{name}''?",
+        values: { name: webcam.name },
+      }),
+      async () => {
+        try {
+          await updateSystemSettings({ exclude_ids: webcam.id });
+          successNotification(
+            $_('webcams.exclude.ok.message', {
+              default: "The webcam ''{name}'' is ignored.",
+              values: { name: webcam.name },
+            }),
+            $_('notification.exclude.ok.title', { default: 'OK' }),
+          );
+          loadData();
+        } catch (e) {
+          errorNotification(
+            $_('webcams.exclude.error.message', {
+              default: "The webcam ''{name}'' could not be ignored!\nError: {error}",
+              values: { name: webcam.name, error: e.message },
+            }),
+            $_('notification.exclude.error.title', { default: 'ERROR' }),
+          );
+        }
+      },
+    );
+  };
 
-setContext('webcamActions', {
-  deleteAction: (webcam) => deleteWebcamAction(webcam),
-  ignoreAction: (webcam) => ignoreWebcamAction(webcam),
-});
+  setContext('webcamActions', {
+    deleteAction: (webcam) => deleteWebcamAction(webcam),
+    ignoreAction: (webcam) => ignoreWebcamAction(webcam),
+  });
 
-onMount(() => {
-  setCustomPageTitle($_('webcams.title', { default: 'Webcams' }));
-  loadData();
-});
+  onMount(() => {
+    setCustomPageTitle($_('webcams.title', { default: 'Webcams' }));
+    loadData();
+  });
 
-onDestroy(() => {
-  customPageTitleUsed.set(false);
-});
+  onDestroy(() => {
+    customPageTitleUsed.set(false);
+  });
 </script>
 
 <PageHeader>
diff --git a/gui/user-controls/ButtonCard.svelte b/gui/user-controls/ButtonCard.svelte
index 9cbfd13d2..f6ec1da51 100644
--- a/gui/user-controls/ButtonCard.svelte
+++ b/gui/user-controls/ButtonCard.svelte
@@ -1,30 +1,30 @@
 <script>
-import { getContext } from 'svelte';
-import { _, date, time } from 'svelte-i18n';
+  import { getContext } from 'svelte';
+  import { _, date, time } from 'svelte-i18n';
 
-import Card from '../user-controls/Card.svelte';
-import Button from '../components/common/Button.svelte';
-import Graph from '../components/common/Graph.svelte';
-import CardSettingsTools from '../components/common/CardSettingsTools.svelte';
-import CardGraphPeriodTools from '../components/common/CardGraphPeriodTools.svelte';
+  import Card from '../user-controls/Card.svelte';
+  import Button from '../components/common/Button.svelte';
+  import Graph from '../components/common/Graph.svelte';
+  import CardSettingsTools from '../components/common/CardSettingsTools.svelte';
+  import CardGraphPeriodTools from '../components/common/CardGraphPeriodTools.svelte';
 
-import { buttons } from '../stores/terrariumpi';
-import { exportGraphPeriod } from '../helpers/graph-helpers';
+  import { buttons } from '../stores/terrariumpi';
+  import { exportGraphPeriod } from '../helpers/graph-helpers';
 
-export let enableGraph = true;
-export let button;
+  export let enableGraph = true;
+  export let button;
 
-const { editButton } = getContext('modals');
-const { deleteAction, ignoreAction } = getContext('buttonActions');
+  const { editButton } = getContext('modals');
+  const { deleteAction, ignoreAction } = getContext('buttonActions');
 
-let exporting = false;
-const exportAction = async () => {
-  exporting = true;
-  await exportGraphPeriod('buttons', button.id);
-  exporting = false;
-};
+  let exporting = false;
+  const exportAction = async () => {
+    exporting = true;
+    await exportGraphPeriod('buttons', button.id);
+    exporting = false;
+  };
 
-$buttons[button.id] = button;
+  $buttons[button.id] = button;
 </script>
 
 {#if button}
diff --git a/gui/user-controls/Card.svelte b/gui/user-controls/Card.svelte
index c479b3353..5212e28b2 100644
--- a/gui/user-controls/Card.svelte
+++ b/gui/user-controls/Card.svelte
@@ -1,45 +1,45 @@
 <script>
-import { onMount } from 'svelte';
-import { Card as BaseCard } from '@keenmate/svelte-adminlte';
-
-import CardDefaultTools from '../components/common/CardDefaultTools.svelte';
-import { getRandomString } from '../helpers/string-helpers';
-
-export let loading;
-export let noPadding = false;
-export let noTools = false;
-export let removeParent = false;
-
-let loadingDiv = null;
-let card = null;
-const cardClassID = 'crd' + getRandomString(6).toLocaleLowerCase();
-
-onMount(() => {
-  loadingDiv.parentElement.parentElement.appendChild(loadingDiv);
-
-  // Destroy the inner Svelte components as well.
-  // This will stop the loaded setInterval timers and stop reloading not needed data...
-  if (!noTools) {
-    document
-      .querySelector(`div.card.${cardClassID} button[data-card-widget="remove"]`)
-      .addEventListener('click', (event) => {
-        let parent = null;
-        if (removeParent) {
-          parent = document.querySelector(`div.card.${cardClassID}`).parentElement;
-        }
-
-        setTimeout(() => {
-          if (parent !== null) {
-            parent.remove();
+  import { onMount } from 'svelte';
+  import { Card as BaseCard } from '@keenmate/svelte-adminlte';
+
+  import CardDefaultTools from '../components/common/CardDefaultTools.svelte';
+  import { getRandomString } from '../helpers/string-helpers';
+
+  export let loading;
+  export let noPadding = false;
+  export let noTools = false;
+  export let removeParent = false;
+
+  let loadingDiv = null;
+  let card = null;
+  const cardClassID = 'crd' + getRandomString(6).toLocaleLowerCase();
+
+  onMount(() => {
+    loadingDiv.parentElement.parentElement.appendChild(loadingDiv);
+
+    // Destroy the inner Svelte components as well.
+    // This will stop the loaded setInterval timers and stop reloading not needed data...
+    if (!noTools) {
+      document
+        .querySelector(`div.card.${cardClassID} button[data-card-widget="remove"]`)
+        .addEventListener('click', (event) => {
+          let parent = null;
+          if (removeParent) {
+            parent = document.querySelector(`div.card.${cardClassID}`).parentElement;
           }
-          card.$destroy();
-        }, 550);
-      });
-  }
-  if (!$$slots.header) {
-    document.querySelector(`div.card.${cardClassID} div.card-header`).remove();
-  }
-});
+
+          setTimeout(() => {
+            if (parent !== null) {
+              parent.remove();
+            }
+            card.$destroy();
+          }, 550);
+        });
+    }
+    if (!$$slots.header) {
+      document.querySelector(`div.card.${cardClassID} div.card-header`).remove();
+    }
+  });
 </script>
 
 <BaseCard {noPadding} class="{cardClassID} {$$props.class || ''}" bind:this="{card}">
diff --git a/gui/user-controls/EnclosureAccordion.svelte b/gui/user-controls/EnclosureAccordion.svelte
index 81c58ce58..e70912236 100644
--- a/gui/user-controls/EnclosureAccordion.svelte
+++ b/gui/user-controls/EnclosureAccordion.svelte
@@ -1,9 +1,9 @@
 <script>
-import EnclosureDoorIcon from '../components/enclosure/EnclosureDoorIcon.svelte';
-import Enclosure from '../components/enclosure/Enclosure.svelte';
-import { enclosureNameSort } from '../helpers/string-helpers';
+  import EnclosureDoorIcon from '../components/enclosure/EnclosureDoorIcon.svelte';
+  import Enclosure from '../components/enclosure/Enclosure.svelte';
+  import { enclosureNameSort } from '../helpers/string-helpers';
 
-export let enclosures = [];
+  export let enclosures = [];
 </script>
 
 {#if enclosures.length > 0}
diff --git a/gui/user-controls/EnclosureCard.svelte b/gui/user-controls/EnclosureCard.svelte
index b2020038f..f3ca272b9 100644
--- a/gui/user-controls/EnclosureCard.svelte
+++ b/gui/user-controls/EnclosureCard.svelte
@@ -1,50 +1,50 @@
 <style>
-.profile_image {
-  width: 200px;
-}
+  .profile_image {
+    width: 200px;
+  }
 </style>
 
 <script>
-import { dayjs } from 'svelte-time';
-import duration from 'dayjs/esm/plugin/duration';
-dayjs.extend(duration);
-import { onMount, getContext } from 'svelte';
-import { _, time, date } from 'svelte-i18n';
+  import { dayjs } from 'svelte-time';
+  import duration from 'dayjs/esm/plugin/duration';
+  dayjs.extend(duration);
+  import { onMount, getContext } from 'svelte';
+  import { _, time, date } from 'svelte-i18n';
 
-import { Fancybox } from '@fancyapps/ui';
-import '@fancyapps/ui/dist/fancybox/fancybox.css';
+  import { Fancybox } from '@fancyapps/ui';
+  import '@fancyapps/ui/dist/fancybox/fancybox.css';
 
-import { template_sensor_type_color, template_sensor_type_icon } from '../helpers/icon-helpers';
-import { roundToPrecision } from '../helpers/number-helpers';
-import { getCustomConfig } from '../config';
-import { ApiUrl } from '../constants/urls';
-import { fancyAppsLanguage } from '../constants/ui';
-import { updateButton, isDarkInterface } from '../stores/terrariumpi';
-import { isAuthenticated } from '../stores/authentication';
-import { externalLinks, areaObjectSort } from '../helpers/string-helpers';
+  import { template_sensor_type_color, template_sensor_type_icon } from '../helpers/icon-helpers';
+  import { roundToPrecision } from '../helpers/number-helpers';
+  import { getCustomConfig } from '../config';
+  import { ApiUrl } from '../constants/urls';
+  import { fancyAppsLanguage } from '../constants/ui';
+  import { updateButton, isDarkInterface } from '../stores/terrariumpi';
+  import { isAuthenticated } from '../stores/authentication';
+  import { externalLinks, areaObjectSort } from '../helpers/string-helpers';
 
-import Card from '../user-controls/Card.svelte';
-import CardSettingsTools from '../components/common/CardSettingsTools.svelte';
-import DoorIcon from '../components/common/DoorIcon.svelte';
+  import Card from '../user-controls/Card.svelte';
+  import CardSettingsTools from '../components/common/CardSettingsTools.svelte';
+  import DoorIcon from '../components/common/DoorIcon.svelte';
 
-export let enclosure;
+  export let enclosure;
 
-const settings = getCustomConfig();
-const { editEnclosure, editArea } = getContext('modals');
-const { deleteAction, deleteArea } = getContext('enclosureActions');
+  const settings = getCustomConfig();
+  const { editEnclosure, editArea } = getContext('modals');
+  const { deleteAction, deleteArea } = getContext('enclosureActions');
 
-let last_update = null;
+  let last_update = null;
 
-onMount(() => {
-  Fancybox.bind('[data-fancybox]', {
-    l10n: fancyAppsLanguage(),
+  onMount(() => {
+    Fancybox.bind('[data-fancybox]', {
+      l10n: fancyAppsLanguage(),
+    });
   });
-});
 
-$: if (enclosure.doors) {
-  enclosure.doors.map((door) => updateButton({ ...door, ...{ enclosure: enclosure.id } }));
-}
-$: last_update = enclosure ? new Date() : null;
+  $: if (enclosure.doors) {
+    enclosure.doors.map((door) => updateButton({ ...door, ...{ enclosure: enclosure.id } }));
+  }
+  $: last_update = enclosure ? new Date() : null;
 </script>
 
 {#if enclosure}
diff --git a/gui/user-controls/ModalForm.svelte b/gui/user-controls/ModalForm.svelte
index 6b7255f5e..49142a3da 100644
--- a/gui/user-controls/ModalForm.svelte
+++ b/gui/user-controls/ModalForm.svelte
@@ -1,36 +1,36 @@
 <script>
-import { Modal, ModalCloseButton } from '@keenmate/svelte-adminlte';
-import { onMount } from 'svelte';
-import { _ } from 'svelte-i18n';
-
-export let loading = false;
-
-let wrapper_show;
-let wrapper_hide;
-let loadingDiv = null;
-
-export const show = () => {
-  // Toggle loading div
-  // loading = true
-
-  // Show the modal
-  wrapper_show();
-};
-
-export const hide = () => {
-  // Delay the loading div
-  // setTimeout(() => {
-  //   loading = false
-  // }, 1000)
-
-  // Hide modal
-  wrapper_hide();
-};
-
-onMount(() => {
-  // GUI hack: Move loading div after model content div, so we get a full modal loading div
-  loadingDiv.parentElement.parentElement.parentElement.appendChild(loadingDiv);
-});
+  import { Modal, ModalCloseButton } from '@keenmate/svelte-adminlte';
+  import { onMount } from 'svelte';
+  import { _ } from 'svelte-i18n';
+
+  export let loading = false;
+
+  let wrapper_show;
+  let wrapper_hide;
+  let loadingDiv = null;
+
+  export const show = () => {
+    // Toggle loading div
+    // loading = true
+
+    // Show the modal
+    wrapper_show();
+  };
+
+  export const hide = () => {
+    // Delay the loading div
+    // setTimeout(() => {
+    //   loading = false
+    // }, 1000)
+
+    // Hide modal
+    wrapper_hide();
+  };
+
+  onMount(() => {
+    // GUI hack: Move loading div after model content div, so we get a full modal loading div
+    loadingDiv.parentElement.parentElement.parentElement.appendChild(loadingDiv);
+  });
 </script>
 
 <Modal xlarge bind:show="{wrapper_show}" bind:hide="{wrapper_hide}">
diff --git a/gui/user-controls/RelayCard.svelte b/gui/user-controls/RelayCard.svelte
index d48fc289e..0260a1b07 100644
--- a/gui/user-controls/RelayCard.svelte
+++ b/gui/user-controls/RelayCard.svelte
@@ -1,31 +1,31 @@
 <script>
-import { getContext } from 'svelte';
-import { _, date, time } from 'svelte-i18n';
+  import { getContext } from 'svelte';
+  import { _, date, time } from 'svelte-i18n';
 
-import { template_sensor_type_icon } from '../helpers/icon-helpers';
-import { relays, updateRelay } from '../stores/terrariumpi';
-import { exportGraphPeriod } from '../helpers/graph-helpers';
+  import { template_sensor_type_icon } from '../helpers/icon-helpers';
+  import { relays, updateRelay } from '../stores/terrariumpi';
+  import { exportGraphPeriod } from '../helpers/graph-helpers';
 
-import Card from '../user-controls/Card.svelte';
-import Relay from '../components/common/Relay.svelte';
-import Graph from '../components/common/Graph.svelte';
-import CardSettingsTools from '../components/common/CardSettingsTools.svelte';
-import CardGraphPeriodTools from '../components/common/CardGraphPeriodTools.svelte';
+  import Card from '../user-controls/Card.svelte';
+  import Relay from '../components/common/Relay.svelte';
+  import Graph from '../components/common/Graph.svelte';
+  import CardSettingsTools from '../components/common/CardSettingsTools.svelte';
+  import CardGraphPeriodTools from '../components/common/CardGraphPeriodTools.svelte';
 
-export let enableGraph = true;
-export let relay;
+  export let enableGraph = true;
+  export let relay;
 
-const { editRelay } = getContext('modals');
-const { deleteAction, ignoreAction, replaceAction, manualAction } = getContext('relayActions');
+  const { editRelay } = getContext('modals');
+  const { deleteAction, ignoreAction, replaceAction, manualAction } = getContext('relayActions');
 
-let exporting = false;
-const exportAction = async () => {
-  exporting = true;
-  await exportGraphPeriod('relays', relay.id);
-  exporting = false;
-};
+  let exporting = false;
+  const exportAction = async () => {
+    exporting = true;
+    await exportGraphPeriod('relays', relay.id);
+    exporting = false;
+  };
 
-$: updateRelay(relay);
+  $: updateRelay(relay);
 </script>
 
 {#if relay}
diff --git a/gui/user-controls/SensorCard.svelte b/gui/user-controls/SensorCard.svelte
index 3a60747ff..c9c59213e 100644
--- a/gui/user-controls/SensorCard.svelte
+++ b/gui/user-controls/SensorCard.svelte
@@ -1,51 +1,51 @@
 <style>
-.light_on_off_threshold {
-  position: absolute;
-  top: 1.2rem;
-  right: 5rem;
-  font-size: 1.8rem;
-  color: gray;
-}
+  .light_on_off_threshold {
+    position: absolute;
+    top: 1.2rem;
+    right: 5rem;
+    font-size: 1.8rem;
+    color: gray;
+  }
 
-.light_on_off_threshold.on {
-  color: yellow;
-  text-shadow:
-    1px 1px 1px lightgray,
-    0 0 1em yellow,
-    0 0 0.2em orange;
-}
+  .light_on_off_threshold.on {
+    color: yellow;
+    text-shadow:
+      1px 1px 1px lightgray,
+      0 0 1em yellow,
+      0 0 0.2em orange;
+  }
 </style>
 
 <script>
-import { getContext } from 'svelte';
-import { _, date, time } from 'svelte-i18n';
+  import { getContext } from 'svelte';
+  import { _, date, time } from 'svelte-i18n';
 
-import { template_sensor_type_icon } from '../helpers/icon-helpers';
-import { exportGraphPeriod } from '../helpers/graph-helpers';
-import { sensors } from '../stores/terrariumpi';
+  import { template_sensor_type_icon } from '../helpers/icon-helpers';
+  import { exportGraphPeriod } from '../helpers/graph-helpers';
+  import { sensors } from '../stores/terrariumpi';
 
-import Card from '../user-controls/Card.svelte';
-import Gauge from '../components/common/Gauge.svelte';
-import Graph from '../components/common/Graph.svelte';
-import CardSettingsTools from '../components/common/CardSettingsTools.svelte';
-import CardGraphPeriodTools from '../components/common/CardGraphPeriodTools.svelte';
+  import Card from '../user-controls/Card.svelte';
+  import Gauge from '../components/common/Gauge.svelte';
+  import Graph from '../components/common/Graph.svelte';
+  import CardSettingsTools from '../components/common/CardSettingsTools.svelte';
+  import CardGraphPeriodTools from '../components/common/CardGraphPeriodTools.svelte';
 
-export let enableGraph = true;
-export let enableSettings = true;
-export let removeParent = false;
-export let sensor;
+  export let enableGraph = true;
+  export let enableSettings = true;
+  export let removeParent = false;
+  export let sensor;
 
-const { editSensor } = getContext('modals');
-const { deleteAction, ignoreAction } = getContext('sensorActions');
+  const { editSensor } = getContext('modals');
+  const { deleteAction, ignoreAction } = getContext('sensorActions');
 
-let exporting = false;
-const exportAction = async () => {
-  exporting = true;
-  await exportGraphPeriod('sensors', sensor.id);
-  exporting = false;
-};
+  let exporting = false;
+  const exportAction = async () => {
+    exporting = true;
+    await exportGraphPeriod('sensors', sensor.id);
+    exporting = false;
+  };
 
-$sensors[sensor.id] = sensor;
+  $sensors[sensor.id] = sensor;
 </script>
 
 {#if sensor}
diff --git a/gui/user-controls/SidebarNavTree.svelte b/gui/user-controls/SidebarNavTree.svelte
index 589854d71..826b2dddb 100644
--- a/gui/user-controls/SidebarNavTree.svelte
+++ b/gui/user-controls/SidebarNavTree.svelte
@@ -1,6 +1,6 @@
 <script>
-export let href = '#';
-export let icon;
+  export let href = '#';
+  export let icon;
 </script>
 
 <li class="nav-item">
diff --git a/gui/user-controls/WebcamCard.svelte b/gui/user-controls/WebcamCard.svelte
index 9788fad43..ac315c90d 100644
--- a/gui/user-controls/WebcamCard.svelte
+++ b/gui/user-controls/WebcamCard.svelte
@@ -1,24 +1,24 @@
 <script>
-import { setContext, getContext } from 'svelte';
-import { _ } from 'svelte-i18n';
+  import { setContext, getContext } from 'svelte';
+  import { _ } from 'svelte-i18n';
 
-import Card from '../user-controls/Card.svelte';
-import Webcam from '../components/common/Webcam.svelte';
-import CardSettingsTools from '../components/common/CardSettingsTools.svelte';
+  import Card from '../user-controls/Card.svelte';
+  import Webcam from '../components/common/Webcam.svelte';
+  import CardSettingsTools from '../components/common/CardSettingsTools.svelte';
 
-export let webcam;
+  export let webcam;
 
-const { editWebcam } = getContext('modals');
-const { deleteAction, ignoreAction } = getContext('webcamActions');
+  const { editWebcam } = getContext('modals');
+  const { deleteAction, ignoreAction } = getContext('webcamActions');
 
-let loading = true;
-function setLoading(state) {
-  loading = state;
-}
+  let loading = true;
+  function setLoading(state) {
+    loading = state;
+  }
 
-setContext('loading', {
-  setLoading,
-});
+  setContext('loading', {
+    setLoading,
+  });
 </script>
 
 {#if webcam}