1129 lines
34 KiB
HTML
1129 lines
34 KiB
HTML
<!--
|
|
Written By: Robert Zmrzli robert@wellnuo.com
|
|
well_portal.html
|
|
1.0.0c
|
|
-->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WellNuo Portal</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
.top-panel {
|
|
background-color: #00008B;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.menu-button {
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.title {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.user-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background-color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #00008B;
|
|
font-weight: bold;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.user-icon::after {
|
|
/* New for popup arrow */
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -5px;
|
|
right: 50%;
|
|
transform: translateX(-50%);
|
|
border-width: 5px 5px 0 0;
|
|
border-style: solid;
|
|
border-color: #00008B transparent transparent transparent;
|
|
}
|
|
|
|
.pop-up-panel {
|
|
display: none;
|
|
position: absolute;
|
|
top: 60px;
|
|
right: 20px;
|
|
background-color: white;
|
|
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
z-index: 1000;
|
|
width: 200px;
|
|
}
|
|
|
|
.pop-up-panel button {
|
|
width: 100%;
|
|
padding: 10px;
|
|
background-color: white;
|
|
color: blue;
|
|
border: none;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
|
|
.pop-up-panel button:hover {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.main-container {
|
|
display: flex;
|
|
height: calc(100vh - 60px);
|
|
}
|
|
|
|
.left-panel {
|
|
width: 15%;
|
|
background-color: #f0f0f0;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.right-panel {
|
|
width: 85%;
|
|
height: 85%;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tree-view ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.tree-view li {
|
|
padding: 5px 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tree-view li:hover {
|
|
background-color: #ddd;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group button {
|
|
width: 100%;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#dashboard_content,
|
|
#variable_panel {
|
|
flex: 1;
|
|
background-color: #f9f9f9;
|
|
border: 1px solid #ccc;
|
|
border-radius: 10px;
|
|
padding: 0px;
|
|
text-align: left;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
height: calc(100vh - 60px); /* Adjusting height to occupy the remaining space under the top panel */
|
|
}
|
|
|
|
#variable_frame {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
}
|
|
|
|
.full-height {
|
|
height: 150%;
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
</style>
|
|
<link href="https://wellnua.com/js/3rd_party/build/css/custom.min.css" rel="stylesheet" />
|
|
<link rel="stylesheet" type="text/css" href="https://wellnua.com/js/src/demo.css" />
|
|
|
|
|
|
|
|
<script>
|
|
|
|
token = "0"
|
|
user_name = ""
|
|
user_id = "0"
|
|
privileges = 0
|
|
const baseURL = window.location.origin;
|
|
const api_url = `${baseURL}/function/well-api`;
|
|
//api_url = "https://wellwebapp.azurewebsites.net/api/web_app";
|
|
|
|
//window.onresize = adjustHeights;
|
|
|
|
function adjustHeights() {
|
|
// Measure the height of the top-panel
|
|
const topPanelHeight = document.querySelector('.top-panel').offsetHeight;
|
|
|
|
// Calculate the height for the variable panel
|
|
const variablePanelHeight = window.innerHeight - topPanelHeight;
|
|
|
|
// Set the height of the variable panel dynamically
|
|
const variablePanel = document.getElementById('variable_panel');
|
|
variablePanel.style.height = `${variablePanelHeight}px`;
|
|
|
|
// Set the height of the iframe
|
|
const variableFrame = document.getElementById('variable_frame');
|
|
variableFrame.style.height = '100%';
|
|
}
|
|
|
|
function HideAll() {
|
|
document.getElementById("login_panel").style.display = 'none';
|
|
document.getElementById("dashboard_content").style.display = 'none';
|
|
document.getElementById("variable_panel").style.display = 'none';
|
|
//document.getElementById("edit_caretaker_content").style.display = 'none';
|
|
document.getElementById("list_content").style.display = 'none';
|
|
|
|
}
|
|
|
|
// Function to remove query parameters from the current URL
|
|
function clearUrlParameters() {
|
|
// Use replaceState to modify the URL without reloading the page
|
|
const urlWithoutParams = window.location.protocol + "//" + window.location.host + window.location.pathname;
|
|
window.history.replaceState({ path: urlWithoutParams }, '', urlWithoutParams);
|
|
}
|
|
|
|
function ShowPanel(item, some_id = "") {
|
|
|
|
variable_frame = document.getElementById('variable_frame');
|
|
switch (item) {
|
|
case "dashboard_content":
|
|
HideAll();
|
|
document.getElementById(item).style.display = 'block';
|
|
break;
|
|
case 'deployments_list':
|
|
HideAll();
|
|
document.getElementById("list_content").style.display = 'block';
|
|
first = 0;
|
|
last = 1000;
|
|
GetDeployments(first, last);
|
|
break;
|
|
case 'deployments_add':
|
|
HideAll();
|
|
document.getElementById("variable_panel").style.display = 'block';
|
|
user_id = localStorage.getItem('user_id');
|
|
url = api_url + '/api?name=deployment_add&token='+token+'&user_id='+user_id+'&user_name='+user_name
|
|
//if (variable_frame.src != url) {
|
|
variable_frame.src = url;
|
|
//}
|
|
break;
|
|
case 'deployments_edit':
|
|
HideAll();
|
|
document.getElementById("variable_panel").style.display = 'block';
|
|
url = api_url + '/api?name=deployment_edit&deployment_id='+some_id+'&user_name='+user_name+'&token='+token;
|
|
//if (variable_frame.src != url) {
|
|
variable_frame.src = url;
|
|
//}
|
|
break;
|
|
case 'devices_list':
|
|
HideAll();
|
|
document.getElementById("list_content").style.display = 'block';
|
|
first = 0;
|
|
last = 1000;
|
|
GetDevices(first, last);
|
|
break;
|
|
case 'devices_add':
|
|
HideAll();
|
|
document.getElementById("variable_panel").style.display = 'block';
|
|
url = api_url + '/api?name=device_add&token='+token+'&user_name='+user_name
|
|
if (variable_frame.src != url) {
|
|
variable_frame.src = url;
|
|
}
|
|
break;
|
|
case 'devices_edit':
|
|
HideAll();
|
|
document.getElementById("variable_panel").style.display = 'block';
|
|
url = api_url + '/api?name=device_edit&email='+email+'&token='+token+'&user_name='+user_name;
|
|
if (variable_frame.src != url) {
|
|
variable_frame.src = url;
|
|
}
|
|
break;
|
|
|
|
case 'users_list':
|
|
HideAll();
|
|
document.getElementById("list_content").style.display = 'block';
|
|
first = 0;
|
|
last = 1000;
|
|
GetUsers(first, last);
|
|
break;
|
|
case 'users_add':
|
|
HideAll();
|
|
document.getElementById("variable_panel").style.display = 'block';
|
|
url = api_url + '/api?name=user_add&token='+token+'&user_name='+user_name
|
|
if (variable_frame.src != url) {
|
|
variable_frame.src = url;
|
|
}
|
|
break;
|
|
case 'users_edit':
|
|
HideAll();
|
|
document.getElementById("variable_panel").style.display = 'block';
|
|
url = api_url + '/api?name=user_edit&email='+email+'&token='+token+'&user_name='+user_name;
|
|
if (variable_frame.src != url) {
|
|
variable_frame.src = url;
|
|
}
|
|
break;
|
|
|
|
case 'caretakers_list':
|
|
HideAll();
|
|
document.getElementById("list_content").style.display = 'block';
|
|
first = 0;
|
|
last = 1000;
|
|
|
|
GetCaretakers(first, last);
|
|
break;
|
|
case 'caretakers_add':
|
|
HideAll();
|
|
document.getElementById("variable_panel").style.display = 'block';
|
|
url = api_url + '/api?name=caretaker_add&token='+token+'&user_name='+user_name
|
|
if (variable_frame.src != url) {
|
|
variable_frame.src = url;
|
|
}
|
|
break;
|
|
case 'caretakers_edit':
|
|
HideAll();
|
|
document.getElementById("variable_panel").style.display = 'block';
|
|
|
|
|
|
url = api_url + '/api?name=caretaker_edit&user_id='+some_id+'&user_name='+user_name+'&token='+token;
|
|
if (variable_frame.src != url) {
|
|
variable_frame.src = url;
|
|
//clearUrlParameters(); //uncomment once this works
|
|
}
|
|
break;
|
|
|
|
case 'beneficiaries_list':
|
|
HideAll();
|
|
document.getElementById("list_content").style.display = 'block';
|
|
first = 0;
|
|
last = 1000;
|
|
|
|
GetBeneficiaries(first, last);
|
|
break;
|
|
case 'beneficiaries_add':
|
|
HideAll();
|
|
document.getElementById("variable_panel").style.display = 'block';
|
|
url = api_url + '/api?name=beneficiary_add&token='+token+'&user_id='+user_id+'&user_name='+user_name;
|
|
//if (variable_frame.src != url) {
|
|
variable_frame.src = url;
|
|
//}
|
|
break;
|
|
case 'beneficiaries_edit':
|
|
HideAll();
|
|
document.getElementById("variable_panel").style.display = 'block';
|
|
url = api_url + '/api?name=beneficiary_edit&user_id='+some_id+'&user_name='+user_name+'&token='+token;
|
|
if (variable_frame.src != url) {
|
|
variable_frame.src = url;
|
|
}
|
|
break;
|
|
case "login_panel":
|
|
document.getElementById("login_panel").style.display = 'block';
|
|
break;
|
|
default:
|
|
console.log(item);
|
|
}
|
|
|
|
}
|
|
|
|
function TreeClicked(item, some_id = "") {
|
|
//alert("You clicked: " + item);
|
|
if (document.getElementById("login_panel").style.display == 'none') {
|
|
ShowPanel(item, some_id);
|
|
}
|
|
|
|
}
|
|
|
|
function MenuClicked(item) {
|
|
alert("You clicked menu: " + item);
|
|
}
|
|
|
|
function togglePopup() {
|
|
const popup = document.getElementById('pop-up-panel');
|
|
if (popup.style.display === 'none' || popup.style.display === '') {
|
|
popup.style.display = 'block';
|
|
} else {
|
|
popup.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// Close the popup when clicking outside of it
|
|
document.addEventListener('click', function (event) {
|
|
const isClickInside = document.getElementById('user-icon').contains(event.target);
|
|
const popup = document.getElementById('pop-up-panel');
|
|
if (!isClickInside) {
|
|
popup.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
|
|
function initialize() {
|
|
|
|
token = localStorage.getItem('token');
|
|
user_name = localStorage.getItem('user_name');
|
|
user_id = localStorage.getItem('user_id');
|
|
if (user_id == "0") {
|
|
document.getElementById("user-icon").title = "You are Logged-Out";
|
|
}
|
|
else {
|
|
document.getElementById("user-icon").title = "Your user_id ="+user_id;
|
|
}
|
|
|
|
privileges = localStorage.getItem('privileges');
|
|
|
|
const caretakersUl = document.querySelector('.caretakers-branch');
|
|
|
|
if (privileges == "-1"){
|
|
caretakersUl.style.display = 'block'
|
|
}
|
|
else {
|
|
caretakersUl.style.display = 'block';
|
|
//caretakersUl.style.display = 'none';
|
|
}
|
|
HideAll();
|
|
|
|
const LogInDiv = document.getElementById("login_panel");
|
|
const dashboard_content = document.getElementById("dashboard_content");
|
|
//const users_menu = document.getElementById("users_menu");
|
|
|
|
if (token == null || token == "0") {
|
|
LogInDiv.style.display = "block"; //"block"
|
|
HideAll();
|
|
ShowPanel("login_panel")
|
|
//users_menu.style.display = "none"; //"block"
|
|
document.getElementById('user-icon').innerHTML = "?";
|
|
}
|
|
else {
|
|
LogInDiv.style.display = "none"; //"block"
|
|
document.getElementById('user-icon').innerHTML = user_name.slice(0, 2).toUpperCase();
|
|
dashboard_content.style.display = "block"; //"block"
|
|
if (privileges == "-1") {
|
|
//users_menu.style.display = "block"; //"block"
|
|
}
|
|
else {
|
|
//users_menu.style.display = "none"; //"none"
|
|
}
|
|
ShowPanel("dashboard_content");
|
|
}
|
|
adjustHeights();
|
|
const iframe = document.getElementById('variable_frame');
|
|
iframe.addEventListener('load', FrameLoaded);
|
|
window.addEventListener('resize', adjustHeights);
|
|
}
|
|
|
|
function FrameLoaded() {
|
|
const iframe = document.getElementById('variable_frame');
|
|
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
|
|
|
|
// Check if the iframe is from the same origin
|
|
if (iframeDocument) {
|
|
const bodyContent = iframeDocument.body.innerHTML;
|
|
if (bodyContent.includes('>Log-Out<')) {
|
|
//console.log('The content contains ">Log-Out<"');
|
|
LogOut();
|
|
}
|
|
} else {
|
|
console.error('Unable to access iframe content due to cross-origin restrictions.');
|
|
}
|
|
}
|
|
|
|
async function CheckCredentials(user_name, password) {
|
|
// Form URL encoded data
|
|
const formData = new URLSearchParams();
|
|
formData.append('function', "credentials");
|
|
formData.append('user_name', user_name);
|
|
formData.append('ps', password);
|
|
formData.append('clientId', "001");
|
|
formData.append('nonce', Math.random().toString());
|
|
console.log(formData.toString());
|
|
|
|
const response = await fetch(api_url, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
mode: 'cors',
|
|
body: formData.toString()
|
|
});
|
|
|
|
if (response.ok) {
|
|
const text = await response.text();
|
|
//console.log(text);
|
|
try {
|
|
data = JSON.parse(text);
|
|
if (data.access_token != "0" && data.access_token !== undefined) {
|
|
token = data.access_token;
|
|
localStorage.setItem('token', data.access_token);
|
|
localStorage.setItem('privileges', data.privileges);
|
|
localStorage.setItem('user_name', user_name);
|
|
localStorage.setItem('user_id', data.user_id);
|
|
user_id = data.user_id;
|
|
privileges = data.privileges;
|
|
|
|
if (user_id == "0") {
|
|
document.getElementById("user-icon").title = "You are Logged-Out";
|
|
localStorage.setItem('key', "");
|
|
}
|
|
else {
|
|
document.getElementById("user-icon").title = "Your user_id ="+user_id;
|
|
localStorage.setItem('key', password);
|
|
}
|
|
|
|
const caretakersUl = document.querySelector('.caretakers-branch');
|
|
|
|
if (privileges == "-1"){
|
|
caretakersUl.style.display = 'block'
|
|
}
|
|
else {
|
|
//caretakersUl.style.display = 'none';
|
|
caretakersUl.style.display = 'block';
|
|
}
|
|
}
|
|
// Store the credentials securely
|
|
|
|
//console.log(data.privileges);
|
|
return data;
|
|
|
|
}
|
|
catch {
|
|
data = {
|
|
access_token: 0,
|
|
privileges: 0
|
|
}
|
|
return data;
|
|
}
|
|
|
|
} else {
|
|
const text = await response.text();
|
|
console.log(text);
|
|
|
|
data = {
|
|
access_token: 0,
|
|
privileges: 0
|
|
}
|
|
return data;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
async function SubmitForm(formData) {
|
|
|
|
console.log(formData.toString());
|
|
const response = await fetch(api_url, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
mode: 'cors',
|
|
body: formData.toString()
|
|
});
|
|
|
|
if (response.ok) {
|
|
const text = await response.text();
|
|
console.log(text);
|
|
if(text.includes("Log-Out")) {
|
|
LogOut();
|
|
}
|
|
else {
|
|
try {
|
|
data = JSON.parse(text);
|
|
return data;
|
|
}
|
|
catch {
|
|
data = {
|
|
ok: 0
|
|
}
|
|
return data;
|
|
}
|
|
}
|
|
|
|
} else {
|
|
//console.log(await response.json());
|
|
data = {
|
|
ok: 0
|
|
}
|
|
return data;
|
|
}
|
|
}
|
|
|
|
async function SubmitFormForPage(formData) {
|
|
|
|
console.log(formData.toString());
|
|
const response = await fetch(api_url, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
mode: 'cors',
|
|
body: formData.toString()
|
|
});
|
|
|
|
if (response.ok) {
|
|
const text = await response.text();
|
|
console.log(text);
|
|
if(text == "Log-Out") {
|
|
LogOut();
|
|
}
|
|
else {
|
|
return text;
|
|
}
|
|
|
|
} else {
|
|
//console.log(await response.json());
|
|
data = {
|
|
ok: 0
|
|
}
|
|
return data;
|
|
}
|
|
}
|
|
|
|
|
|
async function LogIn() {
|
|
//Lets determine db_file,from_time, to_time from selected options
|
|
|
|
user_name = document.getElementById("user_new").value;
|
|
ps = document.getElementById("ps_new").value;
|
|
|
|
const LogInDiv = document.getElementById("login_panel");
|
|
const dashboard_content = document.getElementById("dashboard_content");
|
|
|
|
if (user_name.length < 2) {
|
|
alert("User is invalid!")
|
|
}
|
|
else if (ps.length < 1) {
|
|
alert("Fill the password!")
|
|
}
|
|
else {
|
|
data = await CheckCredentials(user_name, ps);
|
|
const users_menu = document.getElementById("users_menu");
|
|
if (data.access_token != "0" && data.access_token !== undefined) {
|
|
LogInDiv.style.display = "none"; //"block"
|
|
document.getElementById('user-icon').innerHTML = user_name.slice(0, 2).toUpperCase();
|
|
dashboard_content.style.display = "block"; //"block"
|
|
|
|
if (data.privileges == "-1"){
|
|
users_menu.style.display = "block"; //"block"
|
|
}
|
|
else {
|
|
users_menu.style.display = "block"; //"block" "none"; /
|
|
}
|
|
}
|
|
else {
|
|
alert('Invalid credentials');
|
|
users_menu.style.display = "none"; //"block"
|
|
}
|
|
}
|
|
}
|
|
|
|
function OpenCaretaker(email){
|
|
TreeClicked('caretakers_edit', email);
|
|
//alert(email);
|
|
}
|
|
|
|
function OpenBeneficiary(user_id){
|
|
TreeClicked('beneficiaries_edit', user_id);
|
|
//alert(email);
|
|
}
|
|
|
|
function OpenDeployment(deployment_id){
|
|
TreeClicked('deployments_edit', deployment_id);
|
|
}
|
|
|
|
async function GetCaretakers(first, last){
|
|
|
|
const formData = new URLSearchParams();
|
|
formData.append('function', "caretakers_list");
|
|
formData.append('token', token);
|
|
formData.append('user_name', user_name);
|
|
|
|
formData.append('first', first);
|
|
formData.append('last', last);
|
|
formData.append('privileges', privileges);
|
|
|
|
data = await SubmitForm(formData);
|
|
if (data.status !== "200 OK") {
|
|
alert('Bad response from API!');
|
|
return;
|
|
|
|
}
|
|
//return;
|
|
|
|
caretakers = data["result_list"];
|
|
if(caretakers.length < 1){
|
|
alert('No records found!');
|
|
return;
|
|
}
|
|
|
|
var table = document.getElementById("main_table");
|
|
var title = document.getElementById("list_title");
|
|
title.innerHTML = "<h2>Caretakers</h2>";
|
|
|
|
var rowCount = table.rows.length;
|
|
for (var i = rowCount - 1; i > 0; i--) {
|
|
table.deleteRow(i);
|
|
}
|
|
|
|
var headerRow = table.rows[0];
|
|
// Change the text of the first cell (column 0)
|
|
headerRow.cells[0].innerHTML = "User id";
|
|
|
|
now_time = parseInt(Date.now()/1000);
|
|
doc = document;
|
|
for (i = 0; i < caretakers.length; i++) {
|
|
email = caretakers[i]["email"];
|
|
user_id_t = caretakers[i]["user_id"];
|
|
|
|
var tr = doc.createElement("tr");
|
|
tr.style.backgroundColor = "";
|
|
var th = doc.createElement("th");
|
|
th.style="text-align:center";
|
|
th.innerHTML = user_id_t.toString();
|
|
tr.appendChild(th);
|
|
|
|
var td = doc.createElement("td");
|
|
td.style="text-align:center";
|
|
|
|
cell_content = '<a href="#" onclick="OpenCaretaker(\'' + user_id_t + '\')">' + email + '</a>';
|
|
td.innerHTML = cell_content;
|
|
tr.appendChild(td);
|
|
|
|
var td = doc.createElement("td");
|
|
td.style="text-align:center";
|
|
first_name = caretakers[i]["first_name"];
|
|
td.innerHTML = first_name;
|
|
tr.appendChild(td);
|
|
|
|
var td = doc.createElement("td");
|
|
td.style="text-align:center";
|
|
last_name = caretakers[i]["last_name"];
|
|
td.innerHTML = last_name;
|
|
tr.appendChild(td);
|
|
|
|
table.appendChild(tr);
|
|
|
|
}
|
|
}
|
|
|
|
async function GetDeployments(first, last){
|
|
|
|
const formData = new URLSearchParams();
|
|
formData.append('function', "deployments_list");
|
|
formData.append('token', token);
|
|
formData.append('user_name', user_name);
|
|
user_id = localStorage.getItem('user_id');
|
|
formData.append('user_id', user_id);
|
|
|
|
formData.append('first', first);
|
|
formData.append('last', last);
|
|
formData.append('privileges', privileges);
|
|
|
|
data = await SubmitForm(formData);
|
|
|
|
deployments = data["result_list"];
|
|
if(deployments.length < 1){
|
|
alert('No records found!');
|
|
return;
|
|
}
|
|
|
|
//return;
|
|
var table = document.getElementById("main_table");
|
|
var title = document.getElementById("list_title");
|
|
title.innerHTML = "<h2>Deployments</h2>";
|
|
|
|
var rowCount = table.rows.length;
|
|
for (var i = rowCount - 1; i > 0; i--) {
|
|
table.deleteRow(i);
|
|
}
|
|
|
|
var headerRow = table.rows[0];
|
|
// Change the text of the first cell (column 0)
|
|
headerRow.cells[0].innerHTML = "Deployment id";
|
|
|
|
now_time = parseInt(Date.now()/1000);
|
|
doc = document;
|
|
for (i = 0; i < deployments.length; i++) {
|
|
|
|
var tr = doc.createElement("tr");
|
|
tr.style.backgroundColor = "";
|
|
var th = doc.createElement("th");
|
|
th.style="text-align:center";
|
|
deployment_id = deployments[i]["deployment_id"];
|
|
cell_content = '<a href="#" onclick="OpenDeployment(\'' + deployment_id + '\')">' + deployment_id + '</a>';
|
|
th.innerHTML = cell_content;
|
|
tr.appendChild(th);
|
|
|
|
var td = doc.createElement("td");
|
|
td.style="text-align:center";
|
|
email = deployments[i]["email"];
|
|
cell_content = email;
|
|
td.innerHTML = cell_content;
|
|
tr.appendChild(td);
|
|
|
|
var td = doc.createElement("td");
|
|
td.style="text-align:center";
|
|
first_name = deployments[i]["first_name"];
|
|
td.innerHTML = first_name;
|
|
tr.appendChild(td);
|
|
|
|
var td = doc.createElement("td");
|
|
td.style="text-align:center";
|
|
last_name = deployments[i]["last_name"];
|
|
td.innerHTML = last_name;
|
|
tr.appendChild(td);
|
|
|
|
table.appendChild(tr);
|
|
|
|
}
|
|
}
|
|
|
|
|
|
async function GetDevices(first, last){
|
|
|
|
//const formData = new URLSearchParams();
|
|
//formData.append('function', "devices_list");
|
|
//formData.append('token', token);
|
|
//formData.append('user_id', user_id);
|
|
|
|
//formData.append('first', first);
|
|
//formData.append('last', last);
|
|
//formData.append('privileges', privileges);
|
|
|
|
//devices_html = await SubmitFormForPage(formData);
|
|
|
|
//here we need to fill frame with this HTML content
|
|
|
|
HideAll();
|
|
document.getElementById("variable_panel").style.display = 'block';
|
|
|
|
user_id = localStorage.getItem('user_id');
|
|
user_name = localStorage.getItem('user_name');
|
|
|
|
url = api_url + '/api?name=devices_list&token='+token+'&user_id='+user_id+'&user_name='+user_name+'&first='+first+'&last='+last+'&privileges='+privileges
|
|
console.log(url);
|
|
variable_frame = document.getElementById('variable_frame');
|
|
|
|
// Access the iframe's document and write the content
|
|
//variable_frame.contentWindow.document.open();
|
|
//variable_frame.contentWindow.document.write(devices_html);
|
|
//variable_frame.contentWindow.document.close();
|
|
|
|
//if (variable_frame.src != url) {
|
|
variable_frame.src = url;
|
|
//}
|
|
|
|
}
|
|
|
|
|
|
async function GetUsers(first, last){
|
|
|
|
const formData = new URLSearchParams();
|
|
formData.append('function', "users_list");
|
|
formData.append('token', token);
|
|
formData.append('user_name', user_name);
|
|
|
|
formData.append('first', first);
|
|
formData.append('last', last);
|
|
formData.append('privileges', privileges);
|
|
|
|
data = await SubmitForm(formData);
|
|
|
|
users = data["result_list"];
|
|
if(users.length < 1){
|
|
alert('No records found!');
|
|
return;
|
|
}
|
|
|
|
//return;
|
|
var table = document.getElementById("main_table");
|
|
var title = document.getElementById("list_title");
|
|
title.innerHTML = "Users";
|
|
|
|
var rowCount = table.rows.length;
|
|
for (var i = rowCount - 1; i > 0; i--) {
|
|
table.deleteRow(i);
|
|
}
|
|
|
|
var headerRow = table.rows[0];
|
|
// Change the text of the first cell (column 0)
|
|
headerRow.cells[0].innerHTML = "User id";
|
|
|
|
now_time = parseInt(Date.now()/1000);
|
|
doc = document;
|
|
for (i = 0; i < users.length; i++) {
|
|
|
|
var tr = doc.createElement("tr");
|
|
tr.style.backgroundColor = "";
|
|
var th = doc.createElement("th");
|
|
th.style="text-align:center";
|
|
th.innerHTML = (i+first+1).toString();
|
|
tr.appendChild(th);
|
|
|
|
var td = doc.createElement("td");
|
|
td.style="text-align:center";
|
|
email = users[i]["email"];
|
|
cell_content = '<a href="#" onclick="OpenCaretaker(\'' + email + '\')">' + email + '</a>';
|
|
td.innerHTML = cell_content;
|
|
tr.appendChild(td);
|
|
|
|
var td = doc.createElement("td");
|
|
td.style="text-align:center";
|
|
first_name = users[i]["first_name"];
|
|
td.innerHTML = first_name;
|
|
tr.appendChild(td);
|
|
|
|
var td = doc.createElement("td");
|
|
td.style="text-align:center";
|
|
last_name = users[i]["last_name"];
|
|
td.innerHTML = last_name;
|
|
tr.appendChild(td);
|
|
|
|
table.appendChild(tr);
|
|
|
|
}
|
|
}
|
|
|
|
|
|
async function GetBeneficiaries(first, last){
|
|
|
|
|
|
const formData = new URLSearchParams();
|
|
formData.append('function', "beneficiaries_list");
|
|
formData.append('token', token);
|
|
formData.append('user_name', user_name);
|
|
user_id = localStorage.getItem('user_id');
|
|
formData.append('user_id', user_id);
|
|
|
|
formData.append('first', first);
|
|
formData.append('last', last);
|
|
formData.append('privileges', privileges);
|
|
|
|
data = await SubmitForm(formData);
|
|
if (data.status !== "200 OK") {
|
|
alert('Bad response from API!');
|
|
return;
|
|
|
|
}
|
|
//return;
|
|
|
|
beneficiaries = data["result_list"];
|
|
if(beneficiaries.length < 1){
|
|
alert('No records found!');
|
|
return;
|
|
}
|
|
|
|
var table = document.getElementById("main_table");
|
|
var title = document.getElementById("list_title");
|
|
title.innerHTML = "<h2>Beneficiaries</h2>";
|
|
|
|
var rowCount = table.rows.length;
|
|
for (var i = rowCount - 1; i > 0; i--) {
|
|
table.deleteRow(i);
|
|
}
|
|
|
|
var headerRow = table.rows[0];
|
|
// Change the text of the first cell (column 0)
|
|
headerRow.cells[0].innerHTML = "User id";
|
|
|
|
now_time = parseInt(Date.now()/1000);
|
|
doc = document;
|
|
for (i = 0; i < beneficiaries.length; i++) {
|
|
email = beneficiaries[i]["email"];
|
|
user_id_t = beneficiaries[i]["user_id"];
|
|
|
|
var tr = doc.createElement("tr");
|
|
tr.style.backgroundColor = "";
|
|
var th = doc.createElement("th");
|
|
th.style="text-align:center";
|
|
th.innerHTML = user_id_t.toString();
|
|
tr.appendChild(th);
|
|
|
|
var td = doc.createElement("td");
|
|
td.style="text-align:center";
|
|
|
|
cell_content = '<a href="#" onclick="OpenBeneficiary(\'' + user_id_t + '\')">' + email + '</a>';
|
|
td.innerHTML = cell_content;
|
|
tr.appendChild(td);
|
|
|
|
var td = doc.createElement("td");
|
|
td.style="text-align:center";
|
|
first_name = beneficiaries[i]["first_name"];
|
|
td.innerHTML = first_name;
|
|
tr.appendChild(td);
|
|
|
|
var td = doc.createElement("td");
|
|
td.style="text-align:center";
|
|
last_name = beneficiaries[i]["last_name"];
|
|
td.innerHTML = last_name;
|
|
tr.appendChild(td);
|
|
|
|
table.appendChild(tr);
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function LogOut(){
|
|
console.log("LogOut")
|
|
localStorage.setItem('token', "0");
|
|
localStorage.setItem('privileges', "0");
|
|
|
|
localStorage.setItem('user_name', "?");
|
|
localStorage.setItem('user_id', "0");
|
|
|
|
document.getElementById("ps_new").value="--------";
|
|
window.location.reload(true);
|
|
document.getElementById("user-icon").title = "You are Logged-Out";
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<body onload="initialize();">
|
|
|
|
<div class="top-panel">
|
|
<div class="menu-button" onclick="MenuClicked('Item 1')">☰ Menu</div>
|
|
<div class="title">Wellnuo Portal</div>
|
|
<div class="user-icon" id="user-icon" onclick="togglePopup()" title="Click to Log out">U</div>
|
|
</div>
|
|
<div class="pop-up-panel" id="pop-up-panel">
|
|
<button onclick="LogOut();">Log-Out</button>
|
|
</div>
|
|
<div class="main-container">
|
|
<div class="left-panel">
|
|
<div class="tree-view">
|
|
<ul>
|
|
<li onclick="TreeClicked('dashboard_content')">Dashboard</li>
|
|
|
|
<li id="deployments_menu">Deployments
|
|
<ul style="padding-left: 10px;">
|
|
<li onclick="TreeClicked('deployments_list')">List</li>
|
|
<li onclick="TreeClicked('deployments_add')">Add</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li id="devices_menu">Devices
|
|
<ul style="padding-left: 10px;">
|
|
<li onclick="TreeClicked('devices_list')">List</li>
|
|
<li onclick="TreeClicked('devices_add')">Add</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li id="users_menu">Users
|
|
|
|
<ul style="padding-left: 10px;">
|
|
</ul>
|
|
<ul class="caretakers-branch" style="padding-left: 10px;">
|
|
<li></li>
|
|
<li>Caretakers</li>
|
|
<ul style="padding-left: 10px;">
|
|
<li onclick="TreeClicked('caretakers_list')">List</li>
|
|
<li onclick="TreeClicked('caretakers_add')">Add</li>
|
|
</ul>
|
|
</ul>
|
|
<ul style="padding-left: 10px;">
|
|
<li>Beneficiaries</li>
|
|
<ul style="padding-left: 10px;">
|
|
<li onclick="TreeClicked('beneficiaries_list')">List</li>
|
|
<li onclick="TreeClicked('beneficiaries_add')">Add</li>
|
|
</ul>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="right-panel">
|
|
<div id="login_panel" style="margin: 0 auto; width: 300px; height: 200px; background-color: #f9f9f9; border: 1px solid #ccc; border-radius: 5px; padding: 20px; text-align: center;">
|
|
<h1>Login</h1>
|
|
<input type="text" id="user_new" value="" placeholder="user_name"><br><br>
|
|
<input type="password" id="ps_new" value="" placeholder="Password" autocomplete="off"><br><br>
|
|
<button style="background-color: #007bff; color: white; padding: 5px 20px; border: none; border-radius: 3px; cursor: pointer;" onclick="LogIn()">Log In</button>
|
|
</div>
|
|
|
|
<div id="list_content">
|
|
|
|
<div id="devslist" class="full-height">
|
|
|
|
<table name="main_table" id="main_table" cellspacing="2" cellpadding="2">
|
|
<caption id="list_title" >
|
|
Caretakers
|
|
</caption>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th style="text-align:center" scope="col">User Id</th>
|
|
<th style="text-align:center" scope="col">Email</th>
|
|
<th style="text-align:center" scope="col">First Name</th>
|
|
<th style="text-align:center" scope="col">Last Name</th>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td style="text-align:center"><a href="google.com"><input name="mac" type="text" id="mac" style="border:none; text-align:center" value="2333" size="4"></a></td>
|
|
<td style="text-align:center"><input style="border:none; text-align:center" type="text" name="slrb" id="slrb" size="4"></td>
|
|
<td style="text-align:center"><input style="border:none; text-align:center" type="text" name="slms" id="slms" size="4"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div id="dashboard_content">
|
|
<div class="form-group">
|
|
<label for="textboxd1">Textbox 1:</label>
|
|
<input type="text" id="textboxd1">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="textboxd2">Textbox 2:</label>
|
|
<input type="text" id="textboxd2">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="textboxd3">Textbox 3:</label>
|
|
<input type="text" id="textboxd3">
|
|
</div>
|
|
<div class="form-group">
|
|
<button type="button">Button 1</button>
|
|
</div>
|
|
<div class="form-group">
|
|
<button type="button">Button 2</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="variable_panel">
|
|
<iframe id="variable_frame" src=""></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|