Graphic Interface

I’ve been tweaking and creating the interface for a couple of weeks now, pretty much the main layout was designed and completed a week ago, but I had to change little things in order to make most of the team happy with the interface, its quite tricky since everyone has different opinions and no one is really wrong, so I had to change button or css styles a couple of times (at least) to make the interface what it is now.

Even though it may look simple a look of time was invested on details and functionality, we also wanted it to look simple and sleek since we are not trying to sell anything to anyone or trying to make people to come back, etc. the site is all about functionality and that was our main concern all along the way.

The tools used for the creation of the site were the Adobe Creative Suite for images and some css editing (the rest of it was made using TextWrangler), the site was mainly tested on Chrome and Firefox, but it was quite tricky to use tools that text the xhtml (to avoid tag soups) since we were using some django code here and there, but overall the site had no problems running in these two browsers.

Acceptance Testing.

Yesterday, I worked with my partner Sebastian Olivares in the acceptance test of our project. Sebastian is a member of @ESC (The student group to who we are developing the aplication). Since we have an almost finish version, we wanted to see it in action and also find some parts on which we can keep working during the final days.

After Sebastian used the software, he was very satisfied. He described the aplication as very useful and simple. He said that the graphics were really nice and the system in general worked very well for the intention of the project.

He also found some simple things that could be implemented:

- In the creation of tickets, specify that in that section we are creating the tickets.

- In the creation of events, in the time section, specify the right format of the hour (H:MM), because he had to repeat it twice until he finally added a right time.

Here we can see the video of the testing. We used Camptasia 5.0 to record the audio and video of the screen.

From logic to graphic.

The past week I have been working on the implementation of the Ticket seller logic into the graphic interface. I explained the logic of the ticket seller section in previous posts. In order to do this I had to do several points:

- Create the HTML file named assignSellers.hmtl.

- Create the showsTicketsSellers method in views.py.

The main changes were created in the assignSellers.html file.

The two parts of the code that are more important are the creation of the assignSellers button in the toolbar and the creation of the pop up of the assign sellers. In general, this two codes are the more relevant to make possible the graphic interface. There are some variables that I had to adjust. Those variables were width and height. Also, there is a mouseOver function, that is the responsible of changing the color of an icon when the mouse goes over it.

The name of the fields were changed in the table that can be found at the end of the archive:

Ticket number

Seller

Since I had all the logic ready, it was not so hard to finish the graphic interface. All I had to do was make the proper convertions and use those files that I had made in the last month.

The next step would be do the same (Converting from logic to graphic interface), but in the Incomes and Expenses sections.

Programming day

Today was a day of programming . It all started when we met at Vips for breakfast, after spending some time talking we continue the project. We divided the applications that were missing to make the meeting more dynamic. Among those applicactions, I had to do:

ShowStadistics: this functionality shows all data we store, for example: event data, number of tickets, tickets sold, tickets unsold, how much is gained, among other things.

AddEvent and DeleteEvent: these features were already implemented but my job here was to link this features with the system through the dialog.

Login: this features is to validate whether the user's session is valid or not. If the user is no logged, the system displays the login.html for enter the username and password.

Another point to have in mind is that our system is characterized by following the principle of "Keep it releasable" because we pre-tested our file before we upload them.

The last thing I did today was to update the info of our system in the google code because it showed the idea that we had at the beginning of the semester.

First complete working version!

Today we finished setting all the modules in the system, including ticket sellers, incomes, outcomes and improved design of statistics. The system can be used now completely, with all the functionalities it was planned to have. We are really excited about this!

We also fixed some bugs in our code. We are looking forward to continue doing tests to our system so we can ensure everything is working in the right way. We will also continue improving some small details about the menus and graphic interface in general.

Finances.

In the past week, I have been working in the finances part of the project. In this section, the users will be able to check the current statistics of a particular event. This statistics will be calculated based on the numbers of sold tickets and their price. There is another element that is taken into account when calculating the incomes and outcomes of an event. In every event, there could exist more incomes than only the sold tickets, and also, in this section the user should add the outcomes or the different costs of an event.

I have been focusing in three main functions. Add incomes and outcomes, modify incomes and outcomes and delete incomes and outcomes. In order to do this, I had to create the application of the financial module. Once this was done, I started to work in the model, forms and views.

Model: In the models I created income and outcome.

Forms: In this section I had to create some forms like AddIncomeForm, AddOutcomeForm, ModifyIncomeForm, ModifyOutcomeForm, DeleteIncomeForm, DeleteOutcomeForm. I had several problems in order to use the current event that the user selected (This happens because the JQuery functionality is not ready yet, so I had to simulate it by using a variable called eventId).

Views: I created the main methods here, those methods are: AddIncome, AddOutcome, ModifyIncome, ModifyOutcome, DeleteIncome, DeleteOutcome.

In general, I used some of the functions that were already created to guide me. To finish this part of the project, the stats section needs to be finished. This requires the use of JQuery.

New functionalities

I realized that there wasn't a function to delete events. So I implemented it. The user can select one or more events from a list with all the events inside of it and then delete them.

I made some changes to event models. I set name and date fields as unique_together, this is for not allowing users to create an event with the same name in the same date two or more times. As event names can be repeated, but in different dates, this is why I added this restriction. So, when the user tries to add a repeated event, a message is thrown informing the user the event already exists.

Also, I implemented the functionality that allows users to set the price of the ticket.

Popup -> Dialog

I was working on the method capable of join our applications with the system. This took some time because initially I wanted to use pop-up of J-QUERY. The pop up did not allow me to load URL. Unfortunately I realized that after a long research. Then I was told that there was another option to load URL. The option they gave me was to use the Dialogs, which have special characteristics to load URL. When I implemented the dialog in our system was necessary to combine it with iframe to exploit the features of both and present a friendly and easy design for the user

The combination helped me a lot because it enables us to upload any file we want. To load any file you only need to save the path in the variable this.href. We also have the option that each time you close the dialog, it refreshes the tabs.

I am currently researching how to every time you run a submit within this dialog, it closes automatically after a certain time.

Interface issues and popups

We had some problems with a new interface design so we decided to restore our project to an older version. This is why we made a lot of commits, because we had trouble reverting some changes.

We now know how to display the popups with forms. It's just missing how to close them automatically after executing the form functionality.

Notes module is already implemented. This is just a textarea where user can write any extra things about the event.

Sessions and event list

In the interface now is shown a list with all the events created. I implemented sessions in a way that when one of the shown events is clicked, it would be saved in the session, so the system would know which is the 'current event'. I also started adapting some views to the session use, so tasks can be done dynamically and not in a static way (all task were done just for the first element of the database before.) This is very easy tough.

I corrected some functionalities (special cases that were throwing exceptions) and added additional form validations.

Right now I am investigating about filters. I need these because the IF statement can't use == on templates, and IFEQUAL just compares between strings. I need to do this comparison to compare event buttons id with the current event stored in the session, so then I can highlight the current one.

Dynamic buttons for selling tickets

I have just finished configuring buttons for marking a ticket as 'sold' and 'attending'. They appear on the right side, next to each row of tickets. If you want to sell a ticket (mark a ticket as sold), just click on the cart button and it will be saved on the database and marked automatically. In case you made a mistake and want to undo this action, just click on the button again and it will be deleted on the database. The same mechanism happens for the 'attending button', whose symbol is a person icon.

Nevertheless, I have found a problem. I have realized that when I move to the next pages of the table of Ticket sell module, none of these buttons appear to be configured with JQuery. This is why I haven't made a commit yet. I'll try to resolve this conflict tonight.

Site Creation

Even though we’ve been working on the site functionality for the past couple of weeks we didn’t really spend any time working on the site, so while some are working on functionality and integration I decided to start working on the main .html and css files and also modify the existing .html and css files we are using from JQuery.

The first step was to create the parent template, so according to the design we had planned I made an Index xhtml page trying to follow as much of w3c standards I could remember, after tweaking the css style page for a while I decided to give it a go and try it in the actual site, this is where I encounter a major “problem”, the content block wasn’t being displayed, I tried to change the pages as much as I could but I was getting the same error all the time, after an hour or so of wasting my time I realized that JQuery was only going to display the content if the div css tag was named content, and nothing else.

After making that work, I realized that a lot of the .html files we had had some css inside them, so my styles were being changed from different sources and everything was resulting in a big mess, I had to track down those .html files and change the style lines that were messing up my design, after achieving this, I tweaked the .css and html file a little more, changed some imaged and made some new ones, for now I think the site is looking good, but there’s still some room for improvement.

Unit Tests so far..

Unit tests in this kind of systems might be tricky to properly build, not because their difficult to create, but the real functionality of Unit test in dynamic web pages is yet to be seen clearly. The only thing we can really do so far is to "AssertTrue" values with the database, to check if the values are being correctly stored in the database. There is no way to check if our “modify or delete” events are performing correctly, since we can’t really change the database data using these methods from the test file.

This is mainly because Django has a lot of the functionality we need already built-in, so were just using those forms and relying on Django. We can probably test some Django API to see if the forms,etc. are working correctly, but I think this defies the purpose of using Django, so unless we start creating a more hierarchical structure (which I don’t think we will in this project) Unit Tests are becoming just a way to see if the methods are properly storing data in the database.

Ticket sell

I have been working on the 'ticket sell' module interface. For this I used something called dataTables, which helped me to display the tables in a more stylish way. Tickets of the event are showed automatically inside that table and its buyer too. I also added some buttons next to each row with option like set a ticket as sold, set that ticket as attending to the event and setting the buyer of the ticket. These buttons are not linked yet with the functions already defined in python to perform such functionality.

In whole system we are loading content dynamically (so navigation could be easier for users), but it has been causing some issues.

These days I have been working in the assign tickets to the person in charge section. To do this I had to make some methods:

AssignTicketsForm: This one goes in forms.py.

AssignTickets: This one goes in views.py.

In general, the function of these methods is to set the person in charge of selling these tickets. A screen with all the current tickets of the event will appear and a field where the user can write the name of the seller. This will be saved in the seller variable of the ticket. The user can select all the tickets that will be under his charge by using the Ctrl key.

Problems in the process of a better design

We improved the design to raise the experience of the user. We put much emphasis in this because we want the user doesn’t make too much effort to understand our system. We changed some files like: mainInterface.html, index.html, baseEventTabs.html, eventTabs.html and indexAux.htm. These files are those who assemble all the features that our system provides.

One of the things that we changed for previous versions is the way the index looks. We add some logos: the university (ITESM CEM), the computer science’s student group (AESC) and the entity responsible for coordinating all activities of the students group (AGE). We also gave a welcome message.

This changes took some time because all the problems that we had with css. We had some problems with the tags of the files because those tags have already been used by the css file of the libraries that we are using of jQuery. After some research on the official web page of jQuery and some blogs we finally resolved that problem. Actually we are having some problems with the library of dataTable of jQuery that we are adding to our system because this library is changing some tags that we have already defined.

Adding and deleting tickets

I recently finished the adding tickets part. I had to simplify it: by now if an user inserts a range of tickets which already exists, it overwrites them, making them to loose their previous values. I'm looking forward to improve this functionality later, by validating some other cases.

Also I added a new functionality, which is deleting tickets. The user may select (from a multiple choice field) which tickets are needed to be deleted.

I had a hard time on sending parameters to a form. One of the problems is that whenever a form receives a parameter (like eventId, for example), the is_valid method returns that the form is invalid, so nothing is done.