Complex coding help for repeater

Ask the community
,
1

Hi team,

as I try to improve my skills and website I’ve been putting this job off for around a year but the time has come to try and improve the 1,000s line of code in place with using a repeater to reduce the code and improve the responsiveness of the website. So currently I have no repeater with 6 boxes that look like a repeater (this was easier to code) all working well which can be seen here showing the dates and course status https://www.scottishrockandwater.com/courses/Winter-Skills/Winter-Skills-2-day

As I mentioned I want to replace these boxes with a repeater, mainly to reduce the code.

I have the repeater working and populating the dates and switching between the current year and the following year. But I can’t work out how to get the code to run each of the containers to query the course status, can anyone help?

The backend query all works it’s just the issue of making the containers independant with the status, the dates work fine.

Here is a picture to try and show my issue:

1765×837 156 KB

import wixData from 'wix-data'; 
import {checkPaidParticipants, courseAvailability, courseConfirmed} from 'backend/utilitiesModule';  

$w.onReady(function () {  setDatesNextYear() });  

async function setDatesNextYear() {  let results = await wixData.query('Courses').eq('title', $w('#headerText').text).find();  
if (results.totalCount > 0) {  let item = results.items[0];  
let datesOne = [{                         
date: item.dateOneYh.toUKDateString(),                     }, {                         date: item.dateTwoYh.toUKDateString(),                     }, {                         date: item.dateThreeYh.toUKDateString(),                     }, {                         date: item.dateFourYh.toUKDateString(),                     }, {                         date: item.dateFiveYh.toUKDateString(),                     }, {                         date: item.dateSixYh.toUKDateString(),                     }] 

datesOne.forEach((el, i) => datesOne[i]._id = gettRandomID()) 

$w('#repeater2').data = datesOne;                     $w('#repeater2').onItemReady(($item, itemData, index) => {                         $item('#price').text = '£' + item.individaulPrice;                         $item('#duration').text = item.duration;                         $item('#date').text = itemData.date;                     
})                     
dateOne(item, datesOne)         
} }     

function dateOne(item, datesOne){  
let minParticipants = Number($w('#minParticipantsText').text);  
let maxParticipants = Number($w('#maxParticipantsText').text);  
let currentDate = new Date();  
let course = $w("#headerText").text;    
 
courseAvailability(item.title, datesOne).then((result) => {  
if (result === true) {checkPaidParticipants(item.title, datesOne).then((nrofPaidPeople) => {  
if (nrofPaidPeople === maxParticipants || nrofPaidPeople > maxParticipants ) {                         
$w('#availability').text = "Available spaces - 0" }  
 
let nrOfSpacesAvailable = maxParticipants-nrofPaidPeople;  
let nrRequiredtoConfirm = minParticipants - 1  
if(nrRequiredtoConfirm === nrofPaidPeople){                         $w("#availability").text = "Available spaces - " + nrOfSpacesAvailable;                         } 
 
if (nrofPaidPeople === minParticipants || nrofPaidPeople > minParticipants) {                         $w('#statusGreen').show();}  
if (datesOne<currentDate) { $w("#bookBtn").disable();}                 
});}  

else if (result === false) {             
$w("#availability").text = "Available spaces - " + maxParticipants;  
if (datesOne<currentDate) {$w("#bookBtn").disable();}         
}     
}) 
} 

function gettRandomID() { return  Math.random().toString(36).substring(7)}

Thank you in advance!

2

This is too long. I don’t know how many people here will have the patience to read it all.
Try to make it shorter first.
You have a lot of repeating code (for example all the repeater.onItemReady() functions). get rid of it and ask again.

3

@J.D. thanks for the feedback, I have just updated the code above.

4

@stephenmccall can you be more specific re what exactly doesn’t work

5

@jonatandor35 The code in the function dateOne doesn’t run properly as it takes all of the 6 dates. this means that it doesn’t match any of the queries. The picture above shows a test sample if I query just one field key from the database but it shows on all of the containers. It should only display in container 2 for this particular query.

Basically the dates show in individual containers but the query doesn’t query each container individually. Does this make sense? Sorry for the confusion.

6

@stephenmccall

  1. the picture is too small.
  2. if you call the dateOne() function from outside the repeater.onItemReady(), it won’t pass the item.
7

If you need your site to be backwards compatible, I suggest you don’t switch to repeaters. Before iOS 12 or 11 or so they just disappear.

Also, just because code looks wordy that doesn’t make it slow. Often the quickest code to run is longer than the most word-efficient (assuming that’s what you mean by responsive).

If you mean responsive in the design sense, however, then yes use onItemReady