[FIX] Couple of minor issues

.github/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 🐛 1.9.5 - Bug fixes and Minor Improvements [PR #388](https://github.com/Lissy93/dashy/pull/388)
+- Adds icon.horse to supported favicon APIs
+- Fixes tile move bug, Re: #366
+- Fixes save items without title bug, Re: #377
+
 ## ✨ 1.9.4 - Widget Support [PR #382](https://github.com/Lissy93/dashy/pull/382)
 - Adds support for dynamic content, through widgets
 - Adds 30+ pre-built widgets for general info and self-hosted services

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "1.9.4",
+  "version": "1.9.5",
   "license": "MIT",
   "main": "server",
   "author": "Alicia Sykes <[email protected]> (https://aliciasykes.com)",

src/App.vue

@@ -19,7 +19,6 @@ import Keys from '@/utils/StoreMutations';
 import {
   localStorageKeys,
   splashScreenTime,
-  visibleComponents as defaultVisibleComponents,
   language as defaultLanguage,
 } from '@/utils/defaults';
 
@@ -36,14 +35,20 @@ export default {
       isLoading: true, // Set to false after mount complete
     };
   },
+  watch: {
+    isEditMode(isEditMode) {
+      // When in edit mode, show confirmation dialog on page exit
+      window.onbeforeunload = isEditMode ? this.confirmExit : null;
+    },
+  },
   computed: {
     /* If the user has specified custom text for footer - get it */
     footerText() {
       return this.pageInfo && this.pageInfo.footerText ? this.pageInfo.footerText : '';
     },
     /* Determine if splash screen should be shown */
     shouldShowSplash() {
-      return (this.visibleComponents || defaultVisibleComponents).splashScreen;
+      return (this.appConfig.showSplashScreen);
     },
     config() {
       return this.$store.state.config;
@@ -77,7 +82,7 @@ export default {
     /* Hide splash screen, either after 2 seconds, or immediately based on user preference */
     hideSplash() {
       if (this.shouldShowSplash) {
-        setTimeout(() => { this.isLoading = false; }, splashScreenTime || 1500);
+        setTimeout(() => { this.isLoading = false; }, splashScreenTime || 1000);
       } else {
         this.isLoading = false;
       }
@@ -118,21 +123,27 @@ export default {
       this.$i18n.locale = language;
       document.getElementsByTagName('html')[0].setAttribute('lang', language);
     },
+    /* If placeholder element still visible, hide it */
     hideLoader() {
       const loader = document.getElementById('loader');
       if (loader) loader.style.display = 'none';
     },
+    /* Called when in edit mode and navigating away from page */
+    confirmExit(e) {
+      e.preventDefault();
+      return 'You may have unsaved edits. Are you sure you want to exit the page?';
+    },
   },
-  /* When component mounted, hide splash and initiate the injection of custom styles */
+  /* Basic initialization tasks on app load */
   mounted() {
-    this.applyLanguage();
-    this.hideSplash();
-    if (this.appConfig.customCss) {
+    this.applyLanguage(); // Apply users local language
+    this.hideSplash(); // Hide the splash screen, if visible
+    if (this.appConfig.customCss) { // Inject users custom CSS, if present
       const cleanedCss = this.appConfig.customCss.replace(/<\/?[^>]+(>|$)/g, '');
       this.injectCustomStyles(cleanedCss);
-      this.hideLoader();
     }
-    welcomeMsg();
+    this.hideLoader(); // If initial placeholder still visible, hide it
+    welcomeMsg(); // Show message in console
   },
 };
 </script>

src/assets/locales/en.json

@@ -224,6 +224,9 @@
       "save-stage-btn": "Save",
       "cancel-stage-btn": "Cancel"
     },
+    "edit-item": {
+      "missing-title-err": "An item title is required"
+    },
     "edit-section": {
       "edit-section-title": "Edit Section",
       "add-section-title": "Add New Section",

src/components/InteractiveEditor/EditItem.vue

@@ -198,19 +198,26 @@ export default {
       // Convert form data back into section.item data structure
       const structured = {};
       this.formData.forEach((row) => { structured[row.name] = row.value; });
-      // Some attributes need a little extra formatting
-      const newItem = this.formatBeforeSave(structured);
-      if (this.isNew) { // Insert new item into data store
-        newItem.id = `temp_${newItem.title}`;
-        const payload = { newItem, targetSection: this.parentSectionTitle };
-        this.$store.commit(StoreKeys.INSERT_ITEM, payload);
-      } else { // Update existing item from form data, in the store
-        this.$store.commit(StoreKeys.UPDATE_ITEM, { newItem, itemId: this.itemId });
+      if (!structured.title) { // Missing title, show error and don't proceed
+        this.$toasted.show(
+          this.$t('interactive-editor.edit-item.missing-title-err'),
+          { className: 'toast-error' },
+        );
+      } else {
+        // Some attributes need a little extra formatting
+        const newItem = this.formatBeforeSave(structured);
+        if (this.isNew) { // Insert new item into data store
+          newItem.id = `temp_${newItem.title}`;
+          const payload = { newItem, targetSection: this.parentSectionTitle };
+          this.$store.commit(StoreKeys.INSERT_ITEM, payload);
+        } else { // Update existing item from form data, in the store
+          this.$store.commit(StoreKeys.UPDATE_ITEM, { newItem, itemId: this.itemId });
+        }
+        // If we're not already in edit mode, enable it now
+        this.$store.commit(StoreKeys.SET_EDIT_MODE, true);
+        // Close edit menu
+        this.$emit('closeEditMenu');
       }
-      // If we're not already in edit mode, enable it now
-      this.$store.commit(StoreKeys.SET_EDIT_MODE, true);
-      // Close edit menu
-      this.$emit('closeEditMenu');
     },
     /* Some fields require a bit of extra processing before they're saved */
     formatBeforeSave(item) {

src/store.js

@@ -205,6 +205,7 @@ const store = new Vuex.Store({
           });
         }
       });
+      config.sections = applyItemId(config.sections);
       state.config = config;
     },
     [SET_THEME](state, theme) {

src/utils/ConfigHelpers.js

@@ -48,8 +48,6 @@ export const componentVisibility = (appConfig) => {
       ? !usersChoice.hideSettings : visibleComponents.settings,
     footer: isThere(usersChoice.hideFooter)
       ? !usersChoice.hideFooter : visibleComponents.footer,
-    splashScreen: isThere(usersChoice.hideSplashScreen)
-      ? !usersChoice.hideSplashScreen : visibleComponents.splashScreen,
   };
 };
 

src/utils/ConfigSchema.json

@@ -147,6 +147,7 @@
             "local",
             "allesedv",
             "clearbit",
+            "iconhorse",
             "faviconkit",
             "duckduckgo",
             "yandex",
@@ -344,12 +345,6 @@
               "type": "boolean",
               "default": "false",
               "description": "If set to true, the page footer will be hidden"
-            },
-            "hideSplashScreen": {
-              "title": "Hide Splash Screen?",
-              "type": "boolean",
-              "default": "true",
-              "description": "If set to true, the loading / splash screen will not be shown"
             }
           }
         },
@@ -437,6 +432,12 @@
             }
           }
         },
+        "showSplashScreen": {
+          "title": "Show splash screen",
+          "type": "boolean",
+          "default": "false",
+          "description": "If set to true, a loading screen will be shown"
+        },
         "allowConfigEdit": {
           "title": "Allow Config Editing",
           "type": "boolean",
@@ -741,4 +742,4 @@
       }
     }
   }
-}
+}

src/utils/defaults.js

@@ -185,6 +185,7 @@ module.exports = {
   faviconApiEndpoints: {
     allesedv: 'https://f1.allesedv.com/128/$URL',
     clearbit: 'https://logo.clearbit.com/$URL',
+    iconhorse: 'https://icon.horse/icon/$URL',
     faviconkit: 'https://api.faviconkit.com/$URL/64',
     duckduckgo: 'https://icons.duckduckgo.com/ip2/$URL.ico',
     yandex: 'https://favicon.yandex.net/favicon/$URL',