add sorting to voting plugin

src/server/backend/plugins/others/poll/html/voting.html

@@ -94,11 +94,19 @@
                 <div v-if="votingDetails.display" class="wrapper">
                     <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">
+                    <div style="margin-bottom: 0.5%;" 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">
+                    <select v-model="sorting" style="margin-bottom: 1%;">
+                        <option value="newest">Newest</option>
+                        <option value="oldest">Oldest</option>
+                        <option value="nameUp">Alphabetically (A-Z)</option>
+                        <option value="nameDown">Alphabetically (Z-A)</option>
+                        <option value="mostVoted">Most popular</option>
+                        <option value="leastVoted">Least popular</option>
+                    </select>
+                    <div v-for="entry in orderedVotes" class="entry">
                         <h3>{{ entry.title }}</h3>
                         <p>{{ entry.comment }}</p>
                         <div class="voting-wrapper">

src/server/backend/plugins/others/poll/js/voting.js

@@ -10,8 +10,41 @@ createApp( {
             votedOn: {},
             hasLoadedBasics: false,
             hasLoadedVotes: false,
+            sorting: 'newest',
         };
     },
+    computed: {
+        orderedVotes() {
+            if ( this.sorting === 'oldest' ) {
+                return Object.values( this.entries );
+            } else if ( this.sorting === 'newest' ) {
+                const ent = Object.keys( this.entries ).reverse();
+                let ret = [];
+                for ( let entry in ent ) {
+                    ret.push( this.entries[ ent[ entry ] ] );
+                }
+                return ret;
+            } else {
+                let ent = Object.keys( this.entries ).sort( ( a, b ) => {
+                    if ( this.sorting === 'nameUp' ) {
+                        return this.entries[ a ].title.localeCompare( this.entries[ b ].title );
+                    } else if ( this.sorting === 'nameDown' ) {
+                        return this.entries[ b ].title.localeCompare( this.entries[ a ].title );
+                    } else if ( this.sorting === 'mostVoted' ) {
+                        return this.entries[ b ].count - this.entries[ a ].count;
+                    } else if ( this.sorting === 'leastVoted' ) {
+                        return this.entries[ a ].count - this.entries[ b ].count;
+                    }
+                } );
+                console.log( ent );
+                let ret = [];
+                for ( let entry in ent ) {
+                    ret.push( this.entries[ ent[ entry ] ] );
+                }
+                return ret;
+            }
+        }
+    },
     methods: {
         getData() {
             fetch( '/polls/get/' + location.pathname.substring( 7 ) ).then( response => {