DMC/status
12
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Major overhaul of HTML/css and JS for better structure and less code.

Browse Source
This commit is contained in:
Erik Thuning 2019-03-29 11:44:49 +01:00
parent 5cddb15f11
commit ebcb484fdf
5 changed files with 151 additions and 463 deletions

84
include/Formatter.php Normal file

@ -0,0 +1,84 @@
<?php
require_once("./include/functions.php");
require_once("./include/WikiImport.php");
class Formatter {
public function __construct($htmlfile) {
$this->template = get_fragments($htmlfile);
$this->import = new WikiImport();
}
public function format_allrooms() {
$rooms = $this->get_roomlist();
$roomlist = '';
foreach ($rooms as $room) {
$roomlist .= $this->room_fragment($room);
}
return replace(array('roomlist' => $roomlist),
$this->template['fullpage']);
}
private function room_fragment($room) {
$roomdata = $this->import->getPage($room);
if ($this->has_contents($roomdata)) {
$indicator = 'warning';
$state = '';
} else {
$indicator = 'safe';
$roomdata = '<p>Inga kända fel!</p>';
$state = 'collapsed';
}
return replace(array('roomname' => $room,
'roomdata' => $roomdata,
'indicator'=> $indicator,
'state' => $state),
$this->template['room']);
}
public function format_oneroom($room) {
$rooms = $this->get_roomlist();
if(!in_array($room, $rooms)) {
return replace(array('status' => 'warning',
'statustext' => 'Inte ett rum',
'visibility' => 'hidden',
'roomdata' => ''),
$this->template['thinroom']);
}
$roomdata = $this->import->getPage($room);
$status = 'warning';
$statustext = 'Kända fel';
$visibility = '';
if (!$this->has_contents($roomdata)) {
$status = 'safe';
$statustext = "Inga kända fel";
$visibility = 'hidden';
}
return replace(array('status' => $status,
'statustext' => $statustext,
'visibility' => $visibility,
'roomdata' => $roomdata),
$this->template['thinroom']);
}
private function get_roomlist() {
$listpage = explode('</h4>', $this->import->getPage(''))[1];
$rooms = array();
preg_match_all('%<a href=[^>]+>/([^<]+)</a>%i', $listpage, $rooms);
return $rooms[1];
}
private function has_contents($roomdata) {
return trim(preg_replace('/<[^>]+>/', '', $roomdata));
}
}
?>

17
include/status.html

@ -1,4 +1,4 @@
¤¤ base ¤¤
¤¤ fullpage ¤¤
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
@ -61,11 +61,18 @@
</body>
</html>
¤¤ room ¤¤
<div class="room ¤indicator¤">
<div class="roomname ¤class¤">
<a href="JavaScript:toggle('ajax_¤roomname¤')">¤roomname¤</a>
<div class="room ¤state¤" id="¤roomname¤">
<div class="roomname ¤indicator¤" onClick="JavaScript:toggle('¤roomname¤')">
¤roomname¤
</div>
<div class="collapsible" ¤style¤ id="ajax_¤roomname¤">
<div class="roomdata">
¤roomdata¤
</div>
</div>
¤¤ thinroom ¤¤
<div class="header ¤status¤">
¤statustext¤
</div>
<div class="¤visibility¤">
¤roomdata¤
</div>

42
index.php

@ -1,45 +1,17 @@
<?php
header('Content-Type: text/html; charset=UTF-8');
header('Access-control-allow-origin: *');
error_reporting(E_ALL);
require_once("./include/WikiImport.php");
require_once("./include/functions.php");
require_once("./include/Formatter.php");
$fragments = get_fragments('./include/status.html');
$formatter = new Formatter('./include/status.html');
$import = new WikiImport();
$listpage = explode('</h4>', $import->getPage(''))[1];
$rooms = array();
preg_match_all('%<a href=[^>]+>/([^<]+)</a>%i', $listpage, $rooms);
$rooms = $rooms[1];
$roomlist = '';
foreach ($rooms as $room) {
$roomdata = $import->getPage($room);
if (trim(preg_replace('/<[^>]+>/', '', $roomdata))) {
$indicator = 'warning';
$style = 'style="display:block;"';
$class = 'expanded';
} else {
$indicator = 'safe';
$roomdata = '<p>Inga kända fel!</p>';
$style = 'style="display:none;"';
$class = 'collapsed';
}
$roomlist .= replace(array(
'roomname' => '<h2>'.$room.'</h2>',
'roomdata' => $roomdata,
'indicator'=> $indicator,
'class' => $class,
'style' => $style,
), $fragments['room']);
if(!isset($_GET['room'])) {
print $formatter->format_allrooms();
} else {
print $formatter->format_oneroom($_GET['room']);
}
print replace(array('roomlist' => $roomlist), $fragments['base']);
?>

21
script.js

@ -1,19 +1,4 @@
function toggle(divId) {
var elem = document.getElementById(divId);
var parent = elem.parentNode.childNodes;
room = parent[1];
if (elem.style.display != 'none') {
elem.style.display = 'none';
} else {
elem.style.display = 'block';
}
if ( room.className.match(/(?:^|\s)collapsed(?!\S)/) ) {
room.className = room.className.replace( /(?:^|\s)collapsed(?!\S)/g , ' expanded' );
} else {
room.className = room.className.replace( /(?:^|\s)expanded(?!\S)/g , ' collapsed' );
}
function toggle(id) {
var roomdata = document.getElementById(id)
roomdata.classList.toggle('collapsed')
}

450
style.css

@ -1,179 +1,15 @@
input[type="submit"] {
background:#e17e33!important;
border:none;
/*padding:0!important;*/
/*border is optional*/
border-bottom:1px solid #444;
cursor: pointer;
display: inline-block;
background-color: #e17e33;
border: none;
border-radius: 2px;
box-shadow: 0 1px 2px rgba(0,0,0,.15);
color: white;
font-family: 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif;
font-size: 14px;
padding: 5px;
text-decoration: none;
width: 60px;
-webkit-appearance: none;
}
.button {
margin: 0 auto;
display: inline-block;
text-align: center;
width: 240px;
height: 200px;
padding-top: 55px;
color: #333;
font-size: 40px;
font-family: sans-serif;
}
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 20px;
color: #836636;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #FEEFB3;
border: 1px solid #fbeed5;
border-radius: 8px;
}
.mono {
font-family: serif;
}
a {
color: #005b7f;
}
a:visited {
color: #7d7d7d;
}
a:hover {
color: black;
}
.center {
margin: 0 auto;
width: 800px;
text-align: center;
}
.navigation {
text-align: right;
margin-top: 20px;
margin-right: 20px;
margin-bottom: -20px;
}
.center > table {
margin-bottom: 20px;
}
table {
margin: auto;
font-family: "Helvetica Neue", Helvetica;
border-collapse: collapse;
}
.repo table {
margin-top: 10px;
}
.even {
background-color:#eef8fa;
}
.even:last-child {
background-color:#edeee1;
}
.odd:last-child {
background-color:#edeee1;
}
.odd {
background-color:#ffffff;
}
.odd .user-even {
background-color:#edeee1;
}
.even .user-odd {
background-color:#dadcc4;
}
.center > table > tbody > .even {
background-color:#eef8fa !important;
}
.center > table > tbody > .odd {
background-color:#ffffff !important;
}
table td:last-child {
padding-right: 0px;
padding-left: 0px;
}
form {
margin-top: 20px;
}
body div p {
font-size: 16px;
font-family: "Helvetica Neue", Helvetica;
}
td {
border; none;
padding: 5px;
}
h2 {
font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif;
font-size: 1.6em;
font-weight: 300;
text-align: center;
}
@charset "utf-8";
/*
* CSS for the DSV Shibboleth DS and IDP services
*
* Simon Jarbrant, 2014
*/
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
box-sizing: border-box;
}
body {
font: 76%/1.6 Verdana, Arial, Helvetica, sans-serif;
}
/* This fixes padding within divs */
div {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
/* Fix for IE showing a blue border around link images*/
a img {
border: none;
}
address {
font-style: normal;
}
#container {
margin-left: auto;
margin-right: auto;
@ -182,11 +18,18 @@ address {
padding-bottom: 60px;
}
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 20px;
color: #836636;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #FEEFB3;
border: 1px solid #fbeed5;
border-radius: 8px;
font-size: 16px;
text-align: center;
/*
* Header styling
* --------------
*/
}
#top-links, #header {
background-color: #002e5f;
@ -239,122 +82,6 @@ address {
margin-right: auto;
margin-bottom: 40px;
padding-top: 12px;
text-align: center;
}
#contents > h1 {
font-size: 2.6em;
font-weight: 300;
margin-top: 40px;
margin-bottom: 32px;
text-align: center;
}
#contents > .selection-box {
text-align: center;
display: inline-block;
}
#contents > form#login {
margin-left: auto;
margin-right: auto;
text-align: center;
width: 80%;
}
#contents > form > section {
margin-bottom: 20px;
}
#contents > .selection-box h3,
#contents > form > section > label {
display: block;
font-size: 1.5em;
font-weight: bold;
margin-bottom: 6px;
}
#contents > form > section > input.form-field {
border: solid 1px #a0a0a0;
border-radius: 3px;
font-size: 115%;
line-height: 120%;
padding: 4px 6px;
width: 170px;
}
#contents > form > section > input#username {
margin-left: 74px;
}
#contents > form > section > #username-helper {
color: #666;
display: inline-block;
font-size: 115%;
font-style: italic;
}
#contents > .selection-box .submit-button,
#contents > form > section > button.form-button {
display: inline-block;
background-color: #e17e33;
border: none;
border-radius: 2px;
box-shadow: 0 1px 2px rgba(0,0,0,.15);
color: white;
font-family: 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif;
font-size: 14px;
margin: 10px 16px;
padding: 10px 18px;
text-decoration: none;
}
.center > a {
padding: 20px 20px 20px;
background-color: #fff;
border: 1px solid #dfdfdf;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
display: inline-block;
margin: 20px;
text-decoration: none;
}
#contents > .selection-box p {
width: 100%;
}
#contents > .selection-box .description {
display: block;
margin: auto;
margin-top: 20px;
}
#contents > .selection-box .submit-button:hover,
#contents > form > section > button.form-button:hover {
background-color: #d95e00;
cursor: pointer;
}
#contents > .selection-box .selection-description {
color: #333;
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: left;
font-size: 120%;
}
.center > a,
.center > a:visited {
text-decoration: none;
cursor: pointer;
color: #000;
}
.center > a:hover {
background-color: #eee;
}
/*
@ -453,9 +180,6 @@ address {
#contents {
width: 95%;
}
#contents .selection-box {
width: 85%;
}
}
/* Small tablets */
@ -484,12 +208,6 @@ address {
#contents {
width: 95%;
}
#contents .selection-box {
padding-left: 5px;
padding-right: 5px;
}
}
/* Tablets */
@ -517,10 +235,6 @@ address {
#header-su {
display: inline-block;
}
#contents .selection-box {
padding-left: 20px;
padding-right: 20px;
}
}
/* Large desktop */
@ -534,141 +248,67 @@ address {
}
}
@media (max-width: 767px) {
.center {
width: 100%;
}
.center > a {
margin-right: 20px;
margin-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
.navigation > p {
font-size: 14px;
}
.navigation {
margin-right: 5px;
margin-top: 10px;
}
.center > h2 {
margin-top: 20px;
margin-bottom: 16px;
}
}
/* Local styles */
.room {
margin-top: 1.5em;
margin-bottom: 1em;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
margin-top: 15pt;
margin-bottom: 10pt;
border: 1px solid #dfdfdf;
border-radius: 4pt;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
overflow: hidden;
}
.roomname {
background-repeat: no-repeat;
background-position: 0.4em 0.4em;
background-size: 1em 1em;
border-radius: 8px;
}
.roomname a{
text-decoration: none;
}
.safe .collapsed:hover,
.safe .collapsed:active {
background-color: #a0cd8e;
/*border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;*/
}
.warning .collapsed:hover,
.warning .collapsed:active {
background-color: #dca7a7;
/*border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;*/
}
.safe .expanded:hover,
.safe .expanded:active {
background-color: #a0cd8e;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.warning .expanded:hover,
.warning .expanded:active {
background-color: #dca7a7;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.warning {
background-color: #f2dede;
background-position: 4pt center;
background-size: 32px 32px;
padding-top: 4pt;
padding-bottom: 4pt;
font-size: 160%;
font-weight: 300;
text-align: center;
cursor: pointer;
}
.safe {
background-color: #dff0d8;
}
.warning .roomname {
background-image: url(images/high_priority.svg);
background-size: 32px 32px;
color: #b94a48;
}
.safe .roomname {
background-image: url(images/ok.svg);
background-size: 32px 32px;
color: #468847;
}
.room .collapsible {
background-color: white;
padding-top: 10px;
padding-bottom: 10px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom: 1px solid #dfdfdf;
.warning {
background-color: #f2dede;
background-image: url(images/high_priority.svg);
color: #b94a48;
}
.room .collapsible #content,
.room .collapsible > p {
width: 90%;
text-align: left;
margin: auto;
font-size: 16px;
.safe:hover,
.safe:active {
background-color: #a0cd8e;
}
#content h2 {
text-align: left;
.warning:hover,
.warning:active {
background-color: #dca7a7;
}
.room .warning .collapsible {
.collapsed > .roomdata {
display: none;
}
.roomname h2 {
padding-top: 0.3em;
padding-bottom: 0.3em;
/*border: 1px solid black;*/
.roomdata {
padding-top: 10px;
padding-bottom: 10px;
}
li {
list-style-position: inside;
.roomdata > * {
width: 90%;
margin: auto;
font-size: 140%;
}
li p {
.roomdata li p {
white-space: nowrap;
display: inline;
}
}