andros/django-multipage-template-for-html-over-the-wire
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Stimulus

Browse Source
This commit is contained in:
Andros Fenollosa
2022-04-19 21:51:43 +02:00
parent 8aa69e13b8
commit 6cdc7f43a3
15 changed files with 69 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
static/js/controllers/add_form_controller.js
View File

@ -1,28 +0,0 @@
import { Controller } from "../vendors/stimulus.js"
import { sendData } from "../webSocketsCli.js"
export default class extends Controller {
static targets = [ "author", "text" ]
/**
* Send new message
* @param {Event} event
* @return {void}
*/
add(event) {
event.preventDefault();
// Prepare the information we will send
const newData = {
"action": "add message",
"data": {
"author": this.authorTarget.value,
"text": this.textTarget.value
}
};
// Send the data to the server
sendData(newData, window.myWebSocket);
// Clear message form
this.textTarget.value = "";
}
}

116
static/js/controllers/message_controller.js
View File

@ -1,116 +0,0 @@
import { Controller } from "../vendors/stimulus.js"
import { sendData } from "../webSocketsCli.js"
export default class extends Controller {
static targets = [ "item", "paginator" ]
connect() {
this.enableInfiniteScroll();
}
/*
FUNCTIONS
*/
/**
* Switches to the next page when the last message is displayed.
*/
enableInfiniteScroll() {
const lastMessage = this.itemTargets.at(-1);
// Turn the page when the last message is displayed.
const observerLastMessage = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
if (!this.isLastPage()) this.goToNextPage();
}
});
});
observerLastMessage.observe(lastMessage);
}
/**
* Get current page stored in #paginator as dataset
* @returns {number}
*/
getCurrentPage() {
return parseInt(this.paginatorTarget.dataset.page);
}
/**
* Check if we are on the last page
* @returns {boolean}
*/
isLastPage() {
return parseInt(this.paginatorTarget.dataset.totalPages) === this.getCurrentPage();
}
/**
* Switch to the next page
* @param {Event} event
* @return {void}
*/
goToNextPage(event) {
// Prepare the information we will send
const newData = {
"action": "list messages",
"data": {
"page": this.getCurrentPage() + 1,
}
};
// Send the data to the server
sendData(newData, myWebSocket);
}
/**
* Displays the update form
* @param {Event} event
* @return {void}
*/
displayUpdateForm(event) {
const message = {
"action": "open edit page",
"data": {
"id": event.target.dataset.id
}
};
sendData(message, window.myWebSocket);
}
/**
* Update message
* @param {Event} event
* @return {void}
*/
updateMessage(event) {
event.preventDefault();
const message = {
"action": "update message",
"data": {
"id": event.target.dataset.id,
"author": event.target.querySelector("#message-form__author--update").value,
"text": event.target.querySelector("#message-form__text--update").value
}
};
sendData(message, myWebSocket);
}
/**
* Delete message
* @param {Event} event
* @return {void}
*/
deleteMessage(event) {
const message = {
"action": "delete message",
"data": {
"id": event.target.dataset.id
}
};
sendData(message, window.myWebSocket);
}
}

28
static/js/controllers/navbarController.js
View File

@ -1,28 +0,0 @@
import { Controller } from "../vendors/stimulus.js"
import { sendData } from "../webSocketsCli.js"
export default class extends Controller {
static targets = [ "page" ]
/**
* Send new message
* @param {Event} event
* @return {void}
*/
add(event) {
event.preventDefault();
// Prepare the information we will send
const newData = {
"action": "add message",
"data": {
"author": this.authorTarget.value,
"text": this.textTarget.value
}
};
// Send the data to the server
sendData(newData, window.myWebSocket);
// Clear message form
this.textTarget.value = "";
}
}

22
static/js/controllers/navbar_controller.js Normal file
View File

@ -0,0 +1,22 @@
import { Controller } from "../vendors/stimulus.js"
import { sendData } from "../webSocketsCli.js"
export default class extends Controller {
static targets = [ "page" ]
/**
* Send message to update page
* @param {Event} event
* @return {void}
*/
changePage(event) {
event.preventDefault();
sendData({
action: 'Change page',
data: {
page: event.target.dataset.page
}
}, window.myWebSocket);
}
}

22
static/js/controllers/todo_controller.js Normal file
View File

@ -0,0 +1,22 @@
import { Controller } from "../vendors/stimulus.js"
import { sendData } from "../webSocketsCli.js"
export default class extends Controller {
static targets = [ "task" ]
/**
* Render new task
* @return {void}
*/
addNewTask() {
sendData({
action: 'Add task',
data: {
newTask: this.taskTarget.value
}
}, window.myWebSocket);
// Clean input
this.taskTarget.value = '';
}
}

25
static/js/controllers/update_form_controller.js
View File

@ -1,25 +0,0 @@
import { Controller } from "../vendors/stimulus.js"
import { sendData } from "../webSocketsCli.js"
export default class extends Controller {
static targets = [ "author", "text" ]
/**
* Update message
* @param {Event} event
* @return {void}
*/
update(event) {
event.preventDefault();
const message = {
"action": "update message",
"data": {
"id": event.target.dataset.id,
"author": this.authorTarget.value,
"text": this.textTarget.value
}
};
sendData(message, myWebSocket);
}
}

6
static/js/main.js
View File

@ -1,6 +1,7 @@
import {connect, startEvents} from './webSocketsCli.js';
import { Application } from "./vendors/stimulus.js"
import navbarController from "./controllers/navbar.js"
import navbarController from "./controllers/navbar_controller.js"
import todoController from "./controllers/todo_controller.js"
/*
INITIALIZATION
*/
@ -12,4 +13,5 @@ startEvents();
// Stimulus
window.Stimulus = Application.start();
// Register all controllers
Stimulus.register("navbar", navbarController);
Stimulus.register("navbar", navbarController);
Stimulus.register("todo", todoController);

2
static/js/webSocketsCli.js
View File

@ -7,7 +7,7 @@
* @param {string} url - WebSockets server url
* @return {WebSocket}
*/
export function connect(url=`${document.body.dataset.scheme === 'http' ? 'ws' : 'wss'}://${ document.body.dataset.host }/ws/social-network/`) {
export function connect(url=`${document.body.dataset.scheme === 'http' ? 'ws' : 'wss'}://${ document.body.dataset.host }/ws/example/`) {
window.myWebSocket = new WebSocket(url);
return window.myWebSocket;
}