From eef8468d8f2a07b43006a5073c44effde9558b58 Mon Sep 17 00:00:00 2001
From: Yuri Iozzelli <y.iozzelli@gmail.com>
Date: Tue, 6 Sep 2022 09:55:06 +0200
Subject: [PATCH] WIP network modal

---
 index.html       |  4 +++-
 network_modal.js | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 network_modal.js

diff --git a/index.html b/index.html
index c2b24c3..e34ee11 100644
--- a/index.html
+++ b/index.html
@@ -39,7 +39,9 @@
     <script type="module">
         import { init } from "/tun/tailscale_tun.js";
         import { showPeers, showLoginURL } from "/tun/test/ui.js";
-
+        import * as modal from "/webvm/network_modal.js";
+        modal.create(document.body);
+        
         const { loginURL, ipStack } = await init({
             netMapCallback: showPeers,
             dnsIp: "8.8.8.8",
diff --git a/network_modal.js b/network_modal.js
new file mode 100644
index 0000000..d5ecd3c
--- /dev/null
+++ b/network_modal.js
@@ -0,0 +1,37 @@
+export const show = () => {
+	const overlay = document.getElementById("networkModalOverlay");
+	overlay.style.display = "flex";
+}
+export const hide = () => {
+	const overlay = document.getElementById("networkModalOverlay");
+	overlay.style.display = "none";
+}
+export const create = (parent) => {
+	const html = `
+<div id="networkModalOverlay" style="width:100%;height:100vh;position:absolute;display:flex ;align-items:center;justify-content:center;background:rgba(0,0,0,0.7);z-index:100">
+    <div id="networkModal" style="max-width:650px;width:100%;background:white;height:400px;display:flex;flex-direction:column;padding:10px">
+        <div class="networkModalHeader">
+            <h2>Modal Pop Up Window</h2>
+        </div>
+
+        <div class="networkModalContent">
+            <p>Modal Content</p>
+        </div>
+
+        <div class="networkModalFooter" style="margin-top:auto;">
+            <button id="networkModalClose">Close</button>
+            <button>Save</button>
+        </div>
+    </div>
+</div>
+`;
+	const templ = document.createElement("template");
+	templ.innerHTML = html;
+	parent.prepend(templ.content);
+	parent.querySelector("#networkModalClose").onclick = hide;
+	parent.querySelector("#networkModalOverlay").onclick = (e) => {
+		if (e.target === e.currentTarget)
+			hide();
+	};
+}
+