110 lines
4.4 KiB
HTML
110 lines
4.4 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
|
<h1 class="h2"><i class="bi bi-activity text-primary me-2"></i>{{ _('Printer Status') }}</h1>
|
|
</div>
|
|
|
|
{% if error %}
|
|
<div class="alert alert-danger" role="alert">
|
|
<i class="bi bi-exclamation-triangle me-2"></i>{{ error }}
|
|
{% if current_user.is_admin %}
|
|
<a href="{{ url_for('printer.octo_config') }}" class="alert-link">{{ _('Go to Configuration') }}</a>
|
|
{% endif %}
|
|
</div>
|
|
{% elif status %}
|
|
<div class="row row-cols-1 row-cols-md-2 g-4">
|
|
<!-- State Card -->
|
|
<div class="col">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card-header bg-light fw-bold text-secondary">
|
|
<i class="bi bi-info-circle me-1"></i>{{ _('Current State') }}
|
|
</div>
|
|
<div class="card-body text-center">
|
|
<h3 class="display-6 mt-3 text-primary">{{ status.get('state', {}).get('text', 'Unknown') }}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Temperature Card -->
|
|
<div class="col">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card-header bg-light fw-bold text-secondary">
|
|
<i class="bi bi-thermometer-half me-1"></i>{{ _('Temperatures') }}
|
|
</div>
|
|
<div class="card-body">
|
|
{% set temps = status.get('temperature', {}) %}
|
|
|
|
<h5 class="mb-1"><i class="bi bi-fire text-danger me-2"></i>{{ _('Tool/Nozzle') }}</h5>
|
|
<h4 class="ms-4 mb-4">
|
|
{{ temps.get('tool0', {}).get('actual', 0) }} °C
|
|
<small class="text-muted fs-6">/ {{ temps.get('tool0', {}).get('target', 0) }} °C</small>
|
|
</h4>
|
|
|
|
<h5 class="mb-1"><i class="bi bi-square-fill text-warning me-2"></i>{{ _('Bed') }}</h5>
|
|
<h4 class="ms-4">
|
|
{{ temps.get('bed', {}).get('actual', 0) }} °C
|
|
<small class="text-muted fs-6">/ {{ temps.get('bed', {}).get('target', 0) }} °C</small>
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if job and job.get('job', {}).get('file', {}).get('name') %}
|
|
<div class="card shadow-sm mt-4 border-success">
|
|
<div class="card-header bg-success text-white fw-bold">
|
|
<i class="bi bi-play-circle me-1"></i>{{ _('Active Print Job') }}
|
|
</div>
|
|
<div class="card-body">
|
|
<h5>{{ job.get('job', {}).get('file', {}).get('name') }}</h5>
|
|
|
|
{% set progress = job.get('progress', {}).get('completion', 0) %}
|
|
{% if progress == None %}{% set progress = 0 %}{% endif %}
|
|
<div class="progress mt-3 mb-2" style="height: 25px;">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: {{ progress }}%;" aria-valuenow="{{ progress }}" aria-valuemin="0" aria-valuemax="100">
|
|
{{ "%.1f"|format(progress) }}%
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between text-muted small mt-2">
|
|
<span><strong>{{ _('Print Time:') }}</strong> {{ job.get('progress', {}).get('printTime', 0) }}s</span>
|
|
<span><strong>{{ _('Time Left:') }}</strong> {{ job.get('progress', {}).get('printTimeLeft', 0) }}s</span>
|
|
</div>
|
|
|
|
<div class="mt-4 gap-2 d-flex">
|
|
<button class="btn btn-warning" onclick="sendCmd('pause')"><i class="bi bi-pause-fill me-1"></i>{{ _('Pause/Resume') }}</button>
|
|
<button class="btn btn-danger" onclick="sendCmd('cancel')"><i class="bi bi-stop-fill me-1"></i>{{ _('Cancel') }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% endif %}
|
|
|
|
<script>
|
|
function sendCmd(cmd) {
|
|
if(cmd === 'cancel') {
|
|
window.customConfirm("{{ _('Are you sure you want to cancel the print?') }}", () => doSendCmd(cmd));
|
|
} else {
|
|
doSendCmd(cmd);
|
|
}
|
|
}
|
|
function doSendCmd(cmd) {
|
|
fetch('{{ url_for("printer.api_command") }}', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({command: cmd})
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if(data.success) {
|
|
window.location.reload();
|
|
} else {
|
|
window.customAlert("Error: " + data.error);
|
|
}
|
|
});
|
|
}
|
|
setTimeout(() => { if (!window.pauseRefresh) window.location.reload(); }, 15000);
|
|
</script>
|
|
{% endblock %} |