Merge pull request #25 from phantasma-io/feature-votes-v2-colors

Added a background to differentiate the type of a poll

src/lib/Components/Card/Card.svelte

@@ -15,8 +15,8 @@
 {#if size == 'xs'}
 	<div class="w-full max-w-full px-3 mb-6 sm:w-1/2 sm:flex-none xl:mb-0 xl:w-1/4">
 		<div
-			class="relative flex flex-col min-w-0 break-words bg-white shadow-soft-xl rounded-2xl bg-clip-border {$$restProps.class ||
-				''}"
+			class="relative flex flex-col min-w-0 break-words shadow-soft-xl rounded-2xl bg-clip-border {$$restProps.class ||
+				'bg-white'}"
 		>
 			<div class="flex-auto p-4">
 				<div class="flex flex-row -mx-3">
@@ -46,8 +46,8 @@
 {#if size == 'xs-c'}
 	<div class="w-full max-w-full px-3 mb-6 sm:w-1/2 sm:flex-none xl:mb-0 xl:w-1/4">
 		<div
-			class="relative flex flex-col min-w-0 break-words bg-white shadow-soft-xl rounded-2xl bg-clip-border {$$restProps.class ||
-				''}"
+			class="relative flex flex-col min-w-0 break-words shadow-soft-xl rounded-2xl bg-clip-border {$$restProps.class ||
+				'bg-white'}"
 		>
 			<div class="flex-auto p-4">
 				<div class="flex flex-row -mx-3">
@@ -61,8 +61,8 @@
 {#if size == 'sm'}
 	<div class="w-full px-3 mb-6 lg:mb-0 lg:w-4/12 lg:flex-none">
 		<div
-			class="relative flex flex-col min-w-0 break-words bg-white shadow-soft-xl rounded-2xl bg-clip-border {$$restProps.class ||
-				''}"
+			class="relative flex flex-col min-w-0 break-words shadow-soft-xl rounded-2xl bg-clip-border {$$restProps.class ||
+				'bg-white'}"
 		>
 			<div class="flex-auto p-4">
 				<div class="flex flex-wrap -mx-3">
@@ -95,8 +95,8 @@
 {#if size == 'md'}
 	<div class="w-full px-3 mb-6 lg:mb-0 lg:w-1/2 lg:flex-none">
 		<div
-			class="relative flex flex-col min-w-0 break-words bg-white shadow-soft-xl rounded-2xl bg-clip-border {$$restProps.class ||
-				''}"
+			class="relative flex flex-col min-w-0 break-words shadow-soft-xl rounded-2xl bg-clip-border {$$restProps.class ||
+				'bg-white'}"
 		>
 			<div class="flex-auto p-4">
 				<div class="flex flex-wrap -mx-3">
@@ -132,8 +132,8 @@
 		class="w-full max-w-full px-3 mt-0 mb-6 md:mb-0 md:w-1/2 md:flex-none lg:w-2/3 lg:flex-none"
 	>
 		<div
-			class="border-black/12.5 shadow-soft-xl relative flex min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-white bg-clip-border {$$restProps.class ||
-				''}"
+			class="border-black/12.5 shadow-soft-xl relative flex min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-clip-border {$$restProps.class ||
+				'bg-white'}"
 		>
 			<div class="flex-auto p-4">
 				<div class="flex flex-wrap mt-0 -mx-3">
@@ -159,8 +159,8 @@
 {#if size == 'xl'}
 	<div class="w-full max-w-full px-3 mt-0 mb-6 md:mb-0 md:w-full md:flex-none lg:flex-none">
 		<div
-			class="border-black/12.5 shadow-soft-xl relative flex min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-white bg-clip-border {$$restProps.class ||
-				''}"
+			class="border-black/12.5 shadow-soft-xl relative flex min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-clip-border {$$restProps.class ||
+				'bg-white'}"
 		>
 			<div class="flex-auto p-4">
 				<div class="flex flex-wrap mt-0 -mx-3">

src/lib/Components/Votes/PollDetails.svelte

@@ -7,18 +7,14 @@
 	import {
 		ConsensusMode,
 		ConsensusPoll,
-		Organization,
 		PhantasmaLink,
 		PollChoice,
 		PollState,
 		PollValue,
 		Timestamp
 	} from 'phantasma-ts/src';
-	//import { e } from 'vitest/dist/index-5aad25c1';
+	import { Organization } from 'phantasma-ts';
 
-	/**
-	 * @type {{ text: any; subject: any; description: any; options: any; votes: any; voters: any; status: any; created: any; expires: any; }}
-	 */
 	export let id: string;
 	export let poll: ConsensusPoll;
 	export let organizations: Organization[];

src/lib/Components/Votes/PollList.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
 	import Card from '$lib/Components/Card/Card.svelte';
-	import {
-		type ConsensusPoll,
-	} from 'phantasma-ts/src';
+	import { type ConsensusPoll } from 'phantasma-ts/src';
 	import PollListItem from './PollListItem.svelte';
 	export let polls: ConsensusPoll[] = [];
 </script>

src/lib/Components/Votes/PollListItem.svelte

@@ -39,6 +39,7 @@
 	let choices: PollChoice[] = new Array<PollChoice>();
 	let entries: PollValue[] = new Array<PollValue>();
 	let selected;
+	let pollStateColor: string = 'bg-red-300';
 
 	beforeUpdate(async () => {
 		initDates();
@@ -91,19 +92,29 @@
 	}
 
 	function initPollState() {
-		if (PollState.Inactive == poll.state) {
-			console.log(
-				poll.startTime.value <= timeNow,
-				poll.endTime.value >= timeNow,
-				poll.startTime.value,
-				poll.endTime.value,
-				timeNow
-			);
-			if (poll.startTime.value <= timeNow && poll.endTime.value >= timeNow) {
-				poll.state = PollState.Active;
-			} else if (timeNow >= poll.endTime.value) {
+		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;
+			pollStateColor = 'bg-blue-300';
+			if (poll.endTime.value - timeNow <= 60 * 12) {
+				pollStateColor = 'bg-yellow-300';
+			}
+		} else if (timeNow >= poll.endTime.value) {
+			if (poll.state == PollState.Consensus) {
+				pollStateColor = 'bg-green-300';
+			} else {
 				poll.state = PollState.Failure;
+				pollStateColor = 'bg-red-300';
 			}
+		} else {
+			pollStateColor = 'bg-blue-300';
 		}
 	}
 
@@ -115,6 +126,11 @@
 	initDates();
 	initChoices();
 	initPollState();
+
+	// red -> Ended
+	// green -> Consensus
+	// blue -> Pending / Voting
+	// yellow -> Close to end / Voting
 	/*
 	Poll ends in {poll.endTime.value * 1000 >= Timestamp.now
 			? ` (Finish ${moment(poll.endTime.value * 1000).fromNow()})
@@ -128,6 +144,7 @@
 		description={poll.endTime.value * 1000 <= Timestamp.now
 			? `Poll ended.`
 			: `Poll will end in  ${moment(poll.endTime.value * 1000).fromNow()}`}
+		class="{pollStateColor} "
 	>
 		<button class="absolute top-5 right-5" on:click={() => (isVisible = !isVisible)}>
 			{#if isVisible}
@@ -293,6 +310,7 @@
 		Timestamp.now
 			? ` (Finish ${moment(poll.endTime.value * 1000).fromNow()})`
 			: ''}."
+		class="{pollStateColor} md:{pollStateColor}"
 	>
 		<button class="absolute top-5 right-5" on:click={() => (isVisible = !isVisible)}>
 			{#if isVisible}
@@ -372,7 +390,7 @@
 							{#each Object.keys(ConsensusMode)
 								.map((key) => ConsensusMode[key])
 								.filter((value) => typeof value === 'string') as m}
-								{#if poll.mode == ConsensusMode[m]}
+								{#if poll.mode.toString() == ConsensusMode[m].toString()}
 									<option value={ConsensusMode[m]} selected>{m}</option>
 								{:else}
 									<option value={ConsensusMode[m]}>{m}</option>

static/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "1.0.6"
+  "version": "1.0.7"
 }