From ffbb040f2220c53d899b5ac87760449c2387b2d9 Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Mon, 23 Oct 2023 18:11:18 +0200
Subject: [PATCH] make voting plugin better

---
 .../plugins/others/poll/html/voting.html      | 63 ++++++++-------
 .../backend/plugins/others/poll/js/voting.js  |  4 +
 .../backend/plugins/others/poll/pollRoutes.js | 76 ++++++++++++-------
 3 files changed, 86 insertions(+), 57 deletions(-)
diff --git a/src/server/backend/plugins/others/poll/html/voting.html b/src/server/backend/plugins/others/poll/html/voting.html
index 01ac38c..64afdb7 100644
--- a/src/server/backend/plugins/others/poll/html/voting.html
+++ b/src/server/backend/plugins/others/poll/html/voting.html
@@ -81,40 +81,45 @@
     </head>
     <body>
         <div class="content" id="app">
-            <div v-if="votingDetails.display">
-                <h1>Voting on {{ votingDetails.display ?? 'untitled' }}</h1>
-                <p v-if="votingDetails.description" class="comment">{{ votingDetails.description }}</p>
-                <div style="margin-bottom: 1%;" v-if="votingDetails.allowAdding">
-                    <button onclick="location.href = '/'">Back to website</button>
-                    <button @click="addSuggestion();">Add suggestion</button>
-                </div>
-                <div v-for="entry in entries" class="entry">
-                    <h3>{{ entry.title }}</h3>
-                    <p>{{ entry.comment }}</p>
-                    <div class="voting-wrapper">
-                        <span class="material-symbols-outlined voting" @click="vote( 'up', entry.id )" :class="votedOn[ entry.id ] === 'up' ? 'selected' : ''">arrow_upward</span>
-                        <p class="voting-counter">{{ entry.count ?? 0 }}</p>
-                        <span class="material-symbols-outlined voting" @click="vote( 'down', entry.id )" :class="votedOn[ entry.id ] === 'down' ? 'selected' : ''">arrow_downward</span>
+            <div class="wrapper" v-if="hasLoadedBasics && hasLoadedVotes">
+                <div v-if="votingDetails.display">
+                    <h1>Voting on {{ votingDetails.display ?? 'untitled' }}</h1>
+                    <p v-if="votingDetails.description" class="comment">{{ votingDetails.description }}</p>
+                    <div style="margin-bottom: 1%;" v-if="votingDetails.allowAdding">
+                        <button onclick="location.href = '/'">Back to website</button>
+                        <button @click="addSuggestion();">Add suggestion</button>
                     </div>
-                </div>
-                <div id="popup">
-                    <div class="popup-positioning">
-                        <div class="popup-main">
-                            <form id="popup-message">
-                                <h2 style="font-size: 200%;">Add new suggestion</h2>
-                                <label for="title">Suggestion title</label><br>
-                                <input type="text" v-model="newSuggestion.title" name="title" id="title" class="input"><br>
-                                <label for="title">Comments</label><br>
-                                <textarea type="text" v-model="newSuggestion.comment" name="comment" id="comment" class="input" rows="5"></textarea><br>
-                            </form>
-                            <button @click="save()" class="submit">Add</button>
-                            <button @click="closePopup()" class="submit">Cancel</button>
+                    <div v-for="entry in entries" class="entry">
+                        <h3>{{ entry.title }}</h3>
+                        <p>{{ entry.comment }}</p>
+                        <div class="voting-wrapper">
+                            <span class="material-symbols-outlined voting" @click="vote( 'up', entry.id )" :class="votedOn[ entry.id ] === 'up' ? 'selected' : ''">arrow_upward</span>
+                            <p class="voting-counter">{{ entry.count ?? 0 }}</p>
+                            <span class="material-symbols-outlined voting" @click="vote( 'down', entry.id )" :class="votedOn[ entry.id ] === 'down' ? 'selected' : ''">arrow_downward</span>
+                        </div>
+                    </div>
+                    <div id="popup">
+                        <div class="popup-positioning">
+                            <div class="popup-main">
+                                <form id="popup-message">
+                                    <h2 style="font-size: 200%;">Add new suggestion</h2>
+                                    <label for="title">Suggestion title</label><br>
+                                    <input type="text" v-model="newSuggestion.title" name="title" id="title" class="input"><br>
+                                    <label for="title">Comments</label><br>
+                                    <textarea type="text" v-model="newSuggestion.comment" name="comment" id="comment" class="input" rows="5"></textarea><br>
+                                </form>
+                                <button @click="save()" class="submit">Add</button>
+                                <button @click="closePopup()" class="submit">Cancel</button>
+                            </div>
                         </div>
                     </div>
                 </div>
+                <div v-else style="display: flex; justify-content: center; align-items: center; height: 100vh; font-size: 110%;">
+                    <h1>This poll does not exist!</h1>
+                </div>
             </div>
-            <div v-else style="display: flex; justify-content: center; align-items: center; height: 100vh; font-size: 110%;">
-                <h1>This poll does not exist!</h1>
+            <div v-else>
+                <h1>Loading...</h1>
             </div>
         </div>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
diff --git a/src/server/backend/plugins/others/poll/js/voting.js b/src/server/backend/plugins/others/poll/js/voting.js
index 0fda1f5..6b5fdbf 100644
--- a/src/server/backend/plugins/others/poll/js/voting.js
+++ b/src/server/backend/plugins/others/poll/js/voting.js
@@ -8,6 +8,8 @@ createApp( {
             newSuggestion: {},
             votingDetails: {},
             votedOn: {},
+            hasLoadedBasics: false,
+            hasLoadedVotes: false,
         };
     },
     methods: {
@@ -15,11 +17,13 @@ createApp( {
             fetch( '/polls/get/' + location.pathname.substring( 7 ) ).then( response => {
                 response.json().then( data => {
                     this.entries = data;
+                    this.hasLoadedVotes = true;
                 } );
             } );
             fetch( '/polls/getDetails/' + location.pathname.substring( 7 ) ).then( response => {
                 response.json().then( data => {
                     this.votingDetails = data;
+                    this.hasLoadedBasics = true;
                 } );
             } );
             this.votedOn = JSON.parse( localStorage.getItem( 'itemsVotedOn' ) ?? '{}' );
diff --git a/src/server/backend/plugins/others/poll/pollRoutes.js b/src/server/backend/plugins/others/poll/pollRoutes.js
index 57fe156..e6ae472 100644
--- a/src/server/backend/plugins/others/poll/pollRoutes.js
+++ b/src/server/backend/plugins/others/poll/pollRoutes.js
@@ -11,6 +11,35 @@ const path = require( 'path' );
 const fs = require( 'fs' );
 const bodyParser = require( 'body-parser' );
 
+// Memory caching system to prevent downtime
+// This is basically the same system as can be found in the JSON db's saving system
+let votingMemCache = JSON.parse( fs.readFileSync( path.join( __dirname + '/data/voting.json' ) ) );
+let hasToSave = false;
+let isReadyToSave = true;
+
+const saveVotingData = () => {
+    if ( isReadyToSave ) {
+        isReadyToSave = false;
+        hasToSave = false;
+        runSave();
+    } else {
+        hasToSave = true;
+    }
+};
+
+const runSave = () => {
+    fs.writeFile( path.join( __dirname + '/data/voting.json' ), JSON.stringify( votingMemCache ), ( err ) => {
+        if ( err ) { 
+            console.error( err ); 
+        } else {
+            isReadyToSave = true;
+            if ( hasToSave ) {
+                runSave();
+            }
+        }
+    } );
+};
+
 module.exports = ( app ) => {
     app.get( '/polls/:vote', ( req, res ) => {
         res.sendFile( path.join( __dirname + '/html/voting.html' ) );
@@ -31,48 +60,39 @@ module.exports = ( app ) => {
     } );
     
     app.get( '/polls/get/:vote', ( req, res ) => {
-        fs.readFile( path.join( __dirname + '/data/voting.json' ), ( error, filedata ) => {
-            res.send( JSON.parse( filedata )[ req.params.vote ] ?? {} );
-        } );
+        res.send( votingMemCache[ req.params.vote ] );
     } );
     
     app.post( '/polls/vote/:vote/', bodyParser.json(), ( req, res ) => {
         // up / down-voting
-        fs.readFile( path.join( __dirname + '/data/voting.json' ), ( error, filedata ) => {
-            let json = JSON.parse( filedata );
-            if ( json[ req.params.vote ] ) {
+        if ( votingMemCache[ req.params.vote ] ) {
+            if ( votingMemCache[ req.params.vote ][ req.body.id ] ) {
                 if ( req.body.voteType === 'up' ) {
-                    json[ req.params.vote ][ req.body.id ].count += 1;
+                    votingMemCache[ req.params.vote ][ req.body.id ].count += 1;
                 } else if ( req.body.voteType === 'down' ) {
-                    json[ req.params.vote ][ req.body.id ].count -= 1;
+                    votingMemCache[ req.params.vote ][ req.body.id ].count -= 1;
                 }
-                fs.writeFile( path.join( __dirname + '/data/voting.json' ), JSON.stringify( json ), ( err ) => {
-                    if ( err ) res.status( 500 ).send( 'ERR_VOTING' );
-                    res.send( 'ok' );
-                } );
+                saveVotingData();
+                res.send( 'ok' );
             } else {
-                res.status( 404 ).send( 'ok' );
+                res.status( 404 ).send( 'No Entry on this vote with' );
             }
-        } );
+        } else {
+            res.status( 404 ).send( 'No Vote with this ID' );
+        }
     } );
     
     app.post( '/polls/add/:vote', bodyParser.json(), ( req, res ) => {
         let data = req.body;
         if ( data.title && data.comment ) {
-            fs.readFile( path.join( __dirname + '/data/voting.json' ), ( error, filedata ) => {
-                let file = JSON.parse( filedata );
-                if ( !file[ req.params.vote ] ) {
-                    file[ req.params.vote ] = {};
-                }
-                const id = parseInt( Object.keys( file[ req.params.vote ] )[ Object.keys( file[ req.params.vote ] ).length - 1 ] ?? 0 ) + 1;
-                file[ req.params.vote ][ id ] = data;
-                file[ req.params.vote ][ id ][ 'id' ] = id;
-                file[ req.params.vote ][ id ][ 'count' ] = 1;
-                fs.writeFile( path.join( __dirname + '/data/voting.json' ), JSON.stringify( file ), ( error ) => {
-                    if ( error ) console.error( 'failed to write data', file );
-                    res.send( 'ok' );
-                } );
-            } );
+            if ( !votingMemCache[ req.params.vote ] ) {
+                votingMemCache[ req.params.vote ] = {};
+            }
+            const id = parseInt( Object.keys( votingMemCache[ req.params.vote ] )[ Object.keys( votingMemCache[ req.params.vote ] ).length - 1 ] ?? 0 ) + 1;
+            votingMemCache[ req.params.vote ][ id ] = data;
+            votingMemCache[ req.params.vote ][ id ][ 'id' ] = id;
+            votingMemCache[ req.params.vote ][ id ][ 'count' ] = 1;
+            res.send( 'ok' );
         } else {
             res.status( 400 ).send( 'incomplete' );
         }
