pxe-server/webapp/templates/backups.html

{% extends "base.html" %}
{% import '_ui.html' as ui %}
{% block title %}Clonezilla backups - PXE Manager{% endblock %}

{# Clonezilla backups: one line per zip on the share (machine number, file,
   size, date). Download is the row's action; Delete is in the menu and opens
   the confirm modal. #}

{% block extra_head %}
<style>
  .bgrid { display: grid; grid-template-columns: 180px minmax(0, 1fr) 90px 190px; align-items: center;
           gap: 0 14px; padding: 11px 160px 11px 24px; font-size: 14px; min-height: 36px; }
  .bhead { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding-top: 6px; padding-bottom: 6px; min-height: 0; }
  .b-mach { font-weight: 600; }
  .b-size { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .b-when { font-size: 13px; color: var(--muted); white-space: nowrap; }
  .bl-empty { padding: 28px 24px; text-align: center; color: var(--muted); border-top: 1px solid var(--line); }
  .bnote { padding: 18px 24px; font-size: 13px; color: var(--text-2); display: flex; flex-direction: column; gap: 6px; }
  .bnote p { margin: 0; }
  @container (max-width: 820px) {
    .bgrid { grid-template-columns: minmax(0, 1fr) 80px; padding: 11px 160px 11px 18px; gap: 2px 12px; }
    .bgrid .b-file, .bgrid .b-when { grid-column: 1 / -1; }
    .bhead { display: none; }
  }
  @container (max-width: 520px) {
    /* The file is the machine number plus .zip; the expandable-free row keeps machine, size and date. */
    .bgrid { grid-template-columns: minmax(0, 1fr); padding: 12px 150px 12px 16px; }
    .bgrid .b-file { display: none; }
    .b-mach .trunc { white-space: normal; overflow-wrap: anywhere; }
    .b-size { text-align: left; }
    .ui-row > .act { right: 12px; top: 12px; }
  }
</style>
{% endblock %}

{% block content %}
{% call ui.head('Clonezilla backups', 'Tools', (backups | length) ~ ' backup' ~ ('s' if backups | length != 1) ~ ' on the share') %}
  <button type="button" class="ui-btn pri" data-bs-toggle="modal" data-bs-target="#uploadModal">Upload backup</button>
{% endcall %}

<div class="ui-stack">
<section class="panel ui-list" aria-labelledby="bl-h">
  <h2 id="bl-h" class="vh">Machine backups</h2>
  {% if backups %}
  <div class="bgrid bhead" aria-hidden="true"><span>Machine</span><span class="b-file">File</span><span class="b-size">Size</span><span class="b-when">Modified</span></div>
  {% for b in backups %}
  <div class="ui-row">
    <div class="bgrid">
      <span class="b-mach mono tip" data-tip="{{ b.machine }}"><span class="trunc">{{ b.machine }}</span></span>
      <span class="b-file tip" data-tip="{{ b.filename }}"><span class="trunc mono sub">{{ b.filename }}</span></span>
      <span class="b-size">{{ "%.1f"|format(b.size / 1073741824) }} GB</span>
      <span class="b-when mono">{{ b.modified | timestamp_fmt }}</span>
    </div>
    <div class="act">
      <a class="ui-btn" href="{{ url_for('clonezilla_download', filename=b.filename) }}">Download</a>
      {% call ui.more(b.machine) %}
        <button type="button" class="copy-btn" data-copy-text="{{ b.filename }}">Copy file name</button>
        <div class="sep"></div>
        <button type="button" class="del" data-bs-toggle="modal" data-bs-target="#deleteModal"
                data-filename="{{ b.filename }}" data-machine="{{ b.machine }}">Delete backup...</button>
      {% endcall %}
    </div>
  </div>
  {% endfor %}
  {% else %}
  <div class="bl-empty">No backups found. Upload a Clonezilla backup .zip to get started.</div>
  {% endif %}
</section>

<section class="panel bnote" aria-labelledby="bn-h">
  <h2 id="bn-h" class="sec" style="font-size: 15px">Naming</h2>
  <p>Name backup files with the machine number, for example <span class="mono">6501.zip</span>. The machine column is the file name without <span class="mono">.zip</span>.</p>
  <p>The Samba share <span class="mono">\\pxe-server\clonezilla</span> is also on the network for direct Clonezilla save and restore.</p>
</section>
</div>

<!-- Upload Modal -->
<div class="modal fade" id="uploadModal" tabindex="-1" aria-labelledby="uploadTitle">
  <div class="modal-dialog">
    <div class="modal-content">
      <form action="{{ url_for('clonezilla_upload') }}" method="post" enctype="multipart/form-data">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
        <div class="modal-header">
          <h3 class="modal-title" id="uploadTitle">Upload backup</h3>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="form-field mb-0">
            <label for="backupFile" class="form-label">Backup file (.zip)</label>
            <input type="file" class="form-control" id="backupFile" name="backup_file"
                   accept=".zip" required>
            <div class="form-text">
              Name the file with the machine number (e.g. <span class="mono">6501.zip</span>).
              A file with the same name as an existing backup is refused unless you tick the box below.
            </div>
          </div>
          <div class="form-check mt-2">
            <input class="form-check-input" type="checkbox" name="overwrite" value="1" id="backupOverwrite">
            <label class="form-check-label" for="backupOverwrite">Replace the existing backup with the same name</label>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="ui-btn" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="ui-btn pri">Upload</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteTitle">
  <div class="modal-dialog">
    <div class="modal-content">
      <form id="deleteForm" method="post">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
        <div class="modal-header">
          <h3 class="modal-title" id="deleteTitle">Delete backup</h3>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>Are you sure you want to delete the backup for machine <strong id="deleteMachine"></strong>?</p>
          <p class="muted mb-0">This action cannot be undone.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="ui-btn pri" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="ui-btn danger">Delete</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
document.getElementById('deleteModal').addEventListener('show.bs.modal', function (event) {
  var btn = event.relatedTarget;
  var filename = btn.getAttribute('data-filename');
  var machine = btn.getAttribute('data-machine');
  document.getElementById('deleteMachine').textContent = machine;
  document.getElementById('deleteForm').action = "{{ url_for('clonezilla_delete', filename='__F__') }}".replace('__F__', encodeURIComponent(filename));
});
</script>
{% endblock %}