yitong-ovo/readme_en.md

## readme_en.md

      
    Raw
  

              readme_en.md
            
          
    SmokePing Web plugin


Add feature:


JavaScript reload timer (can be turned off)
Detailed content filtering (by slave/keyword)

Install:


Recommend SmokePing 2.8.2, the code is written in this version, I don't know if the old version is applicable.
But I tried 2.7.x and it works, so it probably doesn't matter...?

Download smokeping_add.js and move it to the js folder in SmokePing web directory.
Edit SmokePing configuration file /etc/smokeping/config, and setting htmltitle to yes under of Presentation.
*** Presentation ***

template = /etc/smokeping/basepage.html
htmltitle = yes
graphborders = no
charset = utf-8

Then edit /etc/smokeping/basepage.html and add in the <script> area at the end of the page:
<script>let refresh_timeout = <##step##></script>
<script async src="js/smokeping_add.js" type="text/javascript"></script>
Oh, don’t forget that we also have the original automatic refresh of SmokePing. At this time, you need to find the area of <head> at the top of the file, delete the sentence of <META http-equiv="Refresh" content="<##step##>"> or use <noscript> Wrap it up, like this:
     <noscript> <META http-equiv="Refresh" content="<##step##>"> </noscript>
It's finished.

Maybe you want to do more: Add a preview of the media link to your Smokeping(zh_CN)


## readme_zh.md

      
    Raw
  

              readme_zh.md
            
          
    SmokePing Web 插件


添加功能:


可关闭的 JavaScript 重载计时器
详情内容的过滤(按监测点/关键词)

安装:


推荐 SmokePing 2.8.2，代码是在这个版本编写的，我不知道旧版本能否适用。
但是我尝试了 2.7.x 也是可以用的，所以大概无所谓...?

下载 smokeping_add.js，移动到 SmokePing 的网页目录中的 js 文件夹内。
编辑 SmokePing 的配置文件 /etc/smokeping/config，在 Presentation 的设置下面将 htmltitle 打开。
*** Presentation ***

template = /etc/smokeping/basepage.html
htmltitle = yes
graphborders = no
charset = utf-8

然后编辑 /etc/smokeping/basepage.html，在页面尾部 <script> 区域添加:
<script>let refresh_timeout = <##step##></script>
<script async src="js/smokeping_add.js" type="text/javascript"></script>
哦，别忘了我们还有 SmokePing 原本的自动刷新。这个时候需要在文件顶端找到 <head> 的区域，将 <META http-equiv="Refresh" content="<##step##>"> 这句话删除或是使用 <noscript> 包裹起来，类似这样:
    <noscript> <META http-equiv="Refresh" content="<##step##>"> </noscript>
就完成了。

也许你想做更多: 为你的 Smokeping 添加媒体链接预览。


## smokeping_add.js
function init_auto_refresh() {
    // === UI ===
    // hide User
    document.querySelector('.navbar-user').style.display = 'none';
    // create and attach refresh status div
    let refresh_div = document.createElement('div');
    refresh_div.id = "auto_refresh";
    refresh_div.className = "navbar-user";
    refresh_div.textContent = "AutoRefresh: init";
    document.querySelector(".navbar").append(refresh_div);
    // create and attach refresh timer div
    let refresh_timer_div = document.createElement('div');
    refresh_timer_div.innerHTML = '<p id="refresh_timer">RefreshTimer: init</p>';
    refresh_timer_div.style.margin = "5px 10px";
    document.querySelector(".sidebar-menu").append(refresh_timer_div);
    refresh_timer = document.getElementById('refresh_timer');

    // get previous settings from url
    if (!window.location.search.includes('autoRefreshOFF')) {
        console.info('set auto refresh timeout.')
        refresh_div.innerText = "AutoRefresh: 🟢 ON";
        // set timer
        let refresh_timer_interval = setInterval(() => {
            if(refresh_timeout <= 0){
                clearInterval(refresh_timer_interval);
                refresh_timer.innerText = "RefreshIng...";
                window.location.reload();
            }else{
                refresh_timer.innerText = "RefreshTimer: " + refresh_timeout;
                refresh_timeout = refresh_timeout - 1;
            }
        }, 1000);
    }else{
        console.info('auto refresh disable.')
        refresh_div.innerText = "AutoRefresh: 🔴 OFF";
        refresh_timer.innerText = "RefreshTimer: disable"
    }

    // clicks to switch state
    refresh_div.addEventListener("click", function(){
        if (!window.location.search.includes('autoRefreshOFF')) {
            refresh_div.innerText = "AutoRefresh: 🔴 OFF";
            window.location.search = window.location.search + ";autoRefreshOFF";
        }else{
            refresh_div.innerText = "AutoRefresh: 🟢 ON";
            window.location.search = window.location.search.replace(";autoRefreshOFF","")
        }
    });
}

function init_filter() {
    // === UI ===
    // create and attach an input box to the top of overview.
    let filter_html = document.createElement('div');
    filter_html.innerHTML = '<input type="text" size="15" id="overview_filter" placeholder="Filter..."> <button type="button" id="filter_save">Save</button>';
    filter_html.style.margin = '5px';
    let overview_div = document.getElementsByClassName('overview').item(0);
    let details_div = document.getElementsByClassName('details').item(0);
    // if there is no overview or details, no input box is added.
    if (!overview_div.childElements().length && !details_div.childElements().length){
        console.warn('Unable to find the overview, do not add the filter text box.')
        return;
    }
    overview_div.prepend(filter_html);

    // trigger filter update when inputting content.
    filter_overview = document.getElementById('overview_filter');
    filter_overview.addEventListener('input',(event) => {filter(event.target.value);});

    // get the previously saved filter keywords from url.
    const overview_filter_keywords = get_url_overview_filter()
    if(overview_filter_keywords){
        document.getElementById('overview_filter').value = decodeURI(overview_filter_keywords.replace("overview_filter=",""));
        filter_overview.dispatchEvent(new Event('input'))
    }

    // save the filter keywords to url.
    document.getElementById("filter_save").addEventListener("click", function() {
        // after pressing the save button, if there is no content in the input box, the content currently saved in the url will be cleared.
        if (!document.getElementById('overview_filter').value) {
            if (window.location.search.includes('overview_filter=')) {
                window.location.search = window.location.search.replace(";"+ get_url_overview_filter(),"")
            }
        }else{
            // if the previous filter keyword already exists in the url, remove the old one from the url and add the new keyword in the url.
            if (window.location.search.includes('overview_filter=')) {
                const old_parm = ";"+ get_url_overview_filter();
                const new_parm = ";overview_filter=" + document.getElementById('overview_filter').value;
                window.location.search = window.location.search.replace(old_parm, new_parm)
                return;
            }
            window.location.search = window.location.search + ";overview_filter=" + document.getElementById('overview_filter').value;
        }
    });
}

// hide the non-matching details box based on the keyword content.
function filter(keywords) {
    let panels = document.querySelectorAll('div.panel');
    for (const panel_node of panels) {
        if (panel_node.querySelectorAll(".panel-heading > h2").item(0).textContent.toLowerCase().includes(keywords.toLowerCase())) {
            panel_node.style.display = '';
        } else {
            panel_node.style.display = 'none';
        }
    }
}

// get the current filter level from url
function get_url_overview_filter() {
    if(window.location.search.includes('overview_filter=')){
        search_str = window.location.search;
        if(search_str.lastIndexOf(';') > search_str.indexOf('overview_filter=')){
            return search_str.slice(search_str.indexOf('overview_filter='),search_str.lastIndexOf(';'));
        }else{
            return search_str.slice(search_str.indexOf('overview_filter='));
        }
    }else{
        return false;
    }
}

var everythingLoaded = setInterval(function() {
    if (/loaded|complete/.test(document.readyState)) {
        clearInterval(everythingLoaded);
        init_auto_refresh()
        init_filter()
    }
}, 10);
	function init_auto_refresh() {
	// === UI ===
	// hide User
	document.querySelector('.navbar-user').style.display = 'none';
	// create and attach refresh status div
	let refresh_div = document.createElement('div');
	refresh_div.id = "auto_refresh";
	refresh_div.className = "navbar-user";
	refresh_div.textContent = "AutoRefresh: init";
	document.querySelector(".navbar").append(refresh_div);
	// create and attach refresh timer div
	let refresh_timer_div = document.createElement('div');
	refresh_timer_div.innerHTML = '<p id="refresh_timer">RefreshTimer: init</p>';
	refresh_timer_div.style.margin = "5px 10px";
	document.querySelector(".sidebar-menu").append(refresh_timer_div);
	refresh_timer = document.getElementById('refresh_timer');

	// get previous settings from url
	if (!window.location.search.includes('autoRefreshOFF')) {
	console.info('set auto refresh timeout.')
	refresh_div.innerText = "AutoRefresh: 🟢 ON";
	// set timer
	let refresh_timer_interval = setInterval(() => {
	if(refresh_timeout <= 0){
	clearInterval(refresh_timer_interval);
	refresh_timer.innerText = "RefreshIng...";
	window.location.reload();
	}else{
	refresh_timer.innerText = "RefreshTimer: " + refresh_timeout;
	refresh_timeout = refresh_timeout - 1;
	}
	}, 1000);
	}else{
	console.info('auto refresh disable.')
	refresh_div.innerText = "AutoRefresh: 🔴 OFF";
	refresh_timer.innerText = "RefreshTimer: disable"
	}

	// clicks to switch state
	refresh_div.addEventListener("click", function(){
	if (!window.location.search.includes('autoRefreshOFF')) {
	refresh_div.innerText = "AutoRefresh: 🔴 OFF";
	window.location.search = window.location.search + ";autoRefreshOFF";
	}else{
	refresh_div.innerText = "AutoRefresh: 🟢 ON";
	window.location.search = window.location.search.replace(";autoRefreshOFF","")
	}
	});
	}

	function init_filter() {
	// === UI ===
	// create and attach an input box to the top of overview.
	let filter_html = document.createElement('div');
	filter_html.innerHTML = '<input type="text" size="15" id="overview_filter" placeholder="Filter..."> <button type="button" id="filter_save">Save</button>';
	filter_html.style.margin = '5px';
	let overview_div = document.getElementsByClassName('overview').item(0);
	let details_div = document.getElementsByClassName('details').item(0);
	// if there is no overview or details, no input box is added.
	if (!overview_div.childElements().length && !details_div.childElements().length){
	console.warn('Unable to find the overview, do not add the filter text box.')
	return;
	}
	overview_div.prepend(filter_html);

	// trigger filter update when inputting content.
	filter_overview = document.getElementById('overview_filter');
	filter_overview.addEventListener('input',(event) => {filter(event.target.value);});

	// get the previously saved filter keywords from url.
	const overview_filter_keywords = get_url_overview_filter()
	if(overview_filter_keywords){
	document.getElementById('overview_filter').value = decodeURI(overview_filter_keywords.replace("overview_filter=",""));
	filter_overview.dispatchEvent(new Event('input'))
	}

	// save the filter keywords to url.
	document.getElementById("filter_save").addEventListener("click", function() {
	// after pressing the save button, if there is no content in the input box, the content currently saved in the url will be cleared.
	if (!document.getElementById('overview_filter').value) {
	if (window.location.search.includes('overview_filter=')) {
	window.location.search = window.location.search.replace(";"+ get_url_overview_filter(),"")
	}
	}else{
	// if the previous filter keyword already exists in the url, remove the old one from the url and add the new keyword in the url.
	if (window.location.search.includes('overview_filter=')) {
	const old_parm = ";"+ get_url_overview_filter();
	const new_parm = ";overview_filter=" + document.getElementById('overview_filter').value;
	window.location.search = window.location.search.replace(old_parm, new_parm)
	return;
	}
	window.location.search = window.location.search + ";overview_filter=" + document.getElementById('overview_filter').value;
	}
	});
	}

	// hide the non-matching details box based on the keyword content.
	function filter(keywords) {
	let panels = document.querySelectorAll('div.panel');
	for (const panel_node of panels) {
	if (panel_node.querySelectorAll(".panel-heading > h2").item(0).textContent.toLowerCase().includes(keywords.toLowerCase())) {
	panel_node.style.display = '';
	} else {
	panel_node.style.display = 'none';
	}
	}
	}

	// get the current filter level from url
	function get_url_overview_filter() {
	if(window.location.search.includes('overview_filter=')){
	search_str = window.location.search;
	if(search_str.lastIndexOf(';') > search_str.indexOf('overview_filter=')){
	return search_str.slice(search_str.indexOf('overview_filter='),search_str.lastIndexOf(';'));
	}else{
	return search_str.slice(search_str.indexOf('overview_filter='));
	}
	}else{
	return false;
	}
	}

	var everythingLoaded = setInterval(function() {
	if (/loaded\|complete/.test(document.readyState)) {
	clearInterval(everythingLoaded);
	init_auto_refresh()
	init_filter()
	}
	}, 10);