templates/details.html

{% extends "layout.html" %}
{% block content %}
<div class="col-12">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">
                {% for pk in model_view.pk_columns -%}
                {{ pk.name }}
                {%- if not loop.last %};{% endif -%}
                {% endfor %}: {{ get_object_identifier(model) }}</h3>
        </div>
        <div class="card-body border-bottom py-3">
            <div class="table-responsive">
                <table class="table card-table table-vcenter text-nowrap table-hover table-bordered">
                    <thead>
                    <tr>
                        <th class="w-1">Column</th>
                        <th class="w-1">Value</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for name in model_view._details_prop_names %}
                    {% set label = model_view._column_labels.get(name, name) %}
                    <tr>
                        <td>{{ label }}</td>
                        {% set value, formatted_value = model_view.get_detail_value(model, name) %}
                        {% if name in model_view._relation_names %}
                        {% if is_list( value ) %}
                        <td>
                            {% for elem, formatted_elem in zip(value, formatted_value) %}
                            <a href="{{ model_view._build_url_for('admin:details', request, elem) }}">({{ formatted_elem
                                }})</a>
                            {% endfor %}
                        </td>
                        {% else %}
                        <td><a href="{{ model_view._url_for_details_with_prop(request, model, name) }}">{{
                            formatted_value }}</a>
                        </td>
                        {% endif %}
                        {% else %}
                        {% if name == 'image_path' %}
                        <td><img alt="Loading" width="480px" id="imageRecord"></td>
                        {% elif name == 'audio_path' and model_view.name == 'Audio' %}
                        <td>
                            <button class="btn-outline-primary btn" onclick="playRecord()">Play Record</button>
                        </td>
                        {% elif name == 'id' %}
                        <td id="recordID">{{ formatted_value }}</td>
                        {% else %}
                        <td>{{ formatted_value }}</td>
                        {% endif %}
                        {% endif %}
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="card-footer container">
                <div class="row">
                    <div class="col-md-1">
                        <a href="{{ url_for('admin:list', identity=model_view.identity) }}" class="btn">
                            Go Back
                        </a>
                    </div>
                    {% if model_view.can_delete %}
                    <div class="col-md-1">
                        <a href="#" data-name="{{ model_view.name }}" data-pk="{{ get_object_identifier(model) }}"
                           data-url="{{ model_view._url_for_delete(request, model) }}" data-bs-toggle="modal"
                           data-bs-target="#modal-delete" class="btn btn-danger">
                            Delete
                        </a>
                    </div>
                    {% endif %}
                    {% if model_view.can_edit %}
                    <div class="col-md-1">
                        <a href="{{ model_view._build_url_for('admin:edit', request, model) }}" class="btn btn-primary">
                            Edit
                        </a>
                    </div>
                    {% endif %}
                    {% for custom_action,label in model_view._custom_actions_in_detail.items() %}
                    <div class="col-md-1">
                        {% if custom_action in model_view._custom_actions_confirmation %}
                        <a href="#" class="btn btn-secondary" data-bs-toggle="modal"
                           data-bs-target="#modal-confirmation-{{ custom_action }}">
                            {{ label }}
                        </a>
                        {% else %}
                        <a href="{{ model_view._url_for_action(request, custom_action) }}?pks={{ get_object_identifier(model) }}"
                           class="btn btn-secondary">
                            {{ label }}
                        </a>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
{% if model_view.can_delete %}
{% include 'modals/delete.html' %}
{% endif %}

{% for custom_action in model_view._custom_actions_in_detail %}
{% if custom_action in model_view._custom_actions_confirmation %}
{% with confirmation_message = model_view._custom_actions_confirmation[custom_action], custom_action=custom_action,
url=model_view._url_for_action(request, custom_action) + '?pks=' + (get_object_identifier(model) | string) %}
{% include 'modals/details_action_confirmation.html' %}
{% endwith %}
{% endif %}
{% endfor %}
<script>
    async function playRecord() {
        const recordId = document.getElementById('recordID').innerText
        try {
            const url = `/record/${recordId}/audio/play`;
            const response = await fetch(url);

            if (!response.ok) {
                throw new Error(`Error: ${response.status}`);
            }
            const audioBase64 = await response.json();
            const audioSrc = `data:audio/mp3;base64,${audioBase64}`;
            const audio = new Audio(audioSrc);
            await audio.play();
        } catch (error) {
            console.error('Failed to fetch transcription:', error);
        }
    }
</script>
<script>
    if (window.location.href.includes('image')) {
        const image = document.getElementById('imageRecord')
        const recordId = document.getElementById('recordID').innerText
        fetch(`/record/${recordId}/image/play`, {
            method: 'GET',
            headers: {'Content-Type': 'application/json'},
            credentials: 'include',
        }).then(response => {
            if (response.ok) {
                return response.json()
            } else if (response.status === 401) {
                window.location.href = 'http://' + window.location.host + '/user/login';
            } else {
                alert('Something was wrong. Contact customer support')
            }
            throw new Error('Network response was not ok.');
        }).then(data => {
            image.src = `data:image/png;base64,${data}`;
        }).catch(error => {
            console.error(error)
        });
    }
</script>
{% endblock %}