mirror of
https://github.com/tanrax/django-interactive-frameworks-benchmark
synced 2026-01-09 06:43:37 +01:00
10d615a4d1
- Add informative section listing Django LiveView demo features - Move feature description below action buttons - Add footer with links to Django LiveView website and source code - Upgrade to django-liveview 2.1.7 from PyPI - Remove local templatetags (now included in package)
39 lines
1.9 KiB
HTML
39 lines
1.9 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<section class="section">
|
|
<div class="container">
|
|
<h1 class="title">Alert System</h1>
|
|
<h2 class="subtitle">Real-time alerts with Django LiveView</h2>
|
|
|
|
<div class="table-container">
|
|
<div id="alerts-table-content">
|
|
{% include 'alerts/components/alerts_table.html' %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5">
|
|
<button class="button is-primary" data-liveview-function="create_random_alert" data-action="click->page#run">
|
|
Add Random Alert
|
|
</button>
|
|
<button class="button is-link ml-2" data-liveview-function="show_new_alert_form" data-action="click->page#run">
|
|
New Alert Form
|
|
</button>
|
|
</div>
|
|
|
|
<div class="notification is-info is-light mt-5">
|
|
<p class="mb-3"><strong>Django LiveView Demo</strong></p>
|
|
<p class="mb-2">This is a demonstration of Django LiveView capabilities. Features you'll see:</p>
|
|
<ul style="list-style: disc; margin-left: 1.5rem;">
|
|
<li><strong>Dynamic page changes:</strong> Click "New Alert Form" to navigate without page reload</li>
|
|
<li><strong>Form validation:</strong> Submit empty or invalid data to see real-time validation</li>
|
|
<li><strong>Real-time updates:</strong> Click "Add Random Alert" to see live table updates</li>
|
|
<li><strong>Modal interactions:</strong> Click "Details" on any alert to see modal with URL update</li>
|
|
<li><strong>Broadcast notifications:</strong> Notifications are seen by all connected users in real-time (try opening another browser to see the interaction)</li>
|
|
<li><strong>WebSocket communication:</strong> All interactions happen through WebSockets, no HTTP requests</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|