Add Stimulus
This commit is contained in:
Andros Fenollosa
@ -40,7 +40,7 @@ def send_page(self, page):
|
||||
# Hidrate page
|
||||
match page:
|
||||
case "home":
|
||||
update_TODO(self)
|
||||
pass
|
||||
|
||||
|
||||
def action_signup(self, data):
|
||||
@ -88,29 +88,10 @@ def action_logout(self):
|
||||
send_page(self, "login")
|
||||
|
||||
|
||||
def add_lap(self):
|
||||
"""Add lap to Home page"""
|
||||
# Send current time to client
|
||||
self.send_html({
|
||||
"selector": "#laps",
|
||||
"html": render_to_string("components/_lap.html", {"time": datetime.now()}),
|
||||
"append": True,
|
||||
})
|
||||
|
||||
|
||||
def add_task(self, data):
|
||||
"""Add task from TODO section"""
|
||||
# Add task to list
|
||||
self.scope["session"]["tasks"].append(data["task"])
|
||||
self.scope["session"].save()
|
||||
# Update task list
|
||||
update_TODO(self)
|
||||
|
||||
|
||||
def update_TODO(self):
|
||||
"""Update TODO list"""
|
||||
self.send_html({
|
||||
"selector": "#todo",
|
||||
"html": render_to_string("components/_tasks.html", {"tasks": self.scope["session"]["tasks"]}),
|
||||
"append": False,
|
||||
"selector": "#todo-list",
|
||||
"html": render_to_string("components/_task.html", {"task": data["newTask"]}),
|
||||
"append": True,
|
||||
})
|
||||
@ -9,11 +9,6 @@ class ExampleConsumer(JsonWebsocketConsumer):
|
||||
"""Event when client connects"""
|
||||
# Accept the connection
|
||||
self.accept()
|
||||
# Make session task list
|
||||
if "tasks" not in self.scope["session"]:
|
||||
self.scope["session"]["tasks"] = []
|
||||
self.scope["session"].save()
|
||||
|
||||
|
||||
def disconnect(self, close_code):
|
||||
"""Event when client disconnects"""
|
||||
@ -38,8 +33,6 @@ class ExampleConsumer(JsonWebsocketConsumer):
|
||||
actions.action_login(self, data)
|
||||
case "Logout":
|
||||
actions.action_logout(self)
|
||||
case "Add lap":
|
||||
actions.add_lap(self)
|
||||
case "Add task":
|
||||
actions.add_task(self, data)
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<title>Example website</title>
|
||||
<link rel="stylesheet" href="{% static 'css/main.css' %}">
|
||||
<script defer src="{% static 'js/index.js' %}"></script>
|
||||
<script type="module" src="{% static 'js/main.js' %}"></script>
|
||||
</head>
|
||||
<body
|
||||
data-host="{{ request.get_host }}"
|
||||
@ -14,7 +14,7 @@
|
||||
>
|
||||
<div class="container">
|
||||
<header>
|
||||
<nav id="nav" class="nav">{% include 'components/_nav.html' %}</nav>
|
||||
<nav id="nav" class="nav" data-controller="navbar">{% include 'components/_nav.html' %}</nav>
|
||||
</header>
|
||||
<main id="main">{% include page %}</main>
|
||||
<footer class="footer">My footer</footer>
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
<ul class="nav__ul" data-controller="navbar">
|
||||
<ul class="nav__ul">
|
||||
{# Links always visible #}
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="nav__link nav__link--page{% if active_nav == "home" %} active{% endif %}"
|
||||
data-target="home"
|
||||
data-page="home"
|
||||
data-action="click->navbar#changePage"
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
@ -15,7 +16,8 @@
|
||||
<a
|
||||
href="#"
|
||||
class="nav__link nav__link--page{% if active_nav == "profile" %} active{% endif %}"
|
||||
data-target="profile"
|
||||
data-page="profile"
|
||||
data-action="click->navbar#changePage"
|
||||
>
|
||||
Profile
|
||||
</a>
|
||||
@ -35,7 +37,8 @@
|
||||
<a
|
||||
href="#"
|
||||
class="nav__link nav__link--page{% if active_nav == "login" %} active{% endif %}"
|
||||
data-target="login"
|
||||
data-page="login"
|
||||
data-action="click->navbar#changePage"
|
||||
>
|
||||
Login
|
||||
</a>
|
||||
@ -44,8 +47,8 @@
|
||||
<a
|
||||
href="#"
|
||||
class="nav__link nav__link--page{% if active_nav == "signup" %} active{% endif %}"
|
||||
data-target="signup"
|
||||
data-action="click->message#displayUpdateForm"
|
||||
data-page="signup"
|
||||
data-action="click->navbar#changePage"
|
||||
>
|
||||
Signup
|
||||
</a>
|
||||
|
||||
1
app/app_template/templates/components/_task.html
Normal file
1
app/app_template/templates/components/_task.html
Normal file
@ -0,0 +1 @@
|
||||
<li>{{ task }}</li>
|
||||
@ -1,3 +0,0 @@
|
||||
{% for task in tasks %}
|
||||
<li>{{ task }}</li>
|
||||
{% endfor %}
|
||||
@ -2,16 +2,9 @@
|
||||
<h1>Welcome to an example of browsing with WebSockets over the Wire</h1>
|
||||
<p>You will be able to experience a simple structure with a registration, a login and a private page.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Laps</h2>
|
||||
<p>
|
||||
<button id="add-lap">Add lap</button>
|
||||
</p>
|
||||
<ul id="laps"></ul>
|
||||
</section>
|
||||
<section>
|
||||
<section data-controller="todo">
|
||||
<h2>TODO</h2>
|
||||
<input type="text" id="task">
|
||||
<button id="add-task">Add task</button>
|
||||
<ul id="todo"></ul>
|
||||
<input type="text" data-todo-target="task">
|
||||
<button data-action="click->todo#addNewTask">Add task</button>
|
||||
<ul id="todo-list"></ul>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user