From 6510b409397f3bf3c228f462b11ce37ebe18e5d1 Mon Sep 17 00:00:00 2001
From: "Paul D. Mendes" <pauldmendes5@gmail.com>
Date: Sat, 23 May 2020 01:42:58 +0400
Subject: [PATCH] Moving cdn architecutre to bootswatch module

---
 package-lock.json                        |  5 ++++
 package.json                             |  1 +
 src/components/BootswatchThemeSelect.vue | 37 +++++++++++++++++-------
 3 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d077932a..1bac79d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2509,6 +2509,11 @@
         "vue-functional-data-merge": "^3.1.0"
       }
     },
+    "bootswatch": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/bootswatch/-/bootswatch-4.5.0.tgz",
+      "integrity": "sha512-kAfYTTWIsgUOA5nybJNM4yvOpwxm37eIb1DFZlD5jLgPttK+bLJTt9UpKWAoMQZRBQbWfC1O1w1P5PGU7lz83Q=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/package.json b/package.json
index e7a6bda6..cdaeb98d 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "axios": "^0.19.2",
     "bootstrap": "^4.5.0",
     "bootstrap-vue": "^2.14.0",
+    "bootswatch": "^4.5.0",
     "core-js": "^3.6.4",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
diff --git a/src/components/BootswatchThemeSelect.vue b/src/components/BootswatchThemeSelect.vue
index 9dc05db7..cb8cd9e7 100644
--- a/src/components/BootswatchThemeSelect.vue
+++ b/src/components/BootswatchThemeSelect.vue
@@ -43,7 +43,7 @@ export default {
   updated() {
     if (this.supportsLocalStorage) {
       const { theme } = window.localStorage;
-      console.log('theme', window.localStorage.theme);
+      console.log('theme ', window.localStorage.theme);
       if (theme) {
         console.log('Theme found in localstorage', theme);
         this.setTheme(theme);
@@ -52,25 +52,39 @@ export default {
   },
   methods: {
     handleClick(e) {
-      this.setTheme(e.target.value);
+      // this.setTheme(e.target.value);
+      this.setTheme(e.target.innerText.toLowerCase().trim());
+      // console.log(e.target);
     },
     setTheme(theme) {
       // Change the stylesheet to a different cdn
       if (this.activeTheme === theme) {
         return;
       }
+      // const stylesheet = document.querySelector(
+      //   'link[rel="stylesheet"][href$="/bootstrap.min.css"]',
+      // );
+
+      // if (stylesheet) {
+      //   stylesheet.href = theme;
+      // } else {
+      //   const link = document.createElement('link');
+      //   link.href = theme;
+      //   link.rel = 'stylesheet';
+      //   link.title = 'bootswatch-theme';
+      //   document.body.append(link);
+      // }
+      // const cdn = import(`bootswatch/dist/${theme}/bootstrap.min.css`);
+
+      // different
+
       const stylesheet = document.querySelector(
         'link[rel="stylesheet"][href$="/bootstrap.min.css"]',
       );
-      if (stylesheet) {
-        stylesheet.href = theme;
-      } else {
-        const link = document.createElement('link');
-        link.href = theme;
-        link.rel = 'stylesheet';
-        link.title = 'bootswatch-theme';
-        document.body.append(link);
-      }
+      // eslint-disable-next-line no-unused-expressions
+      // import(`bootswatch/dist/${theme}/bootstrap.min.css`);
+
+      console.log(stylesheet);
 
       // Save the theme as localstorage
       if (this.supportsLocalStorage) {
@@ -85,6 +99,7 @@ export default {
         .then((res) => {
           const { themes } = res.data;
           this.themes = themes;
+          console.log(themes);
         })
         .catch((error) => {
           console.log(error);