Add project files.

wwwroot/js/script.js

@@ -0,0 +1,86 @@
+let container = document.getElementById('toastContainer');
+let Forms = document.querySelectorAll('form');
+let dropdownBTNs = document.querySelectorAll('a[data-target="_self"]');
+
+Forms.forEach(form => {
+    form.addEventListener('submit', function (event) {
+        event.preventDefault();
+        let data = this;
+        let formData = new FormData(data);
+        fetch(data.getAttribute('action'), {
+            method: data.getAttribute('method'),
+            body: formData
+        }).then(res => res.json())
+            .then(function (data) {
+                var toast = document.createElement('div');
+                toast.className = 'toast text-bg-' + data.background;
+                toast.setAttribute('role', 'alert');
+                toast.setAttribute('aria-live', 'assertive');
+                toast.setAttribute('aria-atomic', 'true');
+                toast.innerHTML = `<div class='toast-header'>
+                        <strong class='me-auto'>${data['title']}</strong>
+                        <button type='button' class='btn-close' data-coreui-dismiss='toast' aria-label='Close'></button>
+                    </div>
+                    <div class='toast-body'>${data['body']}</div>`;
+                toast.addEventListener('hidden.coreui.toast', (event) => {
+                    event.target.remove();
+                });
+                container.appendChild(toast);
+                let toastAlert = new coreui.Toast(toast, { "delay": 5000, "autohide": true });
+                toastAlert.show();
+                refreshTables();
+            });
+    });
+});
+
+dropdownBTNs.forEach(btn => {
+    btn.addEventListener('click', ddBtnClick);
+});
+
+function loadServers() {
+    fetch("/Servers/getAll")
+        .then((response) => response.text())
+        .then((data) => {
+            document.querySelector('table tbody').innerHTML = data;
+        });
+}
+function loadClients() {
+    fetch("/Clients/getAll")
+        .then((response) => response.text())
+        .then((data) => {
+            document.querySelector('table tbody').innerHTML = data;
+        });
+}
+
+function refreshTables() {
+    if (window.location.href.endsWith("Clients")) {
+        loadClients();
+    } else if (window.location.href.endsWith("Servers")) {
+        loadServers();
+    }
+}
+
+function ddBtnClick(event) {
+    event.preventDefault();
+    fetch(event.target.getAttribute('href'))
+        .then(res => res.json())
+        .then(function (data) {
+            var toast = document.createElement('div');
+            toast.className = 'toast text-bg-' + data.background;
+            toast.setAttribute('role', 'alert');
+            toast.setAttribute('aria-live', 'assertive');
+            toast.setAttribute('aria-atomic', 'true');
+            toast.innerHTML = `<div class='toast-header'>
+                        <strong class='me-auto'>${data['title']}</strong>
+                        <button type='button' class='btn-close' data-coreui-dismiss='toast' aria-label='Close'></button>
+                    </div>
+                    <div class='toast-body'>${data["body"]}</div>`;
+            toast.addEventListener('hidden.coreui.toast', (event) => {
+                event.target.remove();
+            });
+            container.appendChild(toast);
+            let toastAlert = new coreui.Toast(toast, { "delay": 5000, "autohide": true });
+            toastAlert.show();
+            refreshTables();
+        });
+}