Persisting a date property for a calendar - javascript

Need to some advice.
Currently I have a calendar that has one route "/events" (it is a monthly display). Within this route the user can click <<< or >>> to look at different months, in some cases the user will go back many months until they find the event they are looking for (yes there is also a search feature in place), in any given month a user can click into an event ("/events/:id") on a given day to see it's details.
Problem: since it's one route, when the user clicks back it goes to the current date which is initialized when the component is loaded and not to the last month they were on, which means the user would now need to click back <<< a whole bunch of times to get where they need.
Basically what I think I need is to persist the date of the month that's clicked into, but that leads me to other issues such as how do I get rid of this state when the user leaves the page altogether for another section of the site. Any suggestions? The other issue is that the user can actually get to this event from other areas of the site so I need to differentiate based on where the user came from.

I ended up using local storage, which is a good way to persist state without making calls to the db. This is only good if the data does need to be secured.

Related

Pop-up, when data already saved

I have a problem with the pop-up:
This page is asking you to confirm that you want to leave - data you have entered may not be saved.
I am using JavaServer Faces and JavaScript, and after navigating away (and saving every data that I need) if on the next page I click on any button, I see the pop-up. So it doesn't even appear on the page when the data was given, but on the next one, where I have just a few buttons to select the next action.
Does any easy way exist, to find out which part of the data is not saved?

Data in the database {MySQL} will automatically update even without user who will going to open the page that contains the code of updating

Good day!
Suppose that a user needs to perform an update to his account by opening a specific page in the website in every first day of the month, what If he/she forgot the update on that specific first day of month and I want my code to be designed as even though user forget to update, the data will be automatically updates in every first day of the month without the help of any, just a code that automatically runs on every first day of the month, anyone who could help with my problem?
for example:
<?php
if (date("d") == 1){
//do some database queries here
}
?>
If that code is included in the page, I still need to wait for the page to open to perform the code, but In my case, I want it to be automatic, so even though user does not open the page, still the code above will perform.
Well i think the only way is to put the code in the index but if the user doesnt open the website then you as an admin will need to do i manually
Every time any page is loaded on your site, you can just call a procedure in another unit that checks the date and does what is required. Just put it on every page.
If you want it to run even if no one logs in then google cron

How to handle pagination in Single Page Application?

On my Single Page Application (Javascript (AngularJs) webapp), I'm displaying a paginated items list.
I'm displaying 10 items per page.
In order to retain the current pagination opened by the user at any time while this one navigates on other page, I put the current page number on browser's localStorage.
Here's an example of workflow:
The user goes to myItemsList.html.
He opens the page 2 involving the url: myItemsList.html?page=2.
Then, he goes to another page: myOtherPage.html.
He goes back to the link initially pointing to myItemsList.html, that displays directly thanks to localStorage the page myItemsList.html?page=2 in order to potentially continue his navigation.
Would it confuse the user, maybe expecting to see the page 1 as a new starting navigation.
If I display at the top of the list, a kind of label like "Page 2" in order to warn him that he's seeing the preceding portion of his navigation, isn't it UX-friendly?
Or should I completely avoid persisting current pagination?
Here's what could happen if I don't persist the current viewed page:
The user goes to myItemsList.html.
He opens the page 2 involving the url: myItemsList.html?page=2
He opens an item in this page (the "show" page), leading to: myItemsList.html?id=123
He clicks on the browser's back button, causing a refresh of myItemsList.html (since a Single Page Application). The current pagination (page 2) would be lost and the user would need to restart it in order to continue its items discovery.
This seems really touchy...
What strategy should I choose for a use case like this?
saving the progress through navigation is the expected behavior in UX design of SPA, so maintaining the page he was in the correct choice, and since it is a pagination it won't be an issue even if the user wants to go back to any page, it will only take a click.
First of all I would avoid using localstorage and use a service instead to persist ur page counter.
Secondly u dont need to persist pg counter to anywhere else but in a scope variable for refreshing to mext page data. You can even think about just adding to results similar to infinitite scroll use cases. But either way, u can use local scope variable for pagination.
Whether to go directly to last viewed page - is a more business decision and will depend on needs.
But u can very easily persist or remove persisted data using broadcast and watch and decide on persistence based on event listened to.
Hope thos helps ...
How about maitaining a sort of heirerachy in JS like this :
Suppose a user navigates to a section called Customer Search
customer_search.customer_display.page = 2
Where customer_search is the a subsection , customer_display is the view with pagination you are targetting .
menu.menu_items.page=7
Where menu is the subsection , menu_items is the view with pagination
Might work if your application is organized in a reasonably hierarchical manner .
Probably you could also maintain the page in $scope for that particular controller .
The URL should dictate the navigation.
When I navigate to your website, e.g. example.com, I expect to be on the first page.
When I navigate to a (bookmarked) page of your website, e.g. example.com?page=2, I expect to be on the second page.
When I hit the back button, I expect to be presented with the previous page exactly as it was when I left it. You don't need to refresh the entire page, just listen to the history events and update accordingly.
And I strongly believe that this question doesn't belong to stackoverflow...

How can I store a list of usernames on client side?

I have a load of chat boxes which come up on click of a username within a list. The problem is I need to know which are currently chosen to hide/show if more are clicked than there is screen space (think of facebook - you keep clicking friends for private message and when no more fit along the bottom, the next one takes the last boxes spot. Clearly you hide this last one, but want it to come back if you close this current choice)
So, I need to cache a list or have a ridiculous number of input boxes in preparation. I have been looking at possibilities and is it possible to implement this with JSON cache? Is there a better option?
If JSON is the best option, please can somebody show me simply:
-> store array of usernames in jquery to JSON cache
-> retrieve JSON cache into jquery array
My JSON knowledge = 0.0001% and this is the only thing I want to use it for for a long time so my jsfiddle attempts failed. If you know any good "beginner / fast skim over" tutorials please link them!
Many thanks as always
Maybe you should look into the HTML5 feature localStorage
localStorage
localStorage How to use it
With that you can save the current username list of your users in their browser and access it easily with javascript.
You can save the data just for the browser session sessionStorage or for longer localStorage, so if the user comes back the next day, his settings will still be set.

Fullcalendar - Undo moves

I'm using fullCalendar to schedule events and I'm looking for a new function where the user can undo moves that been done in the calendar.
Do you guys know a smart way to do this?
The first thing that comes to my mind is to save previous states in in a new table and when the user wants to undo moves the system just reset the values in the events table with the ones in the "previous state" table.
I have implemented a solution for this. It may not be the most elegant but it works for me. I have a column in by events table called e_history; it's content is an array of JSON.stringified data that contains {date:"1/12/2012",startTime:"8:00",duration:4}. In my system the duration value corresponds with a value that is mapped out based on 30 minute time increments. In my event pop ups ($.dialog) I have a button the user can click to see old schedule dates - that are clickable if they want to set the event back to an old date. This only works for monitoring individual events. If you want to remember the entire state of the calendar, you could just save a stringified copy of the events object. This would allow the flexibility to parse it as needed and monitor differences from your db.

Categories

Resources