Squash Logs – Client Side Validations

Posted in UI, Web Tagged , ,

For Squash Logs, validations need to be implemented at run-time, so that it is very easy for the player to enter his log data, after each game he plays. We designed the form, so that it was extremely simple for end user to update it.

The below client validations are implemented :

(*) Save button is hidden till all mandatory data is entered.

(*) Date control is shown. Future date cannot be selected for match logs. Date displayed is as per the format required.

(*) Total Score cannot exceed 5. Hence if any one opponent, enters a score of 3, the other opponent can only enter a score of 0,1 or 2.

score_1

My Score is 3, So Opponent Score can be only 0,1 or 2. Drop-down updated accordingly.

 

score_2

My Score is less than 3, So Opponent Score can be only 0,1, 2 or 3. Drop-down updated accordingly.

 

score_4

Opponent Score is 3, So My Score will be less than 3. Drop-down updated accordingly.

 

Opponent Score is less than 3, So My Score can be 3. Drop-down updated accordingly.

Opponent Score is less than 3, So My Score can be 3. Drop-down updated accordingly.

(*) If Scoring System is Selected as “HiHo”, then Games To are always set to 9. If Scoring System is Selected as “PAR”, then Games To, can be selected as either 11 or 15.

HiHo system, will always have 9 games. So no need to select anything here.

HiHo system, will always have 9 games. So no need to select anything here.

PAR System, can have 11 or 15 games. Player will select accordingly.

PAR System, can have 11 or 15 games. Player will select accordingly.

(*) Notes cannot exceed 500 characters. Number of pending characters are shown during typing.

Characters restricted to 500.

Characters restricted to 500.

(*) Weight Must be Positive number.

weight

 

(*) All users Locations are detected and loaded in the drop-down box.

location_3

(*) Any Location can be selected from all the Location created. In the select box, we have an option as “New Location”. If this is selected, then an input box is shown to enter the location name. This is mandatory only if “New Location” is selected from drop-down. Save logic is implemented accordingly.

location_2
(*) Either entering a new location, or selecting one is mandatory.

location_1

(*) All users Opponents are detected and loaded in the select box.

opponent_3

(*) Any Opponent can be selected from all the Opponents created. In the select box, we have an option as “New Opponent”. If this is selected, then an input box is shown to enter the opponent name. This is mandatory only if “New Opponent” is selected from drop-down. Save logic is implemented accordingly.

opponent_2

(*) Either entering a new opponent, or selecting one is mandatory.

opponent_1

(*) The users last entered details are retrieved via cookie and are auto-filled next time. He does not have to re-enter his common details again. If user is accessing the dashboard, from different systems, then the last entered details are fetched from the server. This way even without a cookie, he does get his details auto-filled in.

The same validations were implemented on server side, to ensure no one can push through any irrelevant data.

You can read more about this project here.

 

 

Squash Logs

Posted in Cloud, Mobile, Web Tagged , , , , , , ,

Squash games are played daily. The system is designed to store the game log data.  The aim here is to let users enter match logs in the quickest possible time, after they play their games. Thousands of log data records are expected to be uploaded daily. The site can be viewed on iPhone, iPad, Desktop browser, Android browser and is hosted as static html files.  Ajax calls are used for dynamic functionality and asynchronous updates.

A very simple login form is required to start with. If user does not exists, then the login form performs the role of registration.

Once a user logs in, he can enter the logs of the game that he played. Extensive client side validations are implemented to make the form extremely simple, for the player to use.

enter_logs_1

You can read more about the validations implemented here.

Same validations are implemented on server side, to ensure irrelevant data is not pushed through. XSS and CSRF security is implemented.

For speed of response, all master data is saved in json format on Amazon S3 files in various locations across the globe.  These data files are loaded as static content during log entry. Amazon DynamoDB is implemented for fast access to log data.

You can read more about the amazon implementation here.