Skip to content
Snippets Groups Projects
Commit c48f3d98 authored by Hahn Axel (hahn)'s avatar Hahn Axel (hahn)
Browse files

remove jquery stuff

parent b31548a8
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
public_html/index.html
+ 4
− 4
View file @ c48f3d98
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
<head> <head>
<title>Dashboard</title> <title>Dashboard</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <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"> <link rel="stylesheet" href="main.css">
</head> </head>
<body> <body>
...@@ -15,8 +15,8 @@ ...@@ -15,8 +15,8 @@
<h1><span>📋</span> Appmonitor Dashboard</h1> <h1><span>📋</span> Appmonitor Dashboard</h1>
</header> </header>
<section id="tag-section"><h2><span>🕛</span> fetching tags...</h2></section> <section id="tag-section"></section>
<section id="app-section"><h2><span>🕛</span> fetching apps...</h2></setion> <section id="app-section"></setion>
</div> </div>
......
public_html/javascript/functions.js
+ 28
− 5
View file @ c48f3d98
...@@ -15,6 +15,17 @@ const AM_RESULTS={ ...@@ -15,6 +15,17 @@ const AM_RESULTS={
3: 'error' 3: 'error'
}; };
const AM_ICONS={
'wait': '⏳',
'tag': '🏷️',
'app': '🪧',
'delete': '❌',
'result0': '✔',
'result1': '❔',
'result2': '❗',
'result3': '🔴',
};
const OUT_ID_APPS='app-section'; const OUT_ID_APPS='app-section';
const OUT_ID_TAGS='tag-section'; const OUT_ID_TAGS='tag-section';
const ID_TAGINPUT='E_TAGS'; const ID_TAGINPUT='E_TAGS';
...@@ -135,7 +146,7 @@ function _getTaglist(sData){ ...@@ -135,7 +146,7 @@ function _getTaglist(sData){
async function getTags(){ async function getTags(){
AM_TAGURL=_getUrlForTags(); AM_TAGURL=_getUrlForTags();
let out = '<h2><span>🏷️</span> Tags</h2>'; let out = '<h2><span>'+AM_ICONS['tag']+'</span> Tags</h2>';
try{ try{
let response = await fetch(AM_TAGURL, { "headers": let response = await fetch(AM_TAGURL, { "headers":
...@@ -158,7 +169,7 @@ function _getTaglist(sData){ ...@@ -158,7 +169,7 @@ function _getTaglist(sData){
+'</div>'; +'</div>';
} }
o=document.getElementById(OUT_ID_TAGS).innerHTML=out; document.getElementById(OUT_ID_TAGS).innerHTML=out;
} }
...@@ -190,6 +201,15 @@ function _getAllAppsStatus(sData){ ...@@ -190,6 +201,15 @@ function _getAllAppsStatus(sData){
return sReturn; 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 * render application status of a single application as html
* @param {array} aData monitoring data from appmonitor api * @param {array} aData monitoring data from appmonitor api
...@@ -216,7 +236,7 @@ function _getSingleAppStatus(aData){ ...@@ -216,7 +236,7 @@ function _getSingleAppStatus(aData){
// ----- generate output // ----- generate output
let sReturn='<div class="app result'+ aData.meta.result +'">' 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">'+AM_RESULTS[aData.meta.result]+'</span>'
+'<span class="float-right url">'+aData.result.url+'</span>' +'<span class="float-right url">'+aData.result.url+'</span>'
+aData.meta.website +aData.meta.website
...@@ -227,7 +247,7 @@ function _getSingleAppStatus(aData){ ...@@ -227,7 +247,7 @@ function _getSingleAppStatus(aData){
let iAge=Math.round((new Date()).getTime() / 1000)- aData.result.ts; let iAge=Math.round((new Date()).getTime() / 1000)- aData.result.ts;
sReturn+='' sReturn+=''
+'<table class="details">' +'<table class="details" style="display: none;">'
+_appItem('Summary', 'Application status: '+ AM_RESULTS[aData.meta.result] +_appItem('Summary', 'Application status: '+ AM_RESULTS[aData.meta.result]
+ ' | Checks: ' + aData.checks.length + ' | Checks: ' + aData.checks.length
+ ' | Age: ' + iAge + ' sec' + ' | Age: ' + iAge + ' sec'
...@@ -252,7 +272,7 @@ async function getAppstatus(){ ...@@ -252,7 +272,7 @@ async function getAppstatus(){
var o=document.getElementById(ID_TAGINPUT); var o=document.getElementById(ID_TAGINPUT);
tags=o ? o.value : AM_TAGS; 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 apiurl=_getUrlWithTags(tags)
// let myfunction="_getAllAppsStatus"; // let myfunction="_getAllAppsStatus";
try{ try{
...@@ -294,6 +314,9 @@ let AM_AUTH=(AM_USER) ...@@ -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(); getTags();
AM_TIMER=window.setTimeout("getAppstatus()", 500); AM_TIMER=window.setTimeout("getAppstatus()", 500);
......
public_html/main.css
+ 1
− 1
View file @ c48f3d98
...@@ -62,7 +62,7 @@ td{vertical-align: top;} ...@@ -62,7 +62,7 @@ td{vertical-align: top;}
.app .title{font-weight: bold; font-size: 130%; cursor: pointer;} .app .title{font-weight: bold; font-size: 130%; cursor: pointer;}
.app .url{font-size: 80%; font-weight: normal; margin-right: 2em;} .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} .result0{background:#dfd !important; background: linear-gradient(#dfd,#beb)!important; color:#080}
.result1{background:#eee !important; background: linear-gradient(#eee,#ddd)!important; color:#666;} .result1{background:#eee !important; background: linear-gradient(#eee,#ddd)!important; color:#666;}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment