diff --git a/public_html/index.html b/public_html/index.html
index 285d74936068575941940de0dbdac160f83f38ac..b1f5963c84e31944a24e715e8bcde51d034f5f9c 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -3,9 +3,9 @@
<head>
<title>Dashboard</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
- <meta http-equiv="refresh" content="3600">
+ <meta http-equiv="refresh" content="600">
+ <meta name="viewport" content="width=device-width">
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
@@ -15,8 +15,8 @@
<h1><span>📋</span> Appmonitor Dashboard</h1>
</header>
- <section id="tag-section"><h2><span>🕛</span> fetching tags...</h2></section>
- <section id="app-section"><h2><span>🕛</span> fetching apps...</h2></setion>
+ <section id="tag-section"></section>
+ <section id="app-section"></setion>
</div>
diff --git a/public_html/javascript/functions.js b/public_html/javascript/functions.js
index f71324fa702a4dee97baf59944f5e0f6cf21f1fa..ea86bb88ad9c1665801cc3faf8206bca109e9b82 100644
--- a/public_html/javascript/functions.js
+++ b/public_html/javascript/functions.js
@@ -15,6 +15,17 @@ const AM_RESULTS={
3: 'error'
};
+const AM_ICONS={
+ 'wait': '⏳',
+ 'tag': '🏷️',
+ 'app': '🪧',
+ 'delete': '❌',
+ 'result0': '✔',
+ 'result1': '❔',
+ 'result2': '❗',
+ 'result3': '🔴',
+
+};
const OUT_ID_APPS='app-section';
const OUT_ID_TAGS='tag-section';
const ID_TAGINPUT='E_TAGS';
@@ -135,7 +146,7 @@ function _getTaglist(sData){
async function getTags(){
AM_TAGURL=_getUrlForTags();
- let out = '<h2><span>🏷️</span> Tags</h2>';
+ let out = '<h2><span>'+AM_ICONS['tag']+'</span> Tags</h2>';
try{
let response = await fetch(AM_TAGURL, { "headers":
@@ -158,7 +169,7 @@ function _getTaglist(sData){
+'</div>';
}
- o=document.getElementById(OUT_ID_TAGS).innerHTML=out;
+ document.getElementById(OUT_ID_TAGS).innerHTML=out;
}
@@ -190,6 +201,15 @@ function _getAllAppsStatus(sData){
return sReturn;
}
+/**
+ * replacement for jQuery $(this).next().toggle()
+ *
+ * @param {object} oLink clicked link
+ */
+function toggleAppDetails(oLink){
+ oDetail=oLink.nextSibling;
+ oDetail.style.display=oDetail.style.display=="none" ? "block" : "none"
+}
/**
* render application status of a single application as html
* @param {array} aData monitoring data from appmonitor api
@@ -216,7 +236,7 @@ function _getSingleAppStatus(aData){
// ----- generate output
let sReturn='<div class="app result'+ aData.meta.result +'">'
- +'<div class="title" onclick="$(this).next().toggle()">'
+ +'<div class="title" onclick="toggleAppDetails(this);">'
+'<span class="float-right">'+AM_RESULTS[aData.meta.result]+'</span>'
+'<span class="float-right url">'+aData.result.url+'</span>'
+aData.meta.website
@@ -227,7 +247,7 @@ function _getSingleAppStatus(aData){
let iAge=Math.round((new Date()).getTime() / 1000)- aData.result.ts;
sReturn+=''
- +'<table class="details">'
+ +'<table class="details" style="display: none;">'
+_appItem('Summary', 'Application status: '+ AM_RESULTS[aData.meta.result]
+ ' | Checks: ' + aData.checks.length
+ ' | Age: ' + iAge + ' sec'
@@ -252,7 +272,7 @@ async function getAppstatus(){
var o=document.getElementById(ID_TAGINPUT);
tags=o ? o.value : AM_TAGS;
- let out = '<h2><span>📦</span> Applications</h2>';
+ let out = '<h2><span>'+AM_ICONS['app']+'</span> Applications</h2>';
let apiurl=_getUrlWithTags(tags)
// let myfunction="_getAllAppsStatus";
try{
@@ -294,6 +314,9 @@ let AM_AUTH=(AM_USER)
: {}
;
+document.getElementById(OUT_ID_TAGS).innerHTML='<h2><span>'+AM_ICONS['wait']+'</span> wait ...</h2>';
+document.getElementById(OUT_ID_APPS).innerHTML='<h2><span>'+AM_ICONS['wait']+'</span> wait ...</h2>';
+
getTags();
AM_TIMER=window.setTimeout("getAppstatus()", 500);
diff --git a/public_html/main.css b/public_html/main.css
index 878e0a8542bd04de2d3c7109d075bbe3823a60d2..341a7a0a2705c7ca33aef67df8409166e12d5a89 100644
--- a/public_html/main.css
+++ b/public_html/main.css
@@ -62,7 +62,7 @@ td{vertical-align: top;}
.app .title{font-weight: bold; font-size: 130%; cursor: pointer;}
.app .url{font-size: 80%; font-weight: normal; margin-right: 2em;}
-.app .details{display: none;}
+.app .details{}
.result0{background:#dfd !important; background: linear-gradient(#dfd,#beb)!important; color:#080}
.result1{background:#eee !important; background: linear-gradient(#eee,#ddd)!important; color:#666;}