make voting plugin better

This commit is contained in:
2023-10-23 18:11:18 +02:00
parent 13cba558d2
commit ffbb040f22
3 changed files with 86 additions and 57 deletions

View File

@@ -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>

View File

@@ -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' ) ?? '{}' );

View File

@@ -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' );
}