144 lines
8.0 KiB
HTML
144 lines
8.0 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block title %} - Download instructions from Peeron{% endblock %}
|
|
|
|
{% block main %}
|
|
<div class="container">
|
|
{% if error %}<div class="alert alert-danger" role="alert"><strong>Error:</strong> {{ error }}.</div>{% endif %}
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<form method="POST" action="{{ url_for('instructions.do_download') }}">
|
|
<div class="card mb-3">
|
|
<div class="card-header">
|
|
<h5 class="mb-0"><i class="ri-download-line"></i> Download instructions from Rebrickable</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="download-set" class="form-label">Set number (only one)</label>
|
|
<input type="text" class="form-control" id="download-set" name="download-set" placeholder="107-1 or 1642-1 or ..." value="{{ set }}">
|
|
</div>
|
|
</div>
|
|
<div class="card-footer text-end">
|
|
<button type="submit" class="btn btn-primary"><i class="ri-search-line"></i> Search</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{% if loading_peeron %}
|
|
<div class="alert alert-info" role="alert">
|
|
<i class="ri-information-line"></i> <strong>Found on Peeron:</strong> {{ set }} was not available on Rebrickable, loading instruction pages from Peeron...
|
|
</div>
|
|
|
|
<!-- Socket elements for peeron-loader -->
|
|
<div id="peeron-loader-fail" class="alert alert-danger d-none" role="alert"></div>
|
|
<div id="peeron-loader-complete" class="alert alert-success d-none" role="alert"></div>
|
|
<div class="mb-3">
|
|
<p>
|
|
Progress <span id="peeron-loader-count"></span>
|
|
<span id="peeron-loader-spinner" class="d-none">
|
|
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
|
|
<span class="visually-hidden" role="status">Loading...</span>
|
|
</span>
|
|
</p>
|
|
<div id="peeron-loader-progress" class="progress" role="progressbar" aria-label="Loading Peeron pages" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
|
|
<div id="peeron-loader-progress-bar" class="progress-bar" style="width: 0%"></div>
|
|
</div>
|
|
<p id="peeron-loader-progress-message" class="text-center d-none"></p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if loading_peeron %}
|
|
<!-- Include socket for automatic loading -->
|
|
{% with set=set, path=path, namespace=namespace, messages=messages %}
|
|
{% include 'instructions/peeron_loader_socket.html' %}
|
|
{% endwith %}
|
|
{% endif %}
|
|
|
|
{% if pages %}
|
|
<div id="peeron-loading-alert" class="alert alert-info" role="alert">
|
|
<i class="ri-information-line"></i> <strong>Instructions found on Peeron:</strong> {{ set }} was not available on Rebrickable, but {{ pages|length }} instruction pages were found on Peeron.
|
|
<div id="peeron-cache-progress" class="mt-2 d-none">
|
|
<div class="progress" role="progressbar" aria-label="Caching thumbnails" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
|
|
<div id="peeron-cache-progress-bar" class="progress-bar" style="width: 0%"></div>
|
|
</div>
|
|
<small id="peeron-cache-message" class="text-muted">Caching thumbnails...</small>
|
|
</div>
|
|
</div>
|
|
<div class="card mb-3">
|
|
<div class="card-header">
|
|
<h5 class="mb-0"><i class="ri-checkbox-line"></i> Select instructions to download</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<div id="peeron-download-fail" class="alert alert-danger d-none" role="alert"></div>
|
|
<div id="peeron-download-complete"></div>
|
|
<div class="d-flex justify-content-between align-items-center border-bottom mb-3">
|
|
<h5 class="mb-0">Available Instructions</h5>
|
|
<button id="peeron-select-all" type="button" class="btn btn-sm btn-outline-secondary">
|
|
<i class="ri-checkbox-multiple-line"></i> Select All
|
|
</button>
|
|
</div>
|
|
<div id="peeron-download-files" class="row g-2">
|
|
{% for page in pages %}
|
|
<div class="col-12 col-md-6 col-lg-4">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body p-2">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="peeron-page-{{ loop.index }}"
|
|
data-page-number="{{ page.page_number }}"
|
|
data-original-image-url="{{ page.original_image_url }}"
|
|
data-cached-full-image-path="{{ page.cached_full_image_path }}"
|
|
data-alt-text="{{ page.alt_text }}"
|
|
data-rotation="0"
|
|
autocomplete="off">
|
|
<label class="form-check-label w-100" for="peeron-page-{{ loop.index }}">
|
|
<div class="text-center position-relative">
|
|
<div class="position-relative d-inline-block">
|
|
<img id="peeron-img-{{ loop.index }}" src="{{ page.cached_thumbnail_url }}" alt="{{ page.alt_text }}"
|
|
class="img-fluid mb-2 border rounded peeron-thumbnail" style="max-height: 150px; transform: rotate(0deg); transition: transform 0.3s ease;"
|
|
data-index="{{ loop.index }}" data-total="{{ pages|length }}">
|
|
<button type="button" class="btn btn-sm btn-light position-absolute top-0 end-0 p-1 me-1 mt-1 peeron-rotate-btn"
|
|
data-target="peeron-img-{{ loop.index }}" data-checkbox="peeron-page-{{ loop.index }}" data-rotation="0"
|
|
title="Rotate page" style="font-size: 0.7rem; line-height: 1;">
|
|
<i class="ri-refresh-line"></i>
|
|
</button>
|
|
</div>
|
|
<div class="small fw-bold">Page {{ page.page_number }}</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="mb-3">
|
|
<p>
|
|
Progress <span id="peeron-download-count"></span>
|
|
<span id="peeron-download-spinner" class="d-none">
|
|
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
|
|
<span class="visually-hidden" role="status">Loading...</span>
|
|
</span>
|
|
</p>
|
|
<div id="peeron-download-progress" class="progress" role="progressbar" aria-label="Download Peeron instructions progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
|
|
<div id="peeron-download-progress-bar" class="progress-bar" style="width: 0%"></div>
|
|
</div>
|
|
<p id="peeron-download-progress-message" class="text-center d-none"></p>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer text-end">
|
|
<span id="peeron-download-status-icon" class="me-1"></span><span id="peeron-download-status" class="me-1"></span><button id="peeron-download" type="button" class="btn btn-primary"><i class="ri-download-line"></i> Download selected files</button>
|
|
</div>
|
|
</div>
|
|
{% if not loading_peeron %}
|
|
<!-- Include normal socket for downloading -->
|
|
{% include 'instructions/peeron_socket.html' %}
|
|
{% endif %}
|
|
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %} |