Design Twitter Bootstrap interface to display groups and subgroups with sorting

IN PROGRESS
Bids
1
Avg Bid (AUD)
$80
Project Budget (AUD)
$30 - $250

Project Description:
We require an interface to display groups and subgroups. The use of Twitter Bootstrap and JavaScript is mandatory. For the project, the groups should display as: GroupA, GroupB, GroupC and GroupD. We firstly require the user to have the ability to select a group. Once the user has selected a group, that particular group should be highlighted and the subgroups should be displayed. The groups subgroups are as follows:

. GroupA - SubA1, SubA2
. GroupB - SubB1, SubB2, SubB3
. GroupC - SubC1
. GroupD - SubD1, SubD2, SubD3, SubD4
. Unallocated

The user should have the ability to select a subgroup. When the user has selected a group, a message similar to the following should be displayed using a JavaScript console.log statement:

'You have selected GroupC'

When a user has selected a subgroup, the subgroup should be highlighted and a message similar to the following should be displayed using a JavaScript console.log statement:

'You have selected SubD4 from GroupD'

We require groups to be sortable by dragging. When a user sorts a group, a message similar to the following should be displayed in the console:

'New group ordering - GroupC, GroupA, GroupB, GroupD' followed by
'You have selected GroupA'

At this point the selected group should be highlighted similar to the above. We require subgroups to be sortable by dragging. When a user sorts a subgroup, a message similar to the following should be displayed in the console:

'New subgroup ordering - SubA2, SubA1' followed by
'You have selected SubA1 from GroupA'

At this point the selected subgroup should be highlighted similar to the above. We also have the requirement for a special group called 'Unallocated'. We need the ability to drag any subgroup out of the group into the unallocated group. When this event occurs, the following message should be displayed in the console

'SubA2 has been unallocated'

We need to be able to drag unallocated subgroups back into groups which should be accompanied by the following message

'SubA2 has been allocated to Group A' followed by
'New subgroup ordering - SubA1, SubA2’

The specific representation of the unallocated group will be left to the designer, subject only to the above Twitter Bootstrap requirement. Our focus is on an intuitive design and ease of use. Hard coding of groups and subgroups is fine.

Skills required:
Bootstrap, Graphic Design, HTML, Website Design
About the employer:
Verified
Public Clarification Board
Bids are hidden by the project creator. Log in as the employer to view bids or to bid on this project.
You will not be able to bid on this project if you are not qualified in one of the job categories. To see your qualifications click here.


Hire tigranpetrosyan
$ 80
in 2 days