mark offline after 110sec, dynamic <details> background for dark themes
This commit is contained in:
parent
735b7ff3b9
commit
e75df5b2df
|
@ -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']}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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()
|
|
||||||
})
|
|
|
@ -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;
|
||||||
|
}`
|
||||||
|
)
|
||||||
|
})
|
Loading…
Reference in New Issue