Personal-Digital-Asset-Manager/templates/edit_asset.html

{% extends "base.html" %} {% block content %}
<div class="page-header">
    <h1>Edit Digital Asset</h1>
</div>

<div class="form-container">
    <form method="POST" enctype="multipart/form-data" class="form" id="editAssetForm">
        <div class="form-group">
            <label for="title" class="form-label">Title</label>
            <input
                type="text"
                id="title"
                name="title"
                class="form-input"
                value="{{ asset.title }}"
                required
            />
        </div>

        <div class="form-group">
            <label for="description" class="form-label">Description</label>
            <textarea id="description" name="description" class="form-input">
{{ asset.description }}</textarea
            >
        </div>

        <div class="form-group">
            <label class="form-label">Current Featured Image</label>
            <div class="current-image">
                <img
                    src="{{ asset.featured_image_url }}"
                    alt="{{ asset.title }}"
                />
            </div>
        </div>

        <div class="form-group">
            <label for="license_key">License Key</label>
            <input
                type="text"
                class="form-input"
                id="license_key"
                name="license_key"
                value="{{ asset.license_key or '' }}"
                placeholder="Enter the asset's license key"
            />
            <small class="form-text text-muted"
                >The license key that came with your purchased asset</small
            >
        </div>

        <div class="form-group">
            <label for="featured_image" class="form-label"
                >Update Featured Image</label
            >
            <div class="file-input-wrapper">
                <input
                    type="file"
                    id="featured_image"
                    name="featured_image"
                    class="file-input"
                    accept="image/*"
                />
                <label for="featured_image" class="file-input-label">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <span>Choose a new image...</span>
                </label>
                <div class="file-input-preview"></div>
            </div>
        </div>

        <div class="form-group">
            <label for="additional_files" class="form-label"
                >Add More Files</label
            >
            <div class="file-input-wrapper">
                <input
                    type="file"
                    id="additional_files"
                    name="additional_files"
                    class="file-input"
                    multiple
                />
                <label for="additional_files" class="file-input-label">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <span>Choose files...</span>
                </label>
                <div class="selected-files"></div>
            </div>
        </div>

        <div class="form-actions">
            <button type="submit" class="button button-primary" id="submitBtn">
                <i class="fas fa-save"></i> Update Asset
            </button>
            <a
                href="{{ url_for('asset_detail', id=asset.id) }}"
                class="button button-secondary"
            >
                <i class="fas fa-times"></i> Cancel
            </a>
        </div>
    </form>

    {% if asset.files %}
    <div class="current-files">
        <h3>Current Files</h3>
        <ul class="files-list">
            {% for file in asset.files %}
            <li class="file-item">
                <a
                    href="{{ url_for('download_file', file_id=file.id) }}"
                    class="file-link"
                >
                    <i class="fas fa-file"></i>
                    {{ file.original_filename or file.filename }}
                </a>
                <form
                    method="POST"
                    action="{{ url_for('delete_asset_file', id=file.id) }}"
                    class="inline-form"
                >
                    <button
                        type="submit"
                        class="button button-small button-danger"
                        onclick="return confirm('Are you sure you want to delete this file?')"
                    >
                        <i class="fas fa-times"></i>
                    </button>
                </form>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}
</div>
{% endblock %} {% block scripts %}
<script>
    // Initialize Trumbowyg
    $("#description").trumbowyg({
        btns: [
            ["viewHTML"],
            ["undo", "redo"],
            ["formatting"],
            ["strong", "em", "del"],
            ["link"],
            ["insertImage"],
            ["justifyLeft", "justifyCenter", "justifyRight"],
            ["unorderedList", "orderedList"],
            ["horizontalRule"],
            ["removeformat"],
            ["fullscreen"],
        ],
        autogrow: true,
        resetCss: true,
        removeformatPasted: true,
        svgPath:
            "https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.27.3/ui/icons.svg",
    });

    document.addEventListener("DOMContentLoaded", function () {
        const form = document.getElementById("editAssetForm");
        const loadingOverlay = document.querySelector(".loading-overlay");
        const loadingText = document.querySelector(".loading-text");

        // Featured image preview
        const featuredInput = document.getElementById("featured_image");
        const featuredPreview = document.querySelector(".file-input-preview");

        featuredInput.addEventListener("change", function () {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    featuredPreview.innerHTML = `
                        <div class="preview-image">
                            <img src="${e.target.result}" alt="Preview">
                            <span class="filename">${file.name}</span>
                        </div>
                    `;
                };
                reader.readAsDataURL(file);
            }
        });

        // Additional files list
        const additionalInput = document.getElementById("additional_files");
        const selectedFiles = document.querySelector(".selected-files");

        additionalInput.addEventListener("change", function () {
            selectedFiles.innerHTML = "";
            Array.from(this.files).forEach((file) => {
                selectedFiles.innerHTML += `
                    <div class="selected-file">
                        <i class="fas fa-file"></i>
                        <span>${file.name}</span>
                    </div>
                `;
            });
        });

        // Handle form submission
        form.addEventListener("submit", function (e) {
            e.preventDefault();
            
            const formData = new FormData(form);
            loadingOverlay.style.display = "flex";
            loadingText.textContent = "Processing...";

            const xhr = new XMLHttpRequest();
            xhr.open("POST", "{{ url_for('edit_asset', id=asset.id) }}", true);

            xhr.onload = function() {
                if (xhr.status === 200) {
                    try {
                        const response = JSON.parse(xhr.responseText);
                        if (response.success) {
                            window.location.href = response.redirect;
                        } else {
                            loadingText.textContent = "Failed: " + response.error;
                            setTimeout(() => {
                                loadingOverlay.style.display = "none";
                            }, 2000);
                        }
                    } catch (e) {
                        // Handle non-JSON response (redirect)
                        window.location.href = "{{ url_for('asset_detail', id=asset.id) }}";
                    }
                } else {
                    loadingText.textContent = "Update failed! Please try again.";
                    setTimeout(() => {
                        loadingOverlay.style.display = "none";
                    }, 2000);
                }
            };

            xhr.onerror = function() {
                loadingText.textContent = "Network error! Please try again.";
                setTimeout(() => {
                    loadingOverlay.style.display = "none";
                }, 2000);
            };

            xhr.send(formData);
        });
    });
</script>
{% endblock %}