+ bar display mode

webroot/index.shs

@@ -1,8 +1,22 @@
 #!/bin/bash
 
 source "templates/head.sh"
+
+echo "<link rel='stylesheet' href='/style.css'>"
+
+if [[ "${get_data[type]}" == "bars" ]]; then
+	echo "<a class='right' href='/'>Graphs</a>"
+else
+	echo "<a class='right' href='/?type=bars'>Bars</a>"
+fi
+
 IFS=$'\n'
 for i in $(jq -r '.[]' < storage/appconfig/graphs.json); do
-	source "${cfg[namespace]}/webroot/uwu.shs" "$(shasum <<< $i | cut -c 1-16)"
+	echo "<div class='container'>"
+	if [[ "${get_data[type]}" != "bars" ]]; then
+		source "${cfg[namespace]}/webroot/uwu.shs" "$(shasum <<< $i | cut -c 1-16)"
+	else
+		source "${cfg[namespace]}/webroot/owo.shs" "$(shasum <<< $i | cut -c 1-16)"
+	fi
+	echo "</div>"
 done
-#echo '<img src="/uwu.shs">'

webroot/owo.shs

@@ -0,0 +1,87 @@
+#!/bin/bash
+lim=90
+
+if [[ "$1" != '' ]]; then
+	data="storage/data/$(basename $1)"
+elif [[ "${get_data[id]}" != '' ]]; then
+	data="storage/data/$(basename ${get_data[id]})"
+	header "Content-Type: image/svg+xml"
+else
+	exit 0
+fi
+
+label="$(jq -r '.label' < $data | head -n 1 | tr ' ' '_')"
+start_date="$(jq -r '.date' < $data | tail -n $lim | head -n1)"
+end_date="$(jq -r '.date' < $data | tail -n1)"
+tmp="$(mktemp)"
+type="$(jq -r '.type' < $data | head -n 1)"
+a=''
+
+if [[ "$type" == "ping" ]]; then
+	timedata="$(jq -r '.time' < $data | tail -n $lim)"
+
+	while read line; do
+		echo -n 's@title=""></div>@title="'"$line"'"></div>@;'
+	done <<< "$(jq -r '"Name: \(.label)\\\\nPing time: \(.time)ms\\\\nDate: \(.date)"' < "$data" | tail -n $lim)" > $tmp	
+
+elif [[ "$type" == "req" ]]; then
+	timedata="$(jq -r '.status' < $data | tail -n $lim)"
+	a=""
+	for i in $timedata; do
+		if [[ "$i" -gt 0 ]]; then
+			a="${a}0#"
+		elif [[ "$i" == 0 ]]; then
+			a="${a}1#"
+		fi
+	done
+	timedata="$(tr '#' '\n' <<< "$a")"
+	while read line; do
+		echo -n 's@title=""></div>@title="'"$line"'"></div>@;'
+	done <<< "$(jq -r '"Name: \(.label)\\\\nDate: \(.date)"' < "$data" | tail -n $lim)" > $tmp
+elif [[ "$type" == "port" ]]; then
+	timedata="$(jq -r '.status' < $data | tail -n $lim)"
+	for ii in $timedata; do
+		if [[ "$ii" -gt 0 ]]; then
+			a="${a}0#"
+		elif [[ "$ii" == 0 ]]; then
+			a="${a}1#"
+		fi
+	done
+	timedata="$(tr '#' '\n' <<< "$a")"
+	while read line; do
+		echo -n 's@title=""></div>@title="'"$line"'"></div>@;'
+	done <<< "$(jq -r '"Name: \(.label)\\\\nDate: \(.date)"' < "$data" | tail -n $lim)" > $tmp		
+fi
+
+
+echo "<b>$label</b><br>"
+
+for i in $timedata; do
+	if [[ "$type" != "ping" ]]; then
+		echo -n '<div class="bar '
+		if [[ "$i" == 1 ]]; then
+			echo "green"
+		elif [[ "$i" == 0 ]]; then
+			echo "vermillion"
+		else
+			echo "vermillion"
+		fi
+		echo '" title=""></div>'
+	else
+		n="$(sed -E 's/\..*//' <<< "$i")"
+		echo -n '<div class="bar '
+		if [[ "$n" -lt 75 ]]; then
+			echo -n "green"
+		elif [[ "$n" -lt 250 ]]; then
+			echo -n "yellow"
+		elif [[ "$n" -lt 500 ]]; then
+			echo -n "orange"
+		else
+			echo -n "vermillion"
+		fi
+		echo '" title=""></div>'
+	fi
+done | tr -d '\n' | sed -f $tmp #| sed 's@###START_DATE###@'"$start_date"'@;s@###END_DATE###@'"$end_date"'@'
+
+echo "<br><span>$start_date</span><span style='float:right;'>$end_date</span>"
+rm $tmp

webroot/style.css

@@ -0,0 +1,32 @@
+.green {
+	background-color: #069f72;
+}
+.vermillion {
+	background-color: #d35f27;
+}
+.orange {
+	background-color: #e69f25;
+}
+.yellow {
+	background-color: #f1e545;
+}
+.container {
+	margin-left: auto;
+	margin-right: auto;
+	display: block;
+	width: 990px;
+	margin-bottom: 16px;
+}
+.bar {
+	display: inline-block;
+	height: 64px;
+	width: 6px;
+	margin-right: 5px;
+}
+.right {
+	position: fixed;
+	right: 0px;
+}
+* {
+	font-family: sans-serif;
+}

webroot/uwu.shs

@@ -1,5 +1,5 @@
 #!/bin/bash
-lim=120
+lim=90
 
 if [[ "$1" != '' ]]; then
 	data="storage/data/$(basename $1)"