python-tdd/src/templates/apps/billboard/post.html

{% extends "core/base.html" %}
{% load lyric_extras %}

{% block title_text %}Dashpost{% endblock title_text %}
{% block header_text %}<span>Dash</span>post{% endblock header_text %}


{% block extra_header %}
    {% url "billboard:view_post" post.id as form_action %}
    {% include "apps/dashboard/_partials/_form.html" with form=form form_action=form_action %}
{% endblock extra_header %}

{% block content %}
    <div class="row justify-content-center">
        <div class="col-lg-6">
            <small>Post created by: <span id="id_post_owner">{{ post.owner|display_name }}</span></small>
            <table id="id_post_table" class="table">
                {% for line in post.lines.all %}
                    <tr><td>{{ forloop.counter }}. {{ line.text }}</td></tr>
                {% endfor %}
            </table>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-6">

            <form id="id_share_form" method="POST" action="{% url "billboard:share_post" post.id %}">
                {% csrf_token %}
                <input
                    id="id_recipient"
                    name="recipient"
                    class="form-control form-control-lg{% if form.errors.recipient %} is-invalid{% endif %}"
                    placeholder="friend@example.com"
                    aria-describedby="id_recipient_feedback"
                    required
                />
                {% if form.errors.recipient %}
                    <div id="id_recipient_feedback" class="invalid-feedback">
                        {{ form.errors.recipient.0 }}
                    </div>
                {% endif %}

                <button type="submit" class="btn btn-primary">Share</button>
            </form>
            <small>Post shared with:
                <span id="id_post_recipients">
                    {% for user in post.shared_with.all %}
                        <span class="post-recipient">{{ user|display_name }}</span>
                    {% endfor %}
                </span>
            </small>
        </div>
    </div>
{% endblock content %}

{% block scripts %}
    {% include "apps/dashboard/_partials/_scripts.html" %}
    <script>
    // Async share: intercepts the share form, POSTs w. Accept:application/json,
    // then slide-downs the SHARE_INVITE Brief banner under the navbar h2 + appends
    // the freshly-recorded Line into #id_post_table. No page reload — the legacy
    // alert-success flash is gone.
    (function () {
        'use strict';
        var form = document.getElementById('id_share_form');
        var input = document.getElementById('id_recipient');
        var table = document.getElementById('id_post_table');
        var recipientsBox = document.getElementById('id_post_recipients');
        if (!form || !input || !table) return;

        function _csrf() {
            var m = document.cookie.match(/csrftoken=([^;]+)/);
            return m ? m[1] : '';
        }

        function _appendLine(text) {
            var n = table.querySelectorAll('tr').length + 1;
            var tr = document.createElement('tr');
            var td = document.createElement('td');
            td.textContent = n + '. ' + text;
            tr.appendChild(td);
            table.appendChild(tr);
        }

        form.addEventListener('submit', function (e) {
            e.preventDefault();
            var fd = new FormData(form);
            fetch(form.action, {
                method: 'POST',
                credentials: 'same-origin',
                headers: {
                    'Accept':       'application/json',
                    'X-CSRFToken':  _csrf(),
                },
                body: fd,
            })
                .then(function (r) { return r.ok ? r.json() : Promise.reject(r.status); })
                .then(function (data) {
                    if (data.line_text) _appendLine(data.line_text);
                    if (window.Brief && data.brief) Brief.showBanner(data.brief);
                    if (data.recipient_display && recipientsBox) {
                        var span = document.createElement('span');
                        span.className = 'post-recipient';
                        span.textContent = data.recipient_display;
                        recipientsBox.appendChild(document.createTextNode(' '));
                        recipientsBox.appendChild(span);
                    }
                    input.value = '';
                })
                .catch(function () {
                    // No-op for now — the privacy-safe response shape means
                    // even an unregistered recipient is a 200 w. brief data;
                    // a true error path (5xx) silently swallows.
                });
        });
    }());
    </script>
{% endblock scripts %}