Youth academy screen changes

The youth academy page is the first thing I have attempted to alter so that it uses client side script functionality.

By that, I mean that the browser will do most of the work, meaning it should be much quicker to process requests.

There are 2 aspects to the Youth Academy page. There is a whole section to manage the players in a youth academy and there is a section to update the expenditure on youth development.

The latter is the completed bit at this moment in time with the former to be worked on next.

Whilst doing this work, I'm also attempting to improve the look of the pages to make them more user friendly.

Without trying to get too technical, this is my explanation of what I've changed....the previous way of working is actually for the user to hit a button and that then submits the whole page to the server, in order to get a result back. So in the case of the youth academy page, even though only expenditure may be changing, all the youth players are submitted along with the new expenditure value and then they are ignored. The new way of working just submits the relevant expenditure value to the server and it does this by linking to a new system that I have built (called an API).

Using script that runs in the browser means that the whole page doesn't need to be sent to the server and I can cherry pick the relevant information - in the case of expenditure - just the new value.

The API can then return a result as to whether it was successful or not, and, if not, why.

Hopefully that makes sense but for people that aren't interested in the technical specifics, below are the images of how the page has changed.

So this is the current screen:

and when the 'Change expenditure' button is clicked, it becomes this:


Clicking cancel or update then sends the whole page to the server and the page goes back to looking like the first image.

It's slow due to the server receiving the whole page - including player data (which isn't in this screenshot) and not immediately obvious that updating the expenditure value it has worked - the value does update but it's not very fancy.

The new way of doing it is to start off with the first screen, click 'Change expenditure' and get this: 
If an error is made when entering then it will show this:

and then on a successful update, this:


It looks much nicer and is much more obvious. The best part as far as I am concerned is that the whole thing happens without as much delay. Obviously I can't demonstrate this part but I hope to do similar functionality with player management and then launch it for all to use.

It's taken me a while to build the basic API aspects but now they are complete, I should be able to progress through the site, removing full server posts for small aspects, far more quickly.

Responsive manager header menu

Following on from the previous blog post, I wanted to demonstrate the new manager header menu and here it is;

You can see a new menu at the top right of the screen (which will drop below the 'Mystify Soccer' title on mobile devices).

This is going to contain various bits of information in what I feel is a better format to the way that the current site does it.

There will be a 'Status' menu that will show the current season/week and the date of the next matches. The notifications will warn you if you haven't selected a team or let you know of any transfer/loan requests that are still being waited for. There will also be a 'mail' menu that will show unread mail messages and, finally, there will be a menu to access your account details and sign out of the site.

I have completed all of this menu except for the mail drop down aspects which I hope to do over the next few days.

Once done, I will be looking at bringing in the current site pages (and we'll see how they look)!

New responsive layout

I haven't posted on this blog for a while because development has been a bit lax.

However, with my recent decision to try and focus on it a bit more, I'm hoping to revive this blog as I do different stages of the development but we'll see how my life gets on.

I need somewhere to note down my thoughts as to where I am currently at anyway.

The current state of play is that the site needs to become mobile friendly and more future proof so that aspects (new functionality) can be easier to implement.

My current plan is that I change the outer shell of the site and then work through the pages afterwards so once launched, the menu/header/footer will scroll and resize nicely but the actual page content may end up stretching pages or looking a bit odd. I'll then work through the pages as and when I get chance to make them all look and flow better for mobile devices..

Once this has been done and looks are OK - I want to improve functionality so that users get a better experience. Then I can look at improving the ganeral game.

The one caveat to the outer shell update is that I also need to do the home page and login page alongside it.

So then, here is the current layout for users who aren't signed into the site;

This then scales to a mobile phone like such;

There are differing sizes in between too for tablets and various other screen sizes.

The above, of course are for managers not signed into the site.

Once signed in, there is an extra section at the top of the site which is for notifications. I will aim to give more information on that on my next blog post.