How to use a notifications library
So it's important to remember that what both @liveview and @action does is to send a list of commands to the client to execute. Thus it's trivial to implement a frontend notification system.
Firstly include your notification library of choice:
script(
src="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/alertify.min.js", integrity=
"sha512-JnjG+Wt53GspUQXQhc+c4j8SBERsgJAoHeehagKHlxQN+MtCCmFDghX9/AcbkkNRZptyZU4zC8utK59M5L45Iw==",
crossorigin="anonymous", referrerpolicy="no-referrer")
link(
rel="stylesheet",
href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/css/alertify.min.css", integrity=
"sha512-IXuoq1aFd2wXs4NqGskwX2Vb+I8UJ+tGJEu/Dc0zwLNKeQ7CW3Sr6v0yU3z5OQWe3eScVIkER4J9L7byrgR/fA==",
crossorigin="anonymous", referrerpolicy="no-referrer")
Secondly configure it as you wish:
script("""
alertify.set('notifier','position', 'top-center')
alertify.set('notifier','delay', 2);
""")
style("""
.alertify-notifier .ajs-info {
background-color: rgba(245, 245, 245, 0.95);
}
""")
Thirdly create a function to iterate over Djangos messages and add an notification command for each message:
from hypergen.hypergen import t
def alert_messages(request):
for message in get_messages(request):
command("alertify.notify", t(message), message.level_tag)
Notice the use of the "t()" function that makes sure the message is properly escaped.
Lastly call that function in both your view and your callbacks:
@liveview(perm=NO_PERM_REQUIRED)
def myview(request):
alert_messages()
...
@action(perm=NO_PERM_REQUIRED)
def mycallback(request):
alert_messages()
...
Be sure to trust the source Luke :) ↓
Show sources
urls.pyfrom hypergen.hypergen import autourls
from notifications import views
app_name = 'notifications'
urlpatterns = autourls(views, app_name)
views.pyfrom hypergen.imports import *
from hypergen.hypergen import t
from django.contrib.messages import get_messages
from django.contrib import messages
from website.templates2 import base_example_template
from notifications import templates
def alertify():
link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/css/alertify.min.css",
integrity="sha512-IXuoq1aFd2wXs4NqGskwX2Vb+I8UJ+tGJEu/Dc0zwLNKeQ7CW3Sr6v0yU3z5OQWe3eScVIkER4J9L7byrgR/fA==",
crossorigin="anonymous", referrerpolicy="no-referrer")
script(
src="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/alertify.min.js",
integrity="sha512-JnjG+Wt53GspUQXQhc+c4j8SBERsgJAoHeehagKHlxQN+MtCCmFDghX9/AcbkkNRZptyZU4zC8utK59M5L45Iw==",
crossorigin="anonymous", referrerpolicy="no-referrer")
script("""
alertify.set('notifier','position', 'top-center')
alertify.set('notifier','delay', 2);
""")
style("""
.alertify-notifier .ajs-info {
background-color: rgba(245, 245, 245, 0.95);
}
""")
def alert_messages(request):
for message in get_messages(request):
command("alertify.notify", t(message), message.level_tag)
@liveview(perm=NO_PERM_REQUIRED)
def notifications(request):
with base_example_template():
messages.info(request, "Please notify me!")
alertify()
alert_messages(request)
templates.notifications()
@action(perm=NO_PERM_REQUIRED, target_id=OMIT)
def mycallback(request):
messages.error(request, "Consider yourself notified...")
alert_messages(request)
templates.pyfrom hypergen.imports import *
from website.templates2 import show_sources
def notifications():
from notifications.views import mycallback
h2("How to use a notifications library")
p(button("Click me for a notification", onclick=callback(mycallback), id_="mycallback"))
p("So it's important to remember that what both @liveview and @action does is to send a",
" list of commands to the client to execute. Thus it's trivial to implement a frontend notification system.")
p("Firstly include your notification library of choice: ")
pre(
code("""
script(
src="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/alertify.min.js", integrity=
"sha512-JnjG+Wt53GspUQXQhc+c4j8SBERsgJAoHeehagKHlxQN+MtCCmFDghX9/AcbkkNRZptyZU4zC8utK59M5L45Iw==",
crossorigin="anonymous", referrerpolicy="no-referrer")
link(
rel="stylesheet",
href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/css/alertify.min.css", integrity=
"sha512-IXuoq1aFd2wXs4NqGskwX2Vb+I8UJ+tGJEu/Dc0zwLNKeQ7CW3Sr6v0yU3z5OQWe3eScVIkER4J9L7byrgR/fA==",
crossorigin="anonymous", referrerpolicy="no-referrer")
""".strip()))
p("Secondly configure it as you wish:")
pre(
code('''
script("""
alertify.set('notifier','position', 'top-center')
alertify.set('notifier','delay', 2);
""")
style("""
.alertify-notifier .ajs-info {
background-color: rgba(245, 245, 245, 0.95);
}
""")
'''.strip()))
p("Thirdly create a function to iterate over Djangos messages and add an notification command for each ",
"message:")
pre(
code("""
from hypergen.hypergen import t
def alert_messages(request):
for message in get_messages(request):
command("alertify.notify", t(message), message.level_tag)
""".strip()))
p(mark('Notice the use of the "t()" function that makes sure the message is properly escaped.'))
p("Lastly call that function in both your view and your callbacks:")
pre(
code("""
@liveview(perm=NO_PERM_REQUIRED)
def myview(request):
alert_messages()
...
@action(perm=NO_PERM_REQUIRED)
def mycallback(request):
alert_messages()
...
""".strip()))
p("Be sure to trust the source Luke :) ↓")
show_sources(__file__)