PROGRESS BAR HELP!!!

Ask the community
,
1

What I have: the code that just animates the progress bar

import {local} from ‘wix-storage’;

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

export function button1_click_ (event) {

$ w (“# progressBar10”). value = +10;

local.setItem (‘progress’, $ w (‘# progressBar10’). value);

const progress = local.getItem (‘progress’);

$ w (‘# progressBar10’). value = progress; }

What I’m trying to do:

1- the user logs in;

2 - When doing an action (clicking a button for example) this action makes the bar move

So far I’ve managed to resolve it.

3 - this action is saved in the database and causes the bar to remain in the same position even if the user leaves.

4 - the bar will have 3 movements (33.33% for each animation)

5 - the action of one user does not interfere in the database of the other.

I got close to that, the problem is that when leaving the page or updating the page the user loses the progress of the bar. In addition, the action of one interferes with the action of the other user. I’m not getting the bar to read its previous status.

2

Try this one…

 import {local} from 'wix-storage';

 $w.onReady (function () {
 const progress = local.getItem('progress');
 if (progress!==undefined){$w ('#progressBar10').value = progress; }
 
    $w("#button1").onClick(()=>{
        progress = $w("#progressBar10").value = +10;
        local.setItem ('progress', progress);
    })
});
3

thanks! always saving hahahah

4

I tested the code, but give error

5

@neutonjr27 What is the error? Pic?
Perhaps you should change const to var or let.

Use some console.logs to find the problem…

 import {local} from 'wix-storage';

 $w.onReady (function () {console.log("START")
 let progress = local.getItem('progress');
 console.log("Progress = ", progress)
 console.log("Progress-before-if-query:", $w('#progressBar10').value)
 if (progress!==undefined){$w('#progressBar10').value = progress; }
 console.log("Progress-after-if-query:", $w('#progressBar10').value)
 
    $w("#button1").onClick(()=>{console.log("Button-clicked")
        progress = $w("#progressBar10").value = +10;
        local.setItem ('progress', progress);
    })
});

And so on…

6

Hi there Jr and @russian-dima :raised_hand_with_fingers_splayed:

One note you need to consider, the storage only accepts strings, and from this point, you have multiple syntax errors.

First: The value that you’re both retrieving from the storage is a string, and strings cannot be assigned to the progress bar value (which is type of a number).
Try this instead:

// Retrieving the item from storage.
const progress = local.getItem('progress');

// Check that it's an actual string
if (typeof progress === 'string') {
    // Change the value into a number
    progress = Number(progress);
    
    // Check if the progress is a valid number.
    if (progress > 0) {
        // Change the progress bar value
        $w('#progressBar10').value = progress;
    }
}

Also, when saving the value to the storage, you need to change it to string, otherwise, you’ll get an undefined value whenever you try to retrieve it.

// Assuming the progress is equal to 10
local.setItem ('progress', String(progress));

Second: Your way to increment the progress is wrong.

let progressBar = $w("#progressBar10");

// Assuming that the progress is 50, when you do the following
progressBar.value = +10;

This will only replace the value, so it’ll be 10, instead of 60, you can increment the value by two methods:

// 1
progressBar.value = progressBar.value + 10;

// 2
progressBar.value += 10;

Also, side note: Do not use the storage on the progress bar if multiple members use the progress bar, it’ll affect all users across the site, instead, do the following:

When setting or getting the progress value, use the user ID in addition to it to save a unique value on the storage for each member.

import { currentUser } from 'wix-users';
let cookieName = `progress-${currentUser}`;

// This will set the cookie only for this user.
local.setItem (cookieName, value);

// This will get the member's specific cookie
local.getItem(cookieName);

Hope this helps~!
Happy Coding :fire:
Ahmad

7

Ok, i think i can’t add anything more to this good description.
I just wanted the post-opener to find his own “bugs and errors” by using some console-logs. I did not really concentrate on the code itself.

But yes, i see right now, all the little hidden errors, too.

Good job Ahamd.

8

@russian-dima :wink: