← Back to team overview

mugle-dev team mailing list archive

Re: Mugle UI

 

I've attached my new working AdminViewBuilder.

Make sure you restart your browser or sign out of mugle before testing to
prevent unexpected behaviour between the changes.
Now that i've made that work i can use that to make the Badge etc work with
similar functionality.
Also Should we make a window pop up to confirm the removal of a
devteam/badge/game?

I'll commit it when i get home tonight and can get on over port 22.

On Fri, May 20, 2011 at 9:56 AM, Jens Pfau <jens.pfau@xxxxxxxxx> wrote:

> Ok cool. I am curious what's the problem.
>
>
> On Fri, May 20, 2011 at 9:55 AM, Scott Ritchie <s.ritchie73@xxxxxxxxx>wrote:
>
>> Right, but from my experience last night when writing similar
>> functionality, there were several reasons why objects might not be added to
>> the backend, most of the related to how GWT kept track of what you were
>> adding through asynchronous calls, so it might be a problem with the UI.
>>
>> Anyway i've got to a meeting, but im about 10 minutes away from making my
>> DevTeam version work, i'll attach it later when i get it done if you want to
>> look at it.
>>
>>
>> On Fri, May 20, 2011 at 9:49 AM, Jens Pfau <jens.pfau@xxxxxxxxx> wrote:
>>
>>> What I wanted to say is that we probably don't need the same
>>> functionality in two places, do we?
>>> So maybe you can better focus on something else for now and Prageeth(?)
>>> tries to find out why the backend doesn't allow these creations and edits to
>>> happen.
>>>
>>>
>>>
>>> On Fri, May 20, 2011 at 9:43 AM, Jens Pfau <jens.pfau@xxxxxxxxx> wrote:
>>>
>>>> Yeah they don't work because somehow the backend doesn't want to create
>>>> or edit badges/games ;)
>>>>
>>>>
>>>>
>>>> On Fri, May 20, 2011 at 9:38 AM, Scott Ritchie <s.ritchie73@xxxxxxxxx>wrote:
>>>>
>>>>> Hi prageeth,
>>>>>
>>>>> My thoughts on this would be to have the admin be able to edit these
>>>>> directly from the respective edit pages.
>>>>>
>>>>> My new AdminViewBuilder will have it so you can create new devTeams,
>>>>> and then when you click on them in the list, you will be taken to the
>>>>> respective /devteam/+edit page
>>>>>
>>>>> Jens, i've taken a quick look at your code and the TODOs are not
>>>>> working - so i havent been able to test the functionality of your badge
>>>>> list.  So i'll get mine working and see from there.
>>>>>
>>>>>
>>>>> On Fri, May 20, 2011 at 9:31 AM, Prageeth Silva <
>>>>> prageethsilva@xxxxxxxxx> wrote:
>>>>>
>>>>>> I would be spending a lot of time on mugle during the weekend, but I
>>>>>> do have a progress report due on monday and might work on that from
>>>>>> time to time as well.
>>>>>>
>>>>>> In addition this piece of information is important mainly to Scott.
>>>>>> I've added a new class that's AdminDevTeamsViewBuilder (its rather
>>>>>> long and we can put it in a separate package).
>>>>>>
>>>>>> My intentions are to have
>>>>>>
>>>>>> +admin  - admin tasks common page
>>>>>> +admin/users  - shows list of users,etc
>>>>>> +admin/teams  - shows list of dev teams,etc
>>>>>> +admin/games  - shows list of games,etc
>>>>>> +admin/vip - list of promoted games,etc
>>>>>>
>>>>>> I've made the AdminDevTeamsViewBuilder to be an exact copy of
>>>>>> AdminViewBuilder so you should continue working on that class instead.
>>>>>>
>>>>>> I've also handle url patterns in buildHistoryTokens and left place
>>>>>> holders so all we have to do is work on the views.
>>>>>>
>>>>>> Anyone disagree with the above url scheme. the reason i wanted to
>>>>>> break them up is, it might have looked wierd if devteam creation and
>>>>>> user creation, etc were on the same page.
>>>>>>
>>>>>>
>>>>>>
>>>>>> --
>>>>>> *Prageeth Silva*
>>>>>>
>>>>>
>>>>>
>>>>
>>>
>>
>
/*  Melbourne University Game-based Learning Environment
 *  Copyright (C) 2011 The University of Melbourne
 *
 *  This program is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU General Public License as published by
 *  the Free Software Foundation, either version 3 of the License, or
 *  (at your option) any later version.
 *
 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU General Public License for more details.
 *
 *  You should have received a copy of the GNU General Public License
 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

package au.edu.unimelb.csse.mugle.client.ui;

import java.util.ArrayList;

import java.util.Set;

import au.edu.unimelb.csse.mugle.client.AuthenticatedUser;
import au.edu.unimelb.csse.mugle.client.Mugle;
import au.edu.unimelb.csse.mugle.shared.model.DevTeam;
import au.edu.unimelb.csse.mugle.shared.model.ModelCollection;
import au.edu.unimelb.csse.mugle.shared.model.Role;
import au.edu.unimelb.csse.mugle.shared.model.User;

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyDownEvent;
import com.google.gwt.event.dom.client.KeyDownHandler;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Anchor;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Widget;

public class AdminViewBuilder {
	
	private static FlowPanel datatable = new FlowPanel();
	private static FlexTable devTeamFlexTable = new FlexTable();
	private static HorizontalPanel addPanel = new HorizontalPanel();
	private static TextBox newDevTeamTextBox = new TextBox();
	private static Button addDevTeamButton = new Button("Add");
	private static ArrayList<String> devName = new ArrayList<String>();

	public static Widget produceView(AuthenticatedUser authUser) {
		datatable.clear();
		if (authUser.getUser().getRole() != Role.ADMIN) {
			Mugle.showError("You are not authorized to view this page.");
			return datatable;
		}
		constructView();
		return datatable;
	}

	private static void constructView() {
		showDevTeams();
		
		// Assemble Add DevTeam panel.
		addPanel.add(newDevTeamTextBox);
		addPanel.add(addDevTeamButton);
		
		// Assemble Main panel.
		datatable.add(devTeamFlexTable);
		datatable.add(addPanel);
				
		// Listen for mouse events on the Add button.
		addDevTeamButton.addClickHandler(new ClickHandler() {
		  public void onClick(ClickEvent event) {
			  addDevTeam(newDevTeamTextBox.getText());
		  }
		});

	    // Listen for keyboard events in the input box.
	    newDevTeamTextBox.addKeyDownHandler(new KeyDownHandler() {
	        @Override
	        public void onKeyDown(KeyDownEvent event) {
	            if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
	                addDevTeam(newDevTeamTextBox.getText());
	            }

	        }

	    });
		
	}

	/**
	 * Shows all DevTeams currently in the datastore
	 */
	private static void showDevTeams() {
		devTeamFlexTable.removeAllRows();
		// Create the table for the stock data
		devTeamFlexTable.setText(0,0,"Unique Name");
		devTeamFlexTable.setText(0,1,"Full Name");
		devTeamFlexTable.setText(0,2,"Members");
		devTeamFlexTable.setText(0,3,"Remove");
		
		DevTeam.getDevTeams(0, 20, new AsyncCallback<ModelCollection<DevTeam>>() {
            @Override
            public void onFailure(Throwable caught) {
				  Mugle.showError(caught.getMessage());
				  for (StackTraceElement e : caught.getStackTrace()) {
					  datatable.add(new Label(e.toString()));
				  }
            }

            @Override
            public void onSuccess(ModelCollection<DevTeam> result) {
                for (DevTeam dt : result.getCollection()) {
                	showNewDevTeam(dt);
                }                
            }
        
		});	
	}
	
	/**
	 * Shows the newest devteam added to the client side list of teams
	 * @param dt
	 */
	private static void showNewDevTeam(DevTeam dt) {
		final String urlName = dt.getUrlName();
		devName.add(dt.getUrlName());
		
		int row = devName.size();
		devTeamFlexTable.setWidget(row, 0, new Anchor(dt.getUrlName(), "#!/" + dt.getUrlName() + "/+edit"));
    	devTeamFlexTable.setText(row, 1, dt.getFullName());
    	
  	    // Add a remove button for the DevTeam
  	    Button removeStockButton = new Button("x");
  	    removeStockButton.addStyleDependentName("remove");
  	    removeStockButton.addClickHandler(new ClickHandler() {
  	        public void onClick(ClickEvent event) {  	
  	            removeDevTeam(urlName);
  	        }
  	    });
  	    devTeamFlexTable.setWidget(row, 3, removeStockButton);
  	    
    	dt.getUsers(new AsyncCallback<Set<User>>() {
			@Override
			public void onFailure(Throwable caught) {
				int row = devName.indexOf(urlName) + 1;
				devTeamFlexTable.setText(row, 2, caught.getMessage());
			}

			@Override
			public void onSuccess(Set<User> result) {
				int row = devName.indexOf(urlName) + 1;
				devTeamFlexTable.setText(row, 2, Integer.toString(result.size()));
			}
    		
    	});
	}
	
	/**
	 * removes a DevTeam given the urlName
	 * @param urlName
	 */
	private static void removeDevTeam(String urlName) {
		Mugle.hideError();
		/* We get the DevTeam first so we can use DevTeam.remove() which
		 * has security checks 
		 */
		DevTeam.getByName(urlName, new AsyncCallback<DevTeam>() {
			@Override
			public void onFailure(Throwable caught) {
				Mugle.showError("Failed to remove DevTeam from datastore; " + caught.getMessage());
			}

			@Override
			public void onSuccess(DevTeam result) {
				int row = devName.indexOf(result.getUrlName()) + 1;
				devName.remove(row -1);
				result.remove(null);
				devTeamFlexTable.removeRow(row);
			}
			
		});
		
	}

	/**
	 * Creates a new DevTeam given a name
	 * @param name the name of the new DevTeam
	 */
	private static void addDevTeam(String name) {
		Mugle.hideError();
		DevTeam devteam = new DevTeam();
		devteam.setUrlName(name);
		devteam.setFullName(name);
		devteam.create(new AsyncCallback<DevTeam>() {
			  public void onFailure(Throwable error) {
				  Mugle.showError(error.getMessage());
		      }
			  
		      public void onSuccess(DevTeam result) {
		    	  showNewDevTeam(result);
		      }
		}); 
	}
	

}

Follow ups

References