Node.js Activité Todo List

Problème lors de la suppression d'une tache

Bonsoir, tout le monde, je suis bloqué sur un petit souci dans l'activité TodoList sur Node.js, en fait, j'arrive bien à ajouter des tâches sur les différents sockets, à les supprimer aussi mais uniquement si je supprime la tâche depuis l'onglet où elle à été créée, si j'essaye depuis un autre elle ne s'efface qu'au 2ème click, et uniquement sur l'onglet actif.

J'espère avoir été à peu près clair… Je vous met mon code si dessous :

package.json :

{
    "name": "activite-todolist-temps-reel",
    "version": "0.1.0",
    "dependencies": {
        "body-parser": "~1.17.2",
        "cookie-parser": "^1.4.3",
        "cookie-session": "^2.0.0-beta.2",
        "ejs": "~2.5.6",
        "ent": "~2.2.0",
        "express": "~4.15.3",
        "fs": "0.0.2",
        "socket.io": "~2.0.3"
    },
    "author": {
        "name": "m1roh",
        "email": "hayromain.rh@gmail.com"
    },
    "description": "Un gestionnaire de todolist en temps réel"
}

app.js :

var app = require('express')(),
    server = require('http').createServer(app),
    io = require('socket.io').listen(server),
    cookieParser = require('cookie-parser'),
    session = require('cookie-session'),
    bodyParser = require('body-parser'),
    todoliste = [], // stocke la todolist
    newtodo = '',
    ent = require('ent'), // Permet de bloquer les caractères HTML (sécurité équivalente à htmlentities en PHP)
    fs = require('fs');

/* On utilise les cookies, les sessions et les formulaires */
app.use(cookieParser())
    .use(session({
        secret: 'todotopsecret'
    }))
    .use(bodyParser())
    // S'il n'y a pas de todolist dans la session,
    //on en crée une vide sous forme d'array avant la suite et
    //permet de récuperer la liste
    .use(function (req, res, next) {
        if (todoliste.length != 0) {
            req.session.todolist = [];
            req.session.todolist = todoliste;
        } else {
            req.session.todolist = [];
        }
        next();
    })

    /* On affiche la todolist et le formulaire */
    .get('/todo', function (req, res) {

        res.render('todo.ejs', {
            todolist: todoliste,
            newtodo: newtodo
        });

    })

    .get('/todo/supprimer/:id', function(req, res) {
    if (req.params.id != '') {
        req.session.todolist.splice(req.params.id, 1);
    }
    res.redirect('/todo');
})

    /* On redirige vers la todolist si la page demandée n'est pas trouvée */
    .use(function (req, res, next) {
        res.redirect('/todo');
    });


server.listen(8080);
/*on lance l'écoute sur la connexion d'un nouvel utilisateur*/
io.sockets.on('connection', function (socket) {
    console.log('client connecte');
    // on envoie la tache à tout le mmonde

    socket.on('newtodo', function(newtodo) {
        todoliste.push(newtodo);
        socket.broadcast.emit('newtodo', newtodo);
    })
    
    socket.on('delete', function(ind) {
        todoliste.splice(ind);
        var dest = '/todo.ejs';
        socket.broadcast.emit('redirect', dest);
    })

});

todo.ejs :

<!DOCTYPE html>

<html>

<head>
    <title>Ma todolist</title>
    <style>
        a {
            text-decoration: none;
            color: black;
        }
    </style>
</head>

<body>
    <h1 id="h1">Ma todolist</h1>

    <ul id="ul">
        <% todolist.forEach(function(todo, index) { %>
            <li id="todo<%= index %>"><a href="/todo/supprimer/<%= index %>" id="del<%= index %>" class="todo">✘</a>
                <%= todo %>
            </li>

            <% }); %>
    </ul>


    <div>

    </div>

    <form action="/todo/ajouter/" method="post" id="form">
        <p>
            <label for="newtodo">Que dois-je faire ?</label>
            <input type="text" name="newtodo" id="newtodo" autofocus />
            <input type="submit" id="submit" />
        </p>
    </form>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        // Connexion à socket.io
        var socket = io.connect('http://localhost:8080');


        $('#form').submit(function() {
            if ($('#newtodo').val() != '') {
                var newtodo = $('#newtodo').val();
                socket.emit('newtodo', newtodo);
            }
        })
        
        $('.todo').click(function() {
            var ind = $(this).attr('id').substr(-1);
            var dest = 'todo.ejs';
            socket.emit('redirect', dest);
            socket.emit('delete', ind);
        })
        
        socket.on('newtodo', function (newtodo) {
            var length = $('#ul > *').length,
                ind = length;
            if (newtodo != '') {
                $('#ul').append('<li id="todo' + ind +'" class="todo"><a href="/todo/supprimer/" id="del' + ind + '">✘</a> ' + newtodo + '</li>');
            }

        })

        socket.on('redirect', function(dest) {
            window.location.href = dest;
        });
    </script>
</body>

</html>

Si quelqu'un pouvait m'éclairer je lui en serait éternellement reconnaissant !!!

Ça fait des heures que je planche dessus j'hésite presque à le renvoyer comme ça tellement je voudrais connaître la solution !

Salut,

C'est une question qui commence à dater. Mais je vais quand même y répondre (sait-on jamais).

Pour commencer, je changerais la fonction qui permet de recharger. Je trouve que c'est plus simple de faire un rechargement global des tâches plutôt que toute la page.

socket.on('redirect', function(todolist) {
    $('#ul').empty();
    todolist.forEach(function(todo, index){
        $('#ul').prepend('<li><a class="del" href="/" data-index="' +index+ '">✘</a> ' + todo  + '</li>');
    });
});

Ensuite, tu peux juste mettre la structure sans le reste du code, comme ceci,

<ul id="ul"></ul>

Enfin, comme tu ne charge plus toute la page, mais seulement les tâches, il te suffit de renvoyer la todoliste.

socket.on('delete', function(ind) {
        todoliste.splice(ind, 1);
        socket.broadcast.emit('redirect', todoliste);})

J'espère avoir été clair et avoir su répondre à ta question.

Node.js Activité Todo List

Problème lors de la suppression d'une tache

Node.js Activité Todo List

Problème lors de la suppression d'une tache

Node.js Activité Todo List

Supprimer

Modérer

Signaler le message aux modérateurs