diff --git a/README.md b/README.md
index 887d08473288459f1afb9596f429f5bbad66aadb..b0e1bd18650405dad239685bd98c2ced138854a3 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# SIB Conversation
+# Solid Polls
`<sib-conversation>` displays a conversation similar to what can be found within Facebook groups.
To associate the conversation to a containing resource, for instance an `ActionGroup` that would contain `Conversation`s, one can do :
@@ -19,7 +19,7 @@ DJANGOLDP_PACKAGES = [
]
```
-##Changes needed on deployment
+## Changes needed on deployment
You must change the value of site_url within packages.yml.
## How to use
diff --git a/css/colors.css b/css/colors.css
index 4cd0f7c82cf4a12ff5ed692ce4e0f4409674aee6..2d8a2852694a5967b4c3cf44e3b61754ee9e910d 100644
--- a/css/colors.css
+++ b/css/colors.css
@@ -1,6 +1,6 @@
:root{
- --main-color : #063B5C;
+ --main-color: #063B5C;
--second-color:#C4262E;
--main-dark-color:#000000;
--light-text-color: #ffffff;
@@ -16,6 +16,10 @@
--form-submit-button: #3C3F57;
--form-input-backgrounds: #F3F1F1;
--form-input-background-2: #ffffff;
+ --validation-color: var(--main-color);
+ --validation-color-text: var(--light-text-color);
+ --error-color: var(--second-color);
+ --error-color-text: var(--light-text-color);
/*Tags*/
diff --git a/css/main.css b/css/main.css
index 4b3591fa019e3d8a259f50f9d959c1f6db906ad8..d2d2fb046ea894f4afa717ec170009515a9ffb4c 100644
--- a/css/main.css
+++ b/css/main.css
@@ -154,8 +154,33 @@ input[type="submit"]{
margin: 25px auto;
color: var(--button-light-text-color);
padding: 5px;
+ cursor: pointer;
}
+/*Form error, validation and global classes*/
+
+#pollPage .hide, #add-survey .hide{
+ display: none;
+}
+
+#pollPage .show, #add-survey .show{
+ display: block;
+}
+
+#pollPage .validate, #add-survey .validate{
+ display: block;
+ background-color: var(--validation-color);
+ color: var(--validation-color-text);
+ padding: var(--buttons-padding);
+ border-radius: var(--button-radius);
+}
+
+#pollPage .validation-error-style, #add-survey .validation-error-style {
+ background-color: var(--error-color);
+ color: var(--error-color-text);
+ padding: var(--buttons-padding);
+ border-radius: var(--button-radius);
+}
/*inputs styling*/
@@ -213,14 +238,18 @@ div[name="chosenOption"]{
}
+/*Place content before start date*/
+#pollListing solid-poll solid-display-value[name="startDate"]:before, #pollListing solid-display-date[name="startDate"]:before, #pollPage solid-poll solid-display-value[name="startDate"]:before, #pollPage solid-display-date[name="startDate"]:before{
+ content: "Survey starts on : "
+}
/*Place content before end date*/
-solid-poll solid-display-value[name="endDate"]:before,solid-display-date[name="endDate"]:before{
+#pollListing solid-poll solid-display-value[name="endDate"]:before,#pollListing solid-display-date[name="endDate"]:before, #pollPage solid-poll solid-display-value[name="endDate"]:before,#pollPage solid-display-date[name="endDate"]:before{
content: "Survey ending on : "
}
/*Global tags style*/
-solid-poll solid-multiple[name="tags"]{
+#pollListing solid-poll solid-multiple[name="tags"],#pollPage solid-poll solid-multiple[name="tags"]{
display: flex;
}
@@ -257,20 +286,33 @@ etuc-display-votetags[name="tags"] div p{
/*Global Organisation & date formating*/
-solid-poll solid-set-default[name="orgLine"],solid-set-default[name="dateLine"]{
+#pollPage solid-poll solid-set-default[name="orgLine"],#pollListing solid-set-default[name="dateLine"]{
display: flex;
flex-direction: row;
}
+#pollPage solid-set-default[name="dateLine"], #pollListing solid-set-default[name="dateLine"]{
+ flex-direction: column;
+}
-solid-poll solid-set-default[name="orgLine"] solid-display-div[name="hostingOrganisation"]{
+#pollPage solid-poll solid-set-default[name="orgLine"] solid-display-div[name="hostingOrganisation"], #pollListing solid-poll solid-set-default[name="orgLine"] solid-display-div[name="hostingOrganisation"]{
align-self: center;
margin-left: 0.5rem;
}
-solid-poll solid-set-default[name="orgLine"] solid-display-value[name="hostingOrganisation"],solid-set-default[name="dateLine"] solid-display-date[name="endDate"]{
+#pollPage solid-poll solid-set-default[name="orgLine"] solid-display-value[name="hostingOrganisation"], #pollListing solid-poll solid-set-default[name="orgLine"] solid-display-value[name="hostingOrganisation"]{
align-self: center;
margin-left: 0.5rem;
}
+#pollPage solid-set-default[name="dateLine"] solid-display-date[name="startDate"],#pollPage solid-set-default[name="dateLine"] solid-display-date[name="endDate"],#pollListing solid-set-default[name="dateLine"] solid-display-date[name="startDate"],#pollListing solid-set-default[name="dateLine"] solid-display-date[name="endDate"]{
+ align-self: center;
+}
+
+
+/*Hide extra start & end date present for JS reasons
+ -> remove when sib launches populate events on subsets*/
+#pollPage #poll-page > div > [name="startDate"],#pollPage #poll-page > div > [name="endDate"]{
+ display : none;
+}
/************************************
@@ -350,6 +392,7 @@ solid-poll solid-set-default[name="orgLine"] solid-display-value[name="hostingOr
+
#pollListing solid-set-default[name="body"]{
padding: 0 1rem;
text-align: center;
@@ -548,7 +591,11 @@ vote side
font-size: 13px;
padding: var(--buttons-padding);
}
-
+/*customise disabled button*/
+#pollPage #poll-votes-form input[type="submit"]:disabled{
+ opacity: 0.8;
+ cursor: auto;
+}
/***
debate side
@@ -623,7 +670,7 @@ debate side
margin-top: 1.5rem;
}
-/*footter buttons css*/
+/*footer buttons css*/
#pollPage .poll-footer .back-to-list,#pollPage .poll-footer .share-poll p{
background-color: var(--button-color-1);
padding: var(--buttons-padding);
diff --git a/index.html b/index.html
index 4d70addd315f3d37f41c0a195cc7856e9330cf74..2e61f3ae6372f8094c53965703539cc10b53e90b 100644
--- a/index.html
+++ b/index.html
@@ -25,7 +25,7 @@
<solid-poll
data-src="http://127.0.0.1:8000/polls/"
range-base-polls="http://127.0.0.1:8000/"
- uploadDir="http://127.0.0.1:8000/upload/"
+ upload-dir="http://127.0.0.1:8000/upload/"
>
</solid-poll>
diff --git a/js/main.js b/js/main.js
index 38e10d3407d807fbf0c12cf765d6f043faa05b07..b5d0e8720b899afb51f4ba30b43eb4c2f32d24ec 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,38 +1,49 @@
/*==========================
- Global JS for Polls component
+ Global JS for Polls component
+ All scripts related to poll pages (count, data src, choices, etc) are within
+ the polls-math.js file
==========================*/
-/*imports*/
-
-//import {getPollTotalInfo} from './polls-math.js';
-
-/* Load necessary scripts on load & navigation */
-
-window.addEventListener('load', () => {
- //set the domain source constant
- console.log("loading main.js");
- //update poll ID's
- setTimeout(function(){
- try {
- newOptionContent();
- //getPollTotalInfo();
- } catch (error) {
- console.log(error);
- }
- }, 1500);
- document.querySelectorAll("solid-router")[0].addEventListener("navigate",()=> {
- console.log("navigating");
- //newOptionContent();
- //getPollTotalInfo();
+firstLoad()
+
+function firstLoad(){
+ let firstElement = document.querySelector("solid-display");
+ //console.log("Main.js : elements loaded are",firstElement);
+
+ if (!firstElement) throw "no elements yet";
+
+ //listeners for all forms
+ const allForms = document.querySelectorAll("solid-form[id]");
+ allForms.forEach(form => {
+ form.addEventListener("populate",()=> {
+ //console.log("form loaded",form);
+ globalFormSumbitListener();
+ });
});
-});
+ //Listener for voting form
+ document.querySelector("solid-form#poll-votes-form").addEventListener("populate",()=> {
+ //console.log("Vote form is populating");
+ disableVotes();
+ });
+
+ function globalFormSumbitListener(){
+ //event listener on all forms
+ let submitButtons = document.querySelectorAll("input[type=submit]");
+ submitButtons.forEach(button => {
+ //listen on click & not submit to be able to check the data in the form
+ button.addEventListener("click",()=>{
+ let clickedFormId = button.parentElement.parentElement.id;
+ //console.log("form id of click is :",clickedFormId);
+ checkFormValidity(clickedFormId);
+ });
+ });
+ }
+};
/* ===================
JS For Tabs
================== */
-
-
function showHideBlocks(activeCTAClass,inactiveCTAClass,diplayBlockClass,hideBlockClass,styleWanted){
//get all blocks
activeCTAClass = document.querySelectorAll(activeCTAClass);
@@ -40,7 +51,7 @@ function showHideBlocks(activeCTAClass,inactiveCTAClass,diplayBlockClass,hideBlo
targetBlockToDiplay = document.querySelectorAll(diplayBlockClass);
hideBlockClass = document.querySelectorAll(hideBlockClass);
- //show wanted blocks
+ //show wanted blocks
for (i = 0; i < targetBlockToDiplay.length; i++) {
if (targetBlockToDiplay[i].style.display == 'none' || targetBlockToDiplay[i].style.display == '' ) {
targetBlockToDiplay[i].style.display = styleWanted;
@@ -49,57 +60,259 @@ function showHideBlocks(activeCTAClass,inactiveCTAClass,diplayBlockClass,hideBlo
targetBlockToDiplay[i].style.display = 'none';
}
}
- //hide other blocks
- for (j = 0; j < hideBlockClass.length; j++) {
- //change display
- if (hideBlockClass[j].style.display != 'none') {
- hideBlockClass[j].style.display = 'none';
- }
- }
- //add border active blocks
- for (k = 0; k < activeCTAClass.length; k++) {
- //change display
- console.log(activeCTAClass[k]);
- activeCTAClass[k].classList.add("active-tab");
- }
- //remove border for inactive blocks
- for (m = 0; m < inactiveCTAClass.length; m++) {
- inactiveCTAClass[m].classList.remove("active-tab");
- }
- }
-
+ //hide other blocks
+ for (j = 0; j < hideBlockClass.length; j++) {
+ //change display
+ if (hideBlockClass[j].style.display != 'none') {
+ hideBlockClass[j].style.display = 'none';
+ }
+ }
+ //add border active blocks
+ for (k = 0; k < activeCTAClass.length; k++) {
+ //change display
+ //console.log(activeCTAClass[k]);
+ activeCTAClass[k].classList.add("active-tab");
+ }
+ //remove border for inactive blocks
+ for (m = 0; m < inactiveCTAClass.length; m++) {
+ inactiveCTAClass[m].classList.remove("active-tab");
+ }
+}
/* ===================
Add survey form
* Add content to new option button
* Open by default 2 options
================== */
-
-
-
//change content of button
function newOptionContent(){
//get options section
let options = document.querySelectorAll("solid-multiple-form[name=pollOptions]");
- console.log("options : ",options);
+ //console.log("options : ",options);
for(i = 0; i < options.length; i++) {
let button = options[i].querySelectorAll("button");
- console.log("button : ",options[i].querySelectorAll("button").textContent);
+ //console.log("button : ",options[i].querySelectorAll("button").textContent);
for(y = 0; y < button.length; y++) {
let buttonContent = button[i].textContent;
- console.log("the content",buttonContent );
-
+ //console.log("the content",buttonContent );
button[i].textContent = "Add option";
//open 2 first options
- console.log("Open first option");
button[i].click();
- console.log("Open second option");
button[i].click();
}
}
}
+/*=======================================
+ Form validation scripts
+ =======================================*/
+/*Global Listener function*/
+ /***********
+ // select all forms
+ ***********/
+ function checkFormValidity(clickedFormId){
+ let formId = clickedFormId;
+ let form = document.querySelector("solid-form[id="+formId+"]");
+ //console.log("current form id is : ",formId);
+ var currenErrors = [];
+ //console.log("errors are", currenErrors);
+ var errorDiv = form.nextElementSibling;
+ //check the fiels of the wanted forms
+ switch(formId){
+ case "add-survey-form" :
+ CheckMandatoryField("input[name=title]","Survey title");
+ CheckMandatoryField("input[name=hostingOrganisation]","Organisation name");
+ CheckMandatoryField("input[name=shortDescription]","Short description");
+ CheckMandatoryField("input[name=startDate]","Start Date");
+ CheckMandatoryField("input[name=endDate]","End Date");
+ break;
+ case "poll-votes-form":
+ //console.log("voting situation");
+ CheckMandatoryRadioField("Choose an option to vote");
+ break;
+ default:
+ console.log("form not taken into account");
+ }
+ showErrors(currenErrors,errorDiv,formId);
+
+
+ /*================================
+ related Functions bellow
+ && !emailPlaceholder.includes(electedText)
+ ================================*/
+
+ /***********
+ check email format
+ ***********/
+ function CheckEmailFormat(){
+ var emailRegEx = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
+
+ allFields = form.querySelectorAll("input");
+ for (i = 0; i < allFields.length; i++) {
+
+ emailPlaceholder = (allFields[i].placeholder).toLowerCase();
+ emailText = "email";
+ electedText = "élu";
+
+ emailValue = allFields[i].value;
+ if (emailPlaceholder.includes(emailText)) {
+
+ if (emailPlaceholder.includes(electedText)) {
+ //console.log("elected field");
+ }
+
+ //if elected official field, pass by
+
+ //if email feild && not empty, check value
+ else if (emailRegEx.test(emailValue) == false && emailValue.length != 0 && !(emailPlaceholder.includes(electedText)) ) {
+ currenErrors.push("Le format de votre adresse email contient une erreur");
+ event.preventDefault();
+ }
+
+ else{
+ //console.log("not an elected official form");
+ }
+ }
+ }
+ }
+
+ /***********
+ check the mandatory fields
+ ***********/
+ function CheckMandatoryField(tagName,ErrorValue){
+ //get tag name to be checked
+ //console.log("checking mandatory field of", tagName);
+ this.tagName = tagName;
+ this.ErrorValue = ErrorValue;
+ var currentTag = form.querySelector(this.tagName);
+
+ //check the value of mandatory field
+ if (form.querySelector(this.tagName).value == "") {
+ //if there's an error get it & push it to array
+ currenErrors.push(this.ErrorValue);
+ form.querySelector(tagName).classList.remove("validated-error-field");
+ form.querySelector(tagName).classList.add("error-field");
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ else{
+ form.querySelector(tagName).classList.remove("error-field");
+ form.querySelector(tagName).classList.add("validated-error-field");
+ }
+ }
+
+ function CheckMandatoryRadioField(ErrorValue){
+ this.ErrorValue = ErrorValue;
+ //select all inputs
+ let formInput = form.querySelectorAll("input[type=radio]");
+ let checkedButton = false;
+ //see if any are checked buttons
+ formInput.forEach(input => {
+ if(input.checked == true) {
+ //when there is a button checked, save it
+ checkedButton = true;
+ }
+ });
+ //if no buttons have been checked, display error and stop request
+ if(checkedButton == false){
+ currenErrors.push(this.ErrorValue);
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ }
+
+ /***********
+ get the errors & display them
+ ***********/
+ function showErrors(errors,formId){
+ this.formId = formId;
+ //console.log("errors are",errors);
+ if (errors.length==1) {
+ errorDiv.innerHTML = "The field \"" + currenErrors.join(", ") + "\" is mandatory";
+ errorDiv.classList.add("show","validation-error-style");
+ errorDiv.classList.remove("hide");
+ }
+ else if (errors.length>1) {
+ errors.splice((errors.length)-1,0," et ");
+ var errorMessage = "The following fields are mandatory : \""+ currenErrors.join(", ") + "\"";
+ errorMessage = errorMessage.replace(", and ,"," and ");
+ errorDiv.innerHTML = errorMessage;
+ errorDiv.classList.add("show","validation-error-style");
+ errorDiv.classList.remove("hide");
+ }
+ else{
+ errorDiv.classList.remove("show","validation-error-style");
+ errorDiv.classList.add("validate");
+ //console.log("the form ID is",formId);
+
+ //personnalise confimation message depending on the form
+ if (formId = "poll-votes-form" ){
+ errorDiv.innerHTML = "Your vote has been taken into account";
+ }
+ else{
+ errorDiv.innerHTML = "The form is valid and has been submitted. You may need to refresh to see your changes";
+ }
+ }
+ setTimeout(() => {
+ errorDiv.classList.add("hide");
+ errorDiv.classList.remove("show","validation-error-style","validate");
+ }, 10000);
+ }
+}
+
+/***********
+ disable voting if the startdate hasn't arrived or if the enddate has passed
+***********/
+function disableVotes(){
+ let errorMessage = document.querySelector("#unavailablePoll");
+ if(!errorMessage == "" ) throw "Not displaying message as it exists";
+
+ //get start date & end date
+ let currentPoll = document.querySelector("[id=pollPage]");
+ //console.log("current poll is :", currentPoll);
+ //console.log("startdate block is :", currentPoll.querySelector("solid-display-date[name=startDate]"));
+ let startDate = currentPoll.querySelector("solid-display-date[name=startDate]").textContent;
+
+ let comparisonStartDate = Date.parse(startDate);
+ let endDate = currentPoll.querySelector("solid-display-date[name=endDate]").textContent;
+ let comparisonEndDate = Date.parse(endDate);
+ //console.log("dates are :",startDate,endDate);
+
+ //set current date
+ let today = new Date();
+ let date = (today.getMonth()+1)+'/'+today.getDate()+'/'+today.getFullYear();
+ date = Date.parse(date);
+
+ //get the submit button
+ let votingSection = document.querySelector("#poll-votes-form");
+ let submitButton = votingSection.querySelector("input[type=submit]");
+
+ if (comparisonStartDate > date) {
+ let errorMessage = "This poll hasn't started yet, you can start voting on :" + startDate+".";
+ deactivateButton(errorMessage);
+ } else if(comparisonEndDate <= date) {
+ let errorMessage = "This poll is closed since : " + endDate+".";
+ deactivateButton(errorMessage);
+ }
+ else{
+ activateButton();
+ }
+ //add deactivate attribute if needed
+ function deactivateButton(errorMessage){
+ submitButton.setAttribute("disabled",true);
+ submitButton.insertAdjacentHTML('afterend', '<div id="unavailablePoll">'+errorMessage+'</div>');
+ //console.log(submitButton);
+ }
+ //activate button & remove message
+ function activateButton(){
+ submitButton.setAttribute("enabled",true);
+ if (submitButton.nextElementSibling) {
+ submitButton.nextElementSibling.remove();
+ }
+ }
+}
+
/*
SHARE POLL BY EMAIL
*/
@@ -111,4 +324,4 @@ function sharePollEmail(){
let emailContent = "Bonjour, je vous invite à participer au vote sur " + emailTitle + ". \n Venez sur la page suivante pour voter : "+ pollURL;
emailContent = encodeURIComponent(emailContent);
window.open("mailto:"+shareEmails+"?subject="+emailSubject+"&body="+emailContent);
-}
\ No newline at end of file
+}
diff --git a/js/polls-math.js b/js/polls-math.js
index 0a83d4c14530abb99f94e8c14523574aba1a8f89..8026a8dd2bbc776027db3ec189aa7d36953b559d 100644
--- a/js/polls-math.js
+++ b/js/polls-math.js
@@ -9,44 +9,59 @@
* Lauch script on load
* Update on navigate
*********/
-window.addEventListener('load', () => {
- //set the domain source constant
- console.log("loading math.js");
- const dataSourceURI = document.querySelector("solid-display").dataset.src;
-
+
+firstLoad();
+
+function firstLoad(){
+ let elementsLoaded = document.querySelector("solid-display");
+ //console.log("elements loaded are",elementsLoaded);
+
+ if (!elementsLoaded) throw "no elements yet";
+ const dataSourceURI = elementsLoaded.dataset.src;
const urlComponents = new URL(dataSourceURI);
const dataSourceDomain = urlComponents.origin;
- console.log("the data domain is",dataSourceDomain);
- //update poll ID's
- try {
- console.log("update the poll ID on load");
- getPollTotalInfo();
- } catch (error) {
- console.log(error);
- }
+ ////console.log("the data domain is",dataSourceDomain);
+
+ ////console.log("elements are there, updating id's");
+ getPollTotalInfo(dataSourceDomain);
+
+ document.querySelector("solid-form[name=addPoll]").addEventListener("populate",()=> {
+ //console.log("populating add form");
+ newOptionContent();
+ });
- //update ID's on navigate
+ /*****
+ Updates on navigate
+ */
document.querySelector("solid-router").addEventListener("navigate",()=> {
-
- console.log("updating on navigation - math.js");
- try {
- getPollTotalInfo();
- updateFormSource();
- }catch (error) {
- console.log("error on navigation : ",error);
- }
+ getPollTotalInfo(dataSourceDomain);
+ updateFormSource();
+
+ });
+ //refresh display of total votes on a poll
+ document.querySelector("#poll-votes-values").addEventListener("populate",() => {
+ refreshTotalVotes();
+ });
+
+ //refresh total votes when user votes
+ document.querySelector("solid-form#poll-votes-form").addEventListener("save",()=> {
+ refreshVoteDataSrc();
});
/*********
* Get info on the current poll
*********/
- function getPollTotalInfo(){
+ function getPollTotalInfo(dataSourceDomain){
//get value of data-scr linked to poll page
- const pollPage = document.querySelectorAll("#pollPage")[0];
+ const pollPage = document.querySelector("#pollPage");
const pageTitle = pollPage.querySelectorAll("solid-display[id=title]");
- console.log("page title is",pageTitle);
+ ////console.log("page title is",pageTitle);
+ //console.log("getting total poll info for the domaine",dataSourceDomain);
for (let i = 0; i < pageTitle.length; i++){
+ //if to deal with error
+ if(pageTitle[i] == "" || null) continue
+
//get the data src node of first sib display & extract the url
const dataSrc = pageTitle[i].dataset.src;
//extract current poll ID from the data src
@@ -56,20 +71,20 @@ window.addEventListener('load', () => {
push it to the poll option data range
push it to the total polls data-src
*/
- setCurrentPollOptions(pollPage,pollId);
- setTotalResultId(pollPage,pollId);
+ setCurrentPollOptions(dataSourceDomain,pollPage,pollId);
+ setTotalResultId(dataSourceDomain,pollPage,pollId);
}
}
/**
* push poll ID into data-scr url of current poll
*/
- function setTotalResultId(currentPage,currentId){
+ function setTotalResultId(dataSourceDomain,currentPage,currentId){
//get the vote blocks
- console.log("setting currnt source");
+ ////console.log("setting currnt source");
const currentPollValues = currentPage.querySelectorAll("[id=poll-votes-values]")[0];
//add the poll number
const currentPollSrc = dataSourceDomain + "/polls/total_votes/" + currentId + "/";
- console.log("the domaine here is : ", dataSourceDomain,currentPollSrc);
+ ////console.log("the domaine here is : ", dataSourceDomain,currentPollSrc);
//push the reconstructed data src to the HTML
currentPage.querySelector("[id=poll-votes-values]").dataset.src = currentPollSrc;
}
@@ -77,13 +92,11 @@ window.addEventListener('load', () => {
/**
* push poll ID into data-scr url poll options
*/
- function setCurrentPollOptions(currentPage,currentId){
+ function setCurrentPollOptions(dataSourceDomain,currentPage,currentId){
//add the poll option number within the URL of the options
//get the form block
const formContent = currentPage.querySelector("[id=poll-votes-form]");
- if(formContent == null){
- throw "there's no formContent with the id poll-votes-form";
- }
+ if(formContent == null) throw "there's no formContent with the id poll-votes-form";
//get the range for option choices
const newOptionRange = dataSourceDomain+"/polls/"+currentId+"/pollOptions/";
//push new
@@ -100,9 +113,8 @@ window.addEventListener('load', () => {
2. Functions that take advantage of process done in 1 in order to
personnalise content & css within the vote tab
***********************************************************/
-
- document.querySelector("#poll-votes-values").addEventListener("populate",() => {
- //get all the polls
+ function refreshTotalVotes(){
+ //get all the polls
const pollVoteValues = document.querySelectorAll("#poll-votes-values");
for (let i = 0; i < pollVoteValues.length; i++){
//for each poll get the totals of each option
@@ -120,7 +132,7 @@ window.addEventListener('load', () => {
}
}
//launch function to display the number of votes in HTML
-
+ //console.log("about to refresh dsplayed total",totalCount);
displayTotalVotes(pollVoteValues[i],totalCount);
/*now that we have the values & the totals we can calculate the %ge of each option
@@ -148,21 +160,33 @@ window.addEventListener('load', () => {
choiceNumber = 1;
}
}
- //launch the function that will set the choice number
+ //launch the function that will display the choice number
setChoiceNumber(pollVoteValues[i]);
}
- });
-});
+ }
+
+
+ /**********************
+ Refresh vote results when someone submits a vote
+ ***********************/
+
+ function refreshVoteDataSrc(){
+ let pollTotalVotes = document.querySelector("solid-display#poll-votes-values");
+ pollTotalVotes.dataset.src = pollTotalVotes.dataset.src+"?"+Date.now();
+ //math.random() to break sib cache and actually get now values
+ ////console.log("after the string is",pollTotalVotes.dataset.src);
+ getPollTotalInfo(dataSourceDomain);
+ refreshTotalVotes();
+ }
+}
function updateFormSource(){
const pollSection = document.querySelectorAll("#pollListing,#pollPage,#add-survey");
pollSection.forEach((section) => {
- console.log("poll section is :", section);
+ ////console.log("poll section is :", section);
const applicationForms = section.querySelectorAll("solid-form");
- console.log("forms are : ",applicationForms);
applicationForms.forEach((form) => {
- console.log("updating form sources");
form.dataset.src = form.dataset.src;
});
});
@@ -201,4 +225,32 @@ function displayTotalVotes(poll,totalCount){
}
+/* ===================
+ Add survey form
+ * Add content to new option button
+ * Open by default 2 options
+================== */
+//change content of button
+function newOptionContent(){
+ //get options section
+ let options = document.querySelectorAll("solid-multiple-form[name=pollOptions]");
+ //console.log("options : ",options);
+ for(i = 0; i < options.length; i++) {
+ let button = options[i].querySelectorAll("button");
+ //console.log("button : ",options[i].querySelectorAll("button").textContent);
+
+ for(y = 0; y < button.length; y++) {
+ let buttonContent = button[i].textContent;
+ //console.log("the content",buttonContent );
+
+ button[i].textContent = "Add option";
+ //open 2 first options
+ //console.log("Open first option");
+ button[i].click();
+ //console.log("Open second option");
+ button[i].click();
+ }
+ }
+}
+
//export {getPollTotalInfo};
\ No newline at end of file
diff --git a/sib-polls.js b/sib-polls.js
index 3939d2aa2603695cd9563754aff8eeb18d70a342..6807d12ec9541ec2b2c30d2880e17c2274975f19 100644
--- a/sib-polls.js
+++ b/sib-polls.js
@@ -13,8 +13,11 @@ const base_url = import.meta.url.replace(/\/[^\/]*$/, '');
Helpers.importCSS("https://cdn.materialdesignicons.com/3.6.95/css/materialdesignicons.min.css");
Helpers.importCSS(`${base_url}/css/main.css`);
Helpers.importJS('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js');
-Helpers.importJS(`${base_url}/js/main.js`);
-Helpers.importJS(`${base_url}/js/polls-math.js`);
+
+document.addEventListener("DOMContentLoaded", ()=> {
+ Helpers.importJS(`${base_url}/js/main.js`);
+ Helpers.importJS(`${base_url}/js/polls-math.js`);
+});
export class SolidPoll extends SolidTemplateElement {
constructor() {
@@ -67,9 +70,6 @@ export class SolidPoll extends SolidTemplateElement {
template({dataSrc, nestedField,pollRangeBase,uploadDir}) {
if (!dataSrc) return '';
let sourceUrl = dataSrc + (nestedField ? nestedField + '/' : '');
-
- console.log("datasrc is ", dataSrc);
- console.log("source url is", sourceUrl);
return `
<solid-router use-hash default-route="pollListing">
@@ -86,6 +86,7 @@ export class SolidPoll extends SolidTemplateElement {
</div>
<solid-display
class="all-polls"
+ id="poll-listing"
search-fields="tags"
multiple-tags
@@ -137,10 +138,11 @@ export class SolidPoll extends SolidTemplateElement {
<!-- Topline - Image & Sidebar Main info-->
<solid-display
+ id="poll-page"
class="topline"
bind-resources
fields="left(image),
- right(orgLine(orgImage,hostingOrganisation),dateLine(dateImage,endDate),shortDescription,tags)"
+ right(orgLine(orgImage,hostingOrganisation),dateLine(start(dateImage,startDate),end(dateImage,endDate)),shortDescription,tags),startDate,endDate"
multiple-tags
@@ -150,14 +152,19 @@ export class SolidPoll extends SolidTemplateElement {
widget-hostingOrganisation="solid-display-div"
widget-orgImage="solid-display-div"
- value-orgImage="<i class='material-icons'></i>"
+ value-orgImage="<i class='material-icons'></i>"
- widget-endDate="solid-display-date"
- widget-dateImage="solid-display-div"
- value-dateImage="<i class='material-icons'></i>"
+ widget-startDate="solid-display-date"
+ widget-endDate="solid-display-date"
+
+ widget-dateImage="solid-display-div"
+ value-dateImage="<i class='material-icons'></i>"
>
</solid-display>
+ <!-- 2 start & end Dates in order to avoid having the issues no elements of set loaded on populate
+ fix when ticket xxxx is closed
+ -->
<!-- Main description-->
@@ -219,6 +226,7 @@ export class SolidPoll extends SolidTemplateElement {
>
</solid-form>
+ <div class="validation-error"></div>
</div>
<div class="share-vote">
@@ -262,6 +270,8 @@ export class SolidPoll extends SolidTemplateElement {
<p>This form allow you to share a new survey</p>
</div>
<solid-form
+ id="add-survey-form"
+ name="addPoll"
data-src="${sourceUrl}"
nested-fields='pollOptions,circle'
fields="main(
@@ -324,6 +334,7 @@ export class SolidPoll extends SolidTemplateElement {
next="pollPage"
></solid-form>
+ <div class="validation-error"></div>
</div>
<!-- widgets -->