mark offline after 110sec, dynamic <details> background for dark themes

This commit is contained in:
User 2019-03-25 05:55:11 +01:00
parent 735b7ff3b9
commit e75df5b2df
4 changed files with 30 additions and 16 deletions

View File

@ -32,7 +32,7 @@ def new_state_and_log():
with open(log_path+'current-state.json', 'r') as fin: with open(log_path+'current-state.json', 'r') as fin:
prev = loads(fin.read()) prev = loads(fin.read())
if cur['time'] - prev['period'][1] > 90: if cur['time'] - prev['period'][1] > 110:
log(prev) log(prev)
log({'period': [prev['period'][1], cur['time']], 'status': 'monitor-offline' }) log({'period': [prev['period'][1], cur['time']], 'status': 'monitor-offline' })
return {'period': [cur['time'],cur['time']], 'status': cur['status'], 'players': cur['players']} return {'period': [cur['time'],cur['time']], 'status': cur['status'], 'players': cur['players']}

View File

@ -6,12 +6,12 @@
<title>xkcraftia status</title> <title>xkcraftia status</title>
<link rel='stylesheet' href='css/style.css'> <link rel='stylesheet' href='css/style.css'>
<link rel='icon' href='img/favicon.png'> <link rel='icon' href='img/favicon.png'>
<script src='js/load-map.js' charset='utf-8'></script> <script src='js/main.js' charset='utf-8'></script>
</head> </head>
<body> <body>
<details open> <details open>
<summary> <summary>
<h2>Server status</h1> <h2>Server status</h2>
<a href='logs/' target='_blank'><img src='img/feather-external-link.svg' alt='open' title='open all logs'></a> <a href='logs/' target='_blank'><img src='img/feather-external-link.svg' alt='open' title='open all logs'></a>
</summary> </summary>
show <a href='logs/hour.html' target='f'>last hour</a>, <a href='logs/day.html' target='f'>24 hours</a>, <a href='logs/month.html' target='f'>1 month</a>, <a href='logs/4months.html' target='f'>4 months</a>, <a href='logs/18months.html' target='f'>18 months</a>: show <a href='logs/hour.html' target='f'>last hour</a>, <a href='logs/day.html' target='f'>24 hours</a>, <a href='logs/month.html' target='f'>1 month</a>, <a href='logs/4months.html' target='f'>4 months</a>, <a href='logs/18months.html' target='f'>18 months</a>:
@ -19,7 +19,7 @@
</details> </details>
<details> <details>
<summary> <summary>
<h2>Map</h1> <h2>Map</h2>
<a href='map/' target='_blank'><img src='img/feather-external-link.svg' alt='open' title='open map viewer'></a> <a href='map/' target='_blank'><img src='img/feather-external-link.svg' alt='open' title='open map viewer'></a>
</summary> </summary>
<noscript>The map viewer requires javascript.</noscript> <noscript>The map viewer requires javascript.</noscript>

View File

@ -1,12 +0,0 @@
// only load the map viewer when it's visible (and javascript is enabled)
document.addEventListener('DOMContentLoaded', (event) => {
const setMap = () => { document.querySelector('#map').src = 'map/' }
const details = document.querySelector('details:last-child')
// if <details> is not supported (looking at you, Edge), the frame will be
// visible by default, so just set the target immediately
if ('open' in details)
details.addEventListener('toggle', setMap, { once: true })
else
setMap()
})

26
web/js/main.js Normal file
View File

@ -0,0 +1,26 @@
document.addEventListener('DOMContentLoaded', (event) => {
// Only load the map viewer when it's visible (and javascript is enabled).
const setMap = () => { document.querySelector('#map').src = 'map/' }
const details = document.querySelector('details:last-child')
// If <details> is not supported (looking at you, Edge), the frame will be
// visible by default, so just set the target immediately.
if ('open' in details)
details.addEventListener('toggle', setMap, { once: true })
else
setMap()
// For custom (dark) CSS themes, set the <details> background to the inverse of
// the text colour.
const parseColour = (str) => str.match(/([0-9.]+)/g).map(parseFloat)
const dumpColour = (col) => `rgba(${col.join(',')})`
const textColour = parseColour(window.getComputedStyle(document.body).getPropertyValue('color'))
const invertedColour = [255-textColour[0], 255-textColour[1], 255-textColour[2], 0.8]
const sheet = document.styleSheets[0]
sheet.insertRule(`
details {
background-color: ${dumpColour(invertedColour)} !important;
}`
)
})