Add printer types with bed volume + add-printer UI
- PrinterType model: name, bed_x_mm/y/z, linked to Printer via type_id - Migration 0002: creates printer_types, adds type_id to printers, drops model - /printer-types page: table + Add Type modal form - /printers page: Add Printer modal with type dropdown (disabled if no types) - API: GET/POST/DELETE /api/printer-types Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Martin Hohenberg
86
app/templates/printer_types.html
Normal file
86
app/templates/printer_types.html
Normal file
@@ -0,0 +1,86 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Printer Types — POPS{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="d-flex align-items-center justify-content-between mb-4">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<a href="/printers" class="text-secondary text-decoration-none"><i class="bi bi-arrow-left"></i></a>
|
||||
<h5 class="text-white mb-0">Printer Types</h5>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addTypeModal">
|
||||
<i class="bi bi-plus-lg me-1"></i>Add Type
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
{% if printer_types %}
|
||||
<table class="table table-dark table-hover mb-0 align-middle">
|
||||
<thead>
|
||||
<tr class="text-secondary small">
|
||||
<th class="fw-normal">Name</th>
|
||||
<th class="fw-normal text-center">Bed X (mm)</th>
|
||||
<th class="fw-normal text-center">Bed Y (mm)</th>
|
||||
<th class="fw-normal text-center">Bed Z (mm)</th>
|
||||
<th class="fw-normal text-center">Volume</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for t in printer_types %}
|
||||
<tr>
|
||||
<td class="fw-medium text-white">{{ t.name }}</td>
|
||||
<td class="text-secondary text-center">{{ t.bed_x_mm }}</td>
|
||||
<td class="text-secondary text-center">{{ t.bed_y_mm }}</td>
|
||||
<td class="text-secondary text-center">{{ t.bed_z_mm }}</td>
|
||||
<td class="text-secondary small text-center">
|
||||
{{ (t.bed_x_mm * t.bed_y_mm * t.bed_z_mm / 1000) | round(0) | int }} cm³
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% else %}
|
||||
<div class="card-body text-secondary">No printer types defined yet.</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# ── Add Type Modal ── #}
|
||||
<div class="modal fade" id="addTypeModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content bg-dark border-secondary">
|
||||
<form method="POST" action="/printer-types">
|
||||
<div class="modal-header border-secondary">
|
||||
<h6 class="modal-title text-white">Add Printer Type</h6>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body d-flex flex-column gap-3">
|
||||
|
||||
<div>
|
||||
<label class="form-label text-secondary small">Name <span class="text-danger">*</span></label>
|
||||
<input type="text" name="name" class="form-control bg-dark border-secondary text-white"
|
||||
placeholder="e.g. Bambulab X1C" required autofocus>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label text-secondary small mb-2">Print bed volume (mm) <span class="text-danger">*</span></label>
|
||||
<div class="d-flex gap-2 align-items-center">
|
||||
<input type="number" name="bed_x_mm" class="form-control bg-dark border-secondary text-white text-center"
|
||||
placeholder="X" min="1" required>
|
||||
<span class="text-secondary">×</span>
|
||||
<input type="number" name="bed_y_mm" class="form-control bg-dark border-secondary text-white text-center"
|
||||
placeholder="Y" min="1" required>
|
||||
<span class="text-secondary">×</span>
|
||||
<input type="number" name="bed_z_mm" class="form-control bg-dark border-secondary text-white text-center"
|
||||
placeholder="Z" min="1" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="modal-footer border-secondary">
|
||||
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary btn-sm">Add Type</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -2,24 +2,49 @@
|
||||
{% block title %}Printers — POPS{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h5 class="text-white mb-4">Printers</h5>
|
||||
<div class="d-flex align-items-center justify-content-between mb-4">
|
||||
<h5 class="text-white mb-0">Printers</h5>
|
||||
<div class="d-flex gap-2">
|
||||
<a href="/printer-types" class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-tags me-1"></i>Manage Types
|
||||
</a>
|
||||
<button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addPrinterModal"
|
||||
{% if not printer_types %}disabled title="Add a printer type first"{% endif %}>
|
||||
<i class="bi bi-plus-lg me-1"></i>Add Printer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if not printer_types %}
|
||||
<div class="alert alert-secondary border-secondary" role="alert">
|
||||
<i class="bi bi-info-circle me-2"></i>
|
||||
No printer types defined yet.
|
||||
<a href="/printer-types" class="alert-link">Add a printer type</a> before adding printers.
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="card">
|
||||
{% if printers %}
|
||||
<table class="table table-dark table-hover mb-0 align-middle">
|
||||
<thead>
|
||||
<tr class="text-secondary small">
|
||||
<th class="fw-normal">Name</th>
|
||||
<th class="fw-normal">Model</th>
|
||||
<th class="fw-normal">Type</th>
|
||||
<th class="fw-normal">Bed volume</th>
|
||||
<th class="fw-normal">Location</th>
|
||||
<th class="fw-normal">Status</th>
|
||||
<th class="fw-normal">Added</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for p in printers %}
|
||||
<tr>
|
||||
<td class="fw-medium text-white">{{ p.name }}</td>
|
||||
<td class="text-secondary">{{ p.model or '—' }}</td>
|
||||
<td class="text-secondary">{{ p.printer_type.name if p.printer_type else '—' }}</td>
|
||||
<td class="text-secondary small">
|
||||
{% if p.printer_type %}
|
||||
{{ p.printer_type.bed_x_mm }}×{{ p.printer_type.bed_y_mm }}×{{ p.printer_type.bed_z_mm }} mm
|
||||
{% else %}—{% endif %}
|
||||
</td>
|
||||
<td class="text-secondary">{{ p.location or '—' }}</td>
|
||||
<td>
|
||||
{% set s = p.status.value %}
|
||||
@@ -29,13 +54,55 @@
|
||||
{% else %}<span class="badge bg-secondary">offline</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-secondary small">{{ p.created_at.strftime('%d.%m.%Y') }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% else %}
|
||||
<div class="card-body text-secondary">No printers configured yet.</div>
|
||||
<div class="card-body text-secondary">No printers added yet.</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# ── Add Printer Modal ── #}
|
||||
<div class="modal fade" id="addPrinterModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content bg-dark border-secondary">
|
||||
<form method="POST" action="/printers">
|
||||
<div class="modal-header border-secondary">
|
||||
<h6 class="modal-title text-white">Add Printer</h6>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body d-flex flex-column gap-3">
|
||||
|
||||
<div>
|
||||
<label class="form-label text-secondary small">Name <span class="text-danger">*</span></label>
|
||||
<input type="text" name="name" class="form-control bg-dark border-secondary text-white"
|
||||
placeholder="e.g. Bambu #1" required autofocus>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label text-secondary small">Type <span class="text-danger">*</span></label>
|
||||
<select name="type_id" class="form-select bg-dark border-secondary text-white" required>
|
||||
<option value="">— select —</option>
|
||||
{% for t in printer_types %}
|
||||
<option value="{{ t.id }}">{{ t.name }} ({{ t.bed_x_mm }}×{{ t.bed_y_mm }}×{{ t.bed_z_mm }} mm)</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label text-secondary small">Location</label>
|
||||
<input type="text" name="location" class="form-control bg-dark border-secondary text-white"
|
||||
placeholder="e.g. Workshop, Shelf 2">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="modal-footer border-secondary">
|
||||
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary btn-sm">Add Printer</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user