mirror of
https://gitlab.com/animath/si/plateforme.git
synced 2024-12-25 05:42:23 +00:00
Add feature to install chat on the home screen
Signed-off-by: Emmy D'Anello <emmy.danello@animath.fr>
This commit is contained in:
parent
2d706b2b81
commit
a121d1042b
@ -251,4 +251,25 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
setupSocket()
|
setupSocket()
|
||||||
|
|
||||||
|
let deferredPrompt = null
|
||||||
|
|
||||||
|
window.addEventListener("beforeinstallprompt", (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
deferredPrompt = e
|
||||||
|
let btn = document.getElementById('install-app-home-screen')
|
||||||
|
let alert = document.getElementById('alert-download-chat-app')
|
||||||
|
btn.classList.remove('d-none')
|
||||||
|
alert.classList.remove('d-none')
|
||||||
|
btn.onclick = function () {
|
||||||
|
deferredPrompt.prompt()
|
||||||
|
deferredPrompt.userChoice.then((choiceResult) => {
|
||||||
|
if (choiceResult.outcome === 'accepted') {
|
||||||
|
deferredPrompt = null
|
||||||
|
btn.classList.add('d-none')
|
||||||
|
alert.classList.add('d-none')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
21
chat/static/chat.webmanifest
Normal file
21
chat/static/chat.webmanifest
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"background_color": "white",
|
||||||
|
"description": "Chat pour le TFJM²",
|
||||||
|
"display": "standalone",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "tfjm-512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "tfjm-192.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"name": "Chat TFJM²",
|
||||||
|
"short_name": "Chat TFJM²",
|
||||||
|
"start_url": "/chat/fullscreen/",
|
||||||
|
"theme_color": "black"
|
||||||
|
}
|
@ -3,59 +3,14 @@
|
|||||||
{% load static %}
|
{% load static %}
|
||||||
{% load i18n %}
|
{% load i18n %}
|
||||||
|
|
||||||
|
{% block extracss %}
|
||||||
|
<link rel="manifest" href="{% static "chat.webmanifest" %}">
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
{% block content-title %}{% endblock %}
|
{% block content-title %}{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<noscript>
|
{% include "chat/content.html" %}
|
||||||
{% trans "JavaScript must be enabled on your browser to access chat." %}
|
|
||||||
</noscript>
|
|
||||||
<div class="offcanvas offcanvas-start" tabindex="-1" id="channelSelector" aria-labelledby="offcanvasExampleLabel">
|
|
||||||
<div class="offcanvas-header">
|
|
||||||
<h4 class="offcanvas-title" id="offcanvasExampleLabel">{% trans "Chat channels" %}</h4>
|
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
||||||
</div>
|
|
||||||
<div class="offcanvas-body">
|
|
||||||
<ul class="list-group list-group-flush" id="nav-channels-tab"></ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card tab-content w-100 mh-100{% if request.GET.fullscreen == '1' %} position-absolute top-0 start-0 vh-100 z-3{% endif %}"
|
|
||||||
style="height: 95vh" id="chat-container">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#channelSelector"
|
|
||||||
aria-controls="channelSelector" aria-expanded="false" aria-label="Toggle channel selector">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<span id="channel-title"></span>
|
|
||||||
<button class="btn float-end" type="button" onclick="toggleFullscreen()" title="{% trans "Toggle fullscreen mode" %}">
|
|
||||||
<i class="fas fa-expand"></i>
|
|
||||||
</button>
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div class="card-body overflow-y-scroll mw-100 h-100 flex-grow-0" id="chat-messages">
|
|
||||||
<div class="text-center d-none" id="fetch-previous-messages">
|
|
||||||
<a href="#" class="nav-link" onclick="event.preventDefault(); fetchPreviousMessages()">
|
|
||||||
{% trans "Fetch previous messages…" %}
|
|
||||||
</a>
|
|
||||||
<hr>
|
|
||||||
</div>
|
|
||||||
<ul class="list-group list-group-flush" id="message-list"></ul>
|
|
||||||
</div>
|
|
||||||
<div class="card-footer mt-auto">
|
|
||||||
<form onsubmit="event.preventDefault(); sendMessage()">
|
|
||||||
<div class="input-group">
|
|
||||||
<label for="input-message" class="input-group-text">
|
|
||||||
<i class="fas fa-comment"></i>
|
|
||||||
</label>
|
|
||||||
<input type="text" class="form-control" id="input-message" placeholder="{% trans "Send message…" %}" autocomplete="off">
|
|
||||||
<button class="input-group-text btn btn-success" type="submit">
|
|
||||||
<i class="fas fa-paper-plane"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block extrajavascript %}
|
{% block extrajavascript %}
|
||||||
|
61
chat/templates/chat/content.html
Normal file
61
chat/templates/chat/content.html
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
{% load i18n %}
|
||||||
|
|
||||||
|
<noscript>
|
||||||
|
{% trans "JavaScript must be enabled on your browser to access chat." %}
|
||||||
|
</noscript>
|
||||||
|
<div class="offcanvas offcanvas-start" tabindex="-1" id="channelSelector" aria-labelledby="offcanvasExampleLabel">
|
||||||
|
<div class="offcanvas-header">
|
||||||
|
<h4 class="offcanvas-title" id="offcanvasExampleLabel">{% trans "Chat channels" %}</h4>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="offcanvas-body">
|
||||||
|
<ul class="list-group list-group-flush" id="nav-channels-tab"></ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="alert alert-info d-none" id="alert-download-chat-app">
|
||||||
|
{% trans "You can install a shortcut to the chat on your home screen using the download button on the header." %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card tab-content w-100 mh-100{% if request.GET.fullscreen == '1' or fullscreen %} position-absolute top-0 start-0 vh-100 z-3{% endif %}"
|
||||||
|
style="height: 95vh" id="chat-container">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#channelSelector"
|
||||||
|
aria-controls="channelSelector" aria-expanded="false" aria-label="Toggle channel selector">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<span id="channel-title"></span>
|
||||||
|
{% if not fullscreen %}
|
||||||
|
<button class="btn float-end" type="button" onclick="toggleFullscreen()" title="{% trans "Toggle fullscreen mode" %}">
|
||||||
|
<i class="fas fa-expand"></i>
|
||||||
|
</button>
|
||||||
|
{% endif %}
|
||||||
|
<button class="btn float-end d-none" type="button" id="install-app-home-screen" title="{% trans "Install app on home screen" %}">
|
||||||
|
<i class="fas fa-download"></i>
|
||||||
|
</button>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body overflow-y-scroll mw-100 h-100 flex-grow-0" id="chat-messages">
|
||||||
|
<div class="text-center d-none" id="fetch-previous-messages">
|
||||||
|
<a href="#" class="nav-link" onclick="event.preventDefault(); fetchPreviousMessages()">
|
||||||
|
{% trans "Fetch previous messages…" %}
|
||||||
|
</a>
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
|
<ul class="list-group list-group-flush" id="message-list"></ul>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer mt-auto">
|
||||||
|
<form onsubmit="event.preventDefault(); sendMessage()">
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="input-message" class="input-group-text">
|
||||||
|
<i class="fas fa-comment"></i>
|
||||||
|
</label>
|
||||||
|
<input type="text" class="form-control" id="input-message" placeholder="{% trans "Send message…" %}" autocomplete="off">
|
||||||
|
<button class="input-group-text btn btn-success" type="submit">
|
||||||
|
<i class="fas fa-paper-plane"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
34
chat/templates/chat/fullscreen.html
Normal file
34
chat/templates/chat/fullscreen.html
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
{% load i18n static %}
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
|
||||||
|
<html lang="{{ LANGUAGE_CODE|default:"fr" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<title>
|
||||||
|
Chat du TFJM²
|
||||||
|
</title>
|
||||||
|
<meta name="description" content="Chat du TFJM²">
|
||||||
|
|
||||||
|
{# Favicon #}
|
||||||
|
<link rel="shortcut icon" href="{% static "favicon.ico" %}">
|
||||||
|
<meta name="theme-color" content="#ffffff">
|
||||||
|
|
||||||
|
{# Bootstrap CSS #}
|
||||||
|
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
|
||||||
|
<link rel="stylesheet" href="{% static 'fontawesome/css/all.css' %}">
|
||||||
|
<link rel="stylesheet" href="{% static 'fontawesome/css/v4-shims.css' %}">
|
||||||
|
|
||||||
|
{# Bootstrap JavaScript #}
|
||||||
|
<script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}"></script>
|
||||||
|
|
||||||
|
<link rel="manifest" href="{% static "chat.webmanifest" %}">
|
||||||
|
</head>
|
||||||
|
<body class="d-flex w-100 h-100 flex-column">
|
||||||
|
{% include "chat/content.html" with fullscreen=True %}
|
||||||
|
|
||||||
|
<script src="{% static 'theme.js' %}"></script>
|
||||||
|
<script src="{% static 'chat.js' %}"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
@ -2,6 +2,7 @@
|
|||||||
# SPDX-License-Identifier: GPL-3.0-or-later
|
# SPDX-License-Identifier: GPL-3.0-or-later
|
||||||
|
|
||||||
from django.urls import path
|
from django.urls import path
|
||||||
|
from django.views.generic import TemplateView
|
||||||
|
|
||||||
from .views import ChatView
|
from .views import ChatView
|
||||||
|
|
||||||
@ -10,4 +11,5 @@ app_name = 'chat'
|
|||||||
|
|
||||||
urlpatterns = [
|
urlpatterns = [
|
||||||
path('', ChatView.as_view(), name='chat'),
|
path('', ChatView.as_view(), name='chat'),
|
||||||
|
path('fullscreen/', TemplateView.as_view(template_name="chat/fullscreen.html"), name='fullscreen'),
|
||||||
]
|
]
|
||||||
|
@ -7,7 +7,7 @@ msgid ""
|
|||||||
msgstr ""
|
msgstr ""
|
||||||
"Project-Id-Version: TFJM\n"
|
"Project-Id-Version: TFJM\n"
|
||||||
"Report-Msgid-Bugs-To: \n"
|
"Report-Msgid-Bugs-To: \n"
|
||||||
"POT-Creation-Date: 2024-04-27 16:15+0200\n"
|
"POT-Creation-Date: 2024-04-27 18:49+0200\n"
|
||||||
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
|
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
|
||||||
"Last-Translator: Emmy D'Anello <emmy.danello@animath.fr>\n"
|
"Last-Translator: Emmy D'Anello <emmy.danello@animath.fr>\n"
|
||||||
"Language-Team: LANGUAGE <LL@li.org>\n"
|
"Language-Team: LANGUAGE <LL@li.org>\n"
|
||||||
@ -143,23 +143,35 @@ msgstr "message"
|
|||||||
msgid "messages"
|
msgid "messages"
|
||||||
msgstr "messages"
|
msgstr "messages"
|
||||||
|
|
||||||
#: chat/templates/chat/chat.html:10
|
#: chat/templates/chat/chat.html:14
|
||||||
msgid "JavaScript must be enabled on your browser to access chat."
|
msgid "JavaScript must be enabled on your browser to access chat."
|
||||||
msgstr "JavaScript doit être activé sur votre navigateur pour accéder au chat."
|
msgstr "JavaScript doit être activé sur votre navigateur pour accéder au chat."
|
||||||
|
|
||||||
#: chat/templates/chat/chat.html:14
|
#: chat/templates/chat/chat.html:18
|
||||||
msgid "Chat channels"
|
msgid "Chat channels"
|
||||||
msgstr "Canaux de chat"
|
msgstr "Canaux de chat"
|
||||||
|
|
||||||
#: chat/templates/chat/chat.html:31
|
#: chat/templates/chat/chat.html:27
|
||||||
|
msgid ""
|
||||||
|
"You can install a shortcut to the chat on your home screen using the "
|
||||||
|
"download button on the header."
|
||||||
|
msgstr ""
|
||||||
|
"Vous pouvez installer un raccourci vers le chat sur votre écran d'accueil en "
|
||||||
|
"utilisant le bouton de téléchargement dans l'en-tête."
|
||||||
|
|
||||||
|
#: chat/templates/chat/chat.html:40
|
||||||
msgid "Toggle fullscreen mode"
|
msgid "Toggle fullscreen mode"
|
||||||
msgstr "Inverse le mode plein écran"
|
msgstr "Inverse le mode plein écran"
|
||||||
|
|
||||||
#: chat/templates/chat/chat.html:39
|
#: chat/templates/chat/chat.html:44
|
||||||
|
msgid "Install app on home screen"
|
||||||
|
msgstr "Installer l'application sur l'écran d'accueil"
|
||||||
|
|
||||||
|
#: chat/templates/chat/chat.html:52
|
||||||
msgid "Fetch previous messages…"
|
msgid "Fetch previous messages…"
|
||||||
msgstr "Récupérer les messages précédents…"
|
msgstr "Récupérer les messages précédents…"
|
||||||
|
|
||||||
#: chat/templates/chat/chat.html:51
|
#: chat/templates/chat/chat.html:64
|
||||||
msgid "Send message…"
|
msgid "Send message…"
|
||||||
msgstr "Envoyer un message…"
|
msgstr "Envoyer un message…"
|
||||||
|
|
||||||
@ -3748,7 +3760,7 @@ msgstr "S'inscrire"
|
|||||||
msgid "My account"
|
msgid "My account"
|
||||||
msgstr "Mon compte"
|
msgstr "Mon compte"
|
||||||
|
|
||||||
#: tfjm/templates/navbar.html:115
|
#: tfjm/templates/navbar.html:117
|
||||||
msgid "Log out"
|
msgid "Log out"
|
||||||
msgstr "Déconnexion"
|
msgstr "Déconnexion"
|
||||||
|
|
||||||
|
BIN
tfjm/static/tfjm-192.png
Normal file
BIN
tfjm/static/tfjm-192.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.8 KiB |
BIN
tfjm/static/tfjm-512.png
Normal file
BIN
tfjm/static/tfjm-512.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 10 KiB |
@ -111,9 +111,12 @@
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="dropdown-item" href="{% url "logout" %}">
|
<form action="{% url 'logout' %}" method="post">
|
||||||
<i class="fas fa-sign-out-alt"></i> {% trans "Log out" %}
|
{% csrf_token %}
|
||||||
</a>
|
<button class="dropdown-item">
|
||||||
|
<i class="fas fa-sign-out-alt"></i> {% trans "Log out" %}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
Loading…
Reference in New Issue
Block a user