89 lines
2.4 KiB
HTML
89 lines
2.4 KiB
HTML
{% extends '_base.html' %} {% block styles %}
|
|
<style>
|
|
#services {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
.service {
|
|
font-size: 1.2em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.service-link {
|
|
display: flex;
|
|
width: var(--lfw);
|
|
justify-content: flex-end;
|
|
align-items: flex-end;
|
|
text-align: right;
|
|
vertical-align: bottom;
|
|
background-color: var(--panel-1-color);
|
|
min-height: clamp(60px, 10vw, 120px);
|
|
overflow: hidden;
|
|
padding: var(--left-frame-padding);
|
|
border-radius: 0;
|
|
border-bottom: var(--panel-border);
|
|
text-decoration: none;
|
|
color: black;
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
.if {
|
|
background-color: var(--orange);
|
|
}
|
|
.fs {
|
|
background-color: var(--blue);
|
|
}
|
|
.cmk {
|
|
background-color: var(--green);
|
|
}
|
|
.pve {
|
|
background-color: var(--lilac);
|
|
}
|
|
</style>
|
|
{% endblock %} {% block content %}
|
|
<h2>Services for {{ hostname }}</h2>
|
|
<div id="services">
|
|
{% for svc in services %}
|
|
<div class="service">
|
|
{% if svc.links %} {% for l in svc.links %} {% set classString =
|
|
'service-link' %} {% if 'Interface' in svc.extensions.description %} {% set
|
|
classString = classString + ' if' %} {% elif 'Filesystem' in
|
|
svc.extensions.description %} {% set classString = classString + ' fs' %} {%
|
|
elif 'Check_MK' in svc.extensions.description %} {% set classString =
|
|
classString + ' cmk' %} {% elif 'PVE' in svc.extensions.description %} {%
|
|
set classString = classString + ' pve' %} {% endif %}
|
|
<button class="{{ classString }}" data-link="{{ l.href }}">
|
|
{{ svc.extensions.description }}
|
|
</button>
|
|
{% endfor %} {% else %}
|
|
<span class="service-label"
|
|
>{{ svc.service_description or svc.title or svc.description or svc.name
|
|
}}</span
|
|
>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<script>
|
|
function playSound(audioId) {
|
|
var audio = document.getElementById(audioId);
|
|
audio.play();
|
|
}
|
|
|
|
function serviceClick(event) {
|
|
event.preventDefault();
|
|
playSound("audio1");
|
|
let url = event.currentTarget.getAttribute("data-link");
|
|
let target = "/service/" + encodeURIComponent(url);
|
|
window.location.href = target;
|
|
}
|
|
|
|
document.querySelectorAll(".service-link").forEach(function (el) {
|
|
el.addEventListener("click", serviceClick);
|
|
});
|
|
</script>
|
|
{% endblock %}
|