modal

package-lock.json

@@ -1527,11 +1527,6 @@
         "strip-indent": "^3.0.0"
       }
     },
-    "svelte-simple-modal": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/svelte-simple-modal/-/svelte-simple-modal-1.2.0.tgz",
-      "integrity": "sha512-uiKQ3/iNMepzMkaw15wHpP+GieuuB8SDg+Mm+8uiS3hQDJAyjc8ApR/YtUlZs77d779sJ3lukhao+WkmoIyxzA=="
-    },
     "tailwindcss": {
       "version": "2.2.19",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.19.tgz",

package.json

@@ -28,7 +28,6 @@
   "dependencies": {
     "daisyui": "^1.20.0",
     "sirv-cli": "^1.0.14",
-    "svelte-frappe-charts": "^1.9.1",
-    "svelte-simple-modal": "^1.2.0"
+    "svelte-frappe-charts": "^1.9.1"
   }
 }

src/App.svelte

@@ -4,17 +4,14 @@
   import { Route, router, active } from "tinro";
   router.mode.hash(); // enables hash navigation method
   //router.mode.memory(); // enables in-memory navigation method
+  import Chart from "svelte-frappe-charts";
 
   import Card from "./widgets/Card.svelte";
+  import Modal from "./components/Modal.svelte";
   import Input from "./widgets/Input.svelte";
   import Toggle from "./widgets/Toggle.svelte";
   import Anydata from "./widgets/Anydata.svelte";
 
-  import Content from "./Content.svelte";
-  import Modal from "svelte-simple-modal";
-
-  import Chart from "svelte-frappe-charts";
-
   //как ставить и удалять
   //npm install --save svelte-simple-modal
   //npm uninstall svelte-simple-modal
@@ -28,6 +25,8 @@
   let myip = document.location.hostname;
   let showInput = false;
 
+  let showModal = false;
+
   //dashboard
   let wigets = [];
   let pages = [];
@@ -662,7 +661,11 @@
           <Card title="Подключение к MQTT брокеру" />
         </div>
       </Route>
-      <Route path="/utilities" />
+      <Route path="/utilities">
+        <Card title={"Пример графика"}>
+          <Chart data={datachart} type="line" />
+        </Card>
+      </Route>
       <Route path="/log">
         <Card title={"Лог"}>
           {#each coreMessages as message, i}
@@ -704,12 +707,9 @@
         </Card>
       </Route>
       <Route path="/about">
-        <Card title={"Пример графика"}>
-          <Chart data={datachart} type="line" />
-          <Modal>
-            <Content />
-          </Modal>
-        </Card>
+        <!-- Modal toggle -->
+        <button on:click={() => (showModal = !showModal)} type="button"> Toggle modal </button>
+        <Modal show={showModal} />
       </Route>
     </div>
   </ul>

src/Content.svelte

@@ -1,13 +0,0 @@
-<!-- Content.svelte -->
-<script>
-  import { getContext } from "svelte";
-  import Surprise from "./Surprise.svelte";
-
-  const { open } = getContext("simple-modal");
-
-  const showSurprise = () => {
-    open(Surprise, { message: "It's a modal!" });
-  };
-</script>
-
-<p><button on:click={showSurprise}>Show me a surprise!</button></p>

src/Surprise.svelte

@@ -1,8 +0,0 @@
-<!-- Surprise.svelte -->
-<script>
-  export let message;
-</script>
-
-<p>
-  🎉 {message} 🍾
-</p>

src/components/Modal.svelte

@@ -0,0 +1,38 @@
+<script>
+  export let show;
+</script>
+
+<div class="modal">
+  {#if show}
+    <!-- This example requires Tailwind CSS v2.0+ -->
+    <div class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+      <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" />
+        <!-- This element is to trick the browser into centering the modal contents. -->
+        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+          <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+            <div class="sm:flex sm:items-start">
+              <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                <!-- Heroicon name: outline/exclamation -->
+                <svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                </svg>
+              </div>
+              <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Deactivate account</h3>
+                <div class="mt-2">
+                  <p class="text-sm text-gray-500">Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+            <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"> Deactivate </button>
+            <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> Cancel </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  {/if}
+</div>