Update to the polls

- Fixed subject triming.
- Fixed subject Polls Listing
- Added Filter to the polls listing
- Fixed Opening and closing

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "phantasma-hub",
-	"version": "1.0.8",
+	"version": "1.0.9",
 	"private": true,
 	"scripts": {
 		"dev": "npm run version:update && vite dev --cors true",

src/lib/Components/Votes/CreatePoll.svelte

@@ -42,11 +42,12 @@
 	let endTime: Date = new Date(Date.now());
 	let endTimeStr: string = '';
 	let choicesPerUser: BigInt = BigInt(1);
+	let isPollCreated = false;
 
 	export let organizations: Organization[] = [];
 
 	function createPoll() {
-		console.log(choices);
+		validateSubject();
 		initPoll(
 			subject,
 			organization.name,
@@ -62,13 +63,21 @@
 
 	function addChoice() {
 		numberOfChoices++;
+		validateSubject();
+	}
+
+	function validateSubject() {
+		subject = subject.replace(/[^a-zA-Z0-9 _?!.,]/g, '');
+		subject = subject.trimStart();
+		subject = subject.trimEnd();
 	}
 
 	function handleStartTimeChange() {
 		let startDate = new Date(startTimeStr);
 		let formattedDate = moment(startDate.getTime() + 1000 * 60 * 60 * 24).format(DateTimeFormat);
 
 		endTimeStr = formattedDate;
+		validateSubject();
 	}
 
 	function initDates() {
@@ -80,6 +89,12 @@
 		endTimeStr = moment(startDate.getTime() + 1000 * 60 * 60 * 24).format(DateTimeFormat);
 	}
 
+	function onSubjectChange() {
+		// On don't remove _, ? and ! from the subject and allow upper and lower case letters and numbers and . and ,
+		subject = subject.replace(/[^a-zA-Z0-9 _?!.,]/g, '');
+		subject = subject.trimStart();
+	}
+
 	initDates();
 </script>
 
@@ -98,6 +113,9 @@
 						name="subject"
 						id="subject"
 						bind:value={subject}
+						on:change={onSubjectChange}
+						on:keydown={onSubjectChange}
+						on:keypress={onSubjectChange}
 						class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-solid border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
 						placeholder=" "
 						required

src/lib/Components/Votes/PollList.svelte

@@ -2,16 +2,46 @@
 	import Card from '$lib/Components/Card/Card.svelte';
 	import { type ConsensusPoll } from 'phantasma-ts/src';
 	import PollListItem from './PollListItem.svelte';
+	import { PollState } from 'phantasma-ts';
 	export let polls: ConsensusPoll[] = [];
+	let filteredPolls = polls;
+
+	$: if (polls.length > 0) {
+		filteredPolls = polls;
+	}
+
+	let filter: number;
+	function onPollChange(e) {
+		if (filter == -1) {
+			filteredPolls = polls;
+		} else if (filter == 1) {
+			filteredPolls = polls.filter((poll) => poll.state == PollState.Active);
+		} else if (filter == 2) {
+			filteredPolls = polls.filter((poll) => poll.state == PollState.Consensus);
+		} else if (filter == 3) {
+			filteredPolls = polls.filter(
+				(poll) => poll.state == PollState.Failure || poll.state == PollState.Inactive
+			);
+		}
+	}
 </script>
 
 <Card
 	size="xl"
 	title="Consensus Poll List"
 	description="All the consensus polls that are currently active."
 >
+	<div>
+		<h5 class="mb-0 font-bold">Filters</h5>
+		<select class=" w-2/3 mt-2 py-4" bind:value={filter} on:change={onPollChange}>
+			<option value="-1" selected>All</option>
+			<option value="1">Active</option>
+			<option value="2">Consensus</option>
+			<option value="3">Failure</option>
+		</select>
+	</div>
 	<div class="flex flex-col justify-between">
-		{#each polls as poll}
+		{#each filteredPolls as poll}
 			<div class="my-2">
 				<PollListItem bind:id={poll.organization} {poll} />
 			</div>

src/lib/Components/Votes/PollListItem.svelte

@@ -92,13 +92,13 @@
 	}
 
 	function initPollState() {
-		console.log(
+		/*console.log(
 			poll.startTime.value <= timeNow,
 			poll.endTime.value >= timeNow,
 			poll.startTime.value,
 			poll.endTime.value,
 			timeNow
-		);
+		);*/
 
 		if (timeNow >= poll.startTime.value && poll.endTime.value >= timeNow) {
 			poll.state = PollState.Active;

src/lib/Components/Wallet/VoteCommands.ts

@@ -10,12 +10,12 @@ import {
 	Timestamp,
 	PBinaryReader,
 	VMObject,
-	ConsensusMode, 
-	ConsensusPoll, 
+	ConsensusMode,
+	ConsensusPoll,
 	PollChoice
 } from 'phantasma-ts/src';
 import { GasLimit, GasPrice, IsPollCreated, LinkWallet, PhantasmaAPIClient } from '$lib/store';
-import  { PhantasmaLink } from 'phantasma-ts';
+import { PhantasmaLink } from 'phantasma-ts';
 import {
 	NotificationError,
 	NotificationSuccess
@@ -262,14 +262,13 @@ export async function getConsensusPolls() {
 		for (let i = 0; i < test.length; i++) {
 			const binaryReader = new PBinaryReader(Base16.decodeUint8Array(test[i]));
 			//const consensusPoll : ConsensusPoll = vm.ToStruct<ConsensusPoll>(ConsensusPoll);
-			const consensusPoll : ConsensusPoll = ConsensusPoll.Unserialize(binaryReader);
-			console.log(consensusPoll);
+			const consensusPoll: ConsensusPoll = ConsensusPoll.Unserialize(binaryReader);
+			//console.log(consensusPoll);
 			results.push(consensusPoll);
 		}
-		
+
 		return results;
 	});
 
 	return polls;
 }
-

src/routes/votes-v2/+page.svelte

@@ -5,8 +5,14 @@
 	import CreatePoll from '$lib/Components/Votes/CreatePoll.svelte';
 	import { getConsensusPoll, getConsensusPolls } from '$lib/Components/Wallet/VoteCommands';
 	import { IsPollCreated, PhantasmaAPIClient } from '$lib/store';
-	import type { type ConsensusPoll, Organization, PhantasmaAPI } from 'phantasma-ts/src';
+	import {
+		type ConsensusPoll,
+		type Organization,
+		type PhantasmaAPI,
+		PollState
+	} from 'phantasma-ts/src';
 	import PollList from '$lib/Components/Votes/PollList.svelte';
+	import { Timestamp } from 'phantasma-ts';
 
 	let api: PhantasmaAPI;
 	PhantasmaAPIClient.subscribe(async (value) => {
@@ -29,8 +35,86 @@
 
 	let pollSelected: ConsensusPoll | null;
 
+	function fixPollsData() {
+		const timeNow = Timestamp.now;
+
+		for (let i = 0; i < polls.length; i++) {
+			if (polls[i].state == PollState.Consensus || polls[i].state == PollState.Failure) {
+				continue;
+			}
+
+			if (polls[i].startTime.value <= timeNow && polls[i].endTime.value >= timeNow) {
+				polls[i].state = PollState.Active;
+			} else if (timeNow >= polls[i].endTime.value) {
+				if (polls[i].state == PollState.Consensus) {
+					polls[i].state = PollState.Consensus;
+				} else {
+					polls[i].state = PollState.Failure;
+				}
+			}
+		}
+	}
+
 	async function getPolls() {
 		polls = await getConsensusPolls();
+
+		// Fix polls
+		if (polls.length > 0) fixPollsData();
+
+		const timeNow = Timestamp.now;
+
+		// sort polls
+		polls = polls.sort((a, b) => {
+			// Rule 1: Active polls should be at the top
+			if (a.state === PollState.Active && b.state !== PollState.Active) {
+				return -1;
+			}
+			if (b.state === PollState.Active && a.state !== PollState.Active) {
+				return 1;
+			}
+
+			// Rule 5: Inactive polls within startTime and endTime should be above Consensus but below Active
+			const now = new Date();
+			const aInactiveValid =
+				a.state === PollState.Inactive &&
+				timeNow >= a.startTime.value &&
+				timeNow <= a.endTime.value;
+			const bInactiveValid =
+				b.state === PollState.Inactive &&
+				timeNow >= b.startTime.value &&
+				timeNow <= b.endTime.value;
+
+			if (aInactiveValid && !bInactiveValid) {
+				return -1;
+			}
+			if (bInactiveValid && !aInactiveValid) {
+				return 1;
+			}
+
+			// Rule 2: Consensus polls should be below Active but above others
+			if (a.state === PollState.Consensus && b.state !== PollState.Consensus) {
+				return -1;
+			}
+			if (b.state === PollState.Consensus && a.state !== PollState.Consensus) {
+				return 1;
+			}
+
+			// Rule 3 and 4: Failure polls and inactive polls with a past endTime should go down
+			if (
+				a.state === PollState.Failure ||
+				(a.state === PollState.Inactive && timeNow > a.endTime.value)
+			) {
+				return 1;
+			}
+			if (
+				b.state === PollState.Failure ||
+				(b.state === PollState.Inactive && timeNow > b.endTime.value)
+			) {
+				return -1;
+			}
+
+			return 0; // No change for equal states or other conditions
+		});
 	}
 
 	async function getPoll(subject: string) {
@@ -134,7 +218,7 @@
 		{/if}
 	</div>
 
-	<div>
+	<div class=" pb-28">
 		<PollList bind:polls />
 	</div>
 </div>

src/routes/votes/+page.svelte

@@ -5,7 +5,7 @@
 	import PollDetails from '$lib/Components/Votes/PollDetails.svelte';
 	import { getConsensusPoll, getConsensusPolls } from '$lib/Components/Wallet/VoteCommands';
 	import { IsPollCreated, PhantasmaAPIClient } from '$lib/store';
-	import type { ConsensusPoll, Organization, PhantasmaAPI } from 'phantasma-ts/src';
+	import { type ConsensusPoll, type Organization, PhantasmaAPI } from 'phantasma-ts/src';
 
 	let api: PhantasmaAPI;
 	PhantasmaAPIClient.subscribe(async (value) => {
@@ -26,7 +26,8 @@
 
 	let createPoll = false;
 
-	let pollSelected: ConsensusPoll | null;
+	let pollSelected: ConsensusPoll | null = null;
+	//let nullPoll: ConsensusPoll | null | undefined = null;
 
 	async function getPolls() {
 		polls = await getConsensusPolls();
@@ -44,7 +45,15 @@
 		});
 	}
 
-	function onPollChange(e) {}
+	function onPollChange(e) {
+		console.log('poll change', e.target.value);
+		createPoll = false;
+	}
+
+	function onCreatePollBtn() {
+		createPoll = !createPoll;
+		pollSelected = null;
+	}
 
 	//getPoll('system.nexus.protocol.version');
 	getOrganizations();
@@ -63,7 +72,7 @@
 				</div>
 				<div>
 					<select name="consensusPoll" bind:value={pollSelected} on:change={onPollChange}>
-						<option value>No poll selected.</option>
+						<option value={null}>No poll selected.</option>
 						{#each polls as poll}
 							<option value={poll}>
 								{poll.subject}
@@ -85,6 +94,7 @@
 				</div>
 			</div>
 		</Card>
+
 		<Card size="md">
 			<div class="flex-none w-2/3 max-w-full px-3">
 				<div>
@@ -98,7 +108,7 @@
 						class:create-poll={!createPoll}
 						class:close-poll={createPoll}
 						class="rounded-md text-white p-2"
-						on:click={() => (createPoll = !createPoll)}
+						on:click={onCreatePollBtn}
 					>
 						{#if !createPoll}
 							Create a new Poll
@@ -123,12 +133,12 @@
 		</Card>
 	</div>
 
-	<div class="flex flex-wrap -mx-3 my-3">
+	<div class="flex flex-wrap -mx-3 my-3 pb-24">
 		{#if pollSelected && !createPoll}
 			<PollDetails bind:poll={pollSelected} bind:id={pollSelected.subject} {organizations} />
 		{/if}
 
-		{#if createPoll}
+		{#if createPoll && !pollSelected}
 			<CreatePoll {organizations} />
 		{/if}
 	</div>

static/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "1.0.8"
+  "version": "1.0.9"
 }