beenull/webvm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP network modal

Browse source
This commit is contained in:
Yuri Iozzelli 2022-09-06 09:55:06 +02:00 committed by Carlo Piovesan
parent 525693fcdc
commit eef8468d8f
2 changed files with 40 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -39,6 +39,8 @@
<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,

37
network_modal.js Normal file
View file

@ -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();
};
}