Commits

watermelon committed b3cbc60

fix ui bugs, refactor ui, add controls for adding bookmars, improved search result formatting

Comments (0)

Files changed (12)

src/main/client/ui/connect_presenter.js

 				bookmaak.ui.printSuccessMessage(success_text);
 				
 				showConnectViewConnected();
-				showLoginView();
+				showLoginViewLoggedOut();
 			}
 			else {
 				
 	console.debug("bookmaak.ui.onClickDisconnect: disconnecting from "+bookmaak.controller.Controller.server_url+"...");
 	bookmaak.controller.Controller.disconnect();
 	
+	hideAllViews();
+	hideBackbutton();
 	showConnectViewDisconnected();
 };
 
+
+
+/**
+ * showConnectViewInit()
+ * 
+ * Shows the connect_view the initial 
+ **/
 function showConnectViewInit() {
 	
-	//hide all
-	jQuery(".view").hide();
-	
-	jQuery("#backbutton").hide();
-	
 	//and re-init connect-view
 	jQuery("#connect_to_url").val("");
 	jQuery("#connected_to_url").val("");
 	
 	//show view
 	jQuery("#connect_view").fadeIn();
+	
+	jQuery("#connect_to_url").focus();
 }
 
+/**
+ * showConnectViewConnected()
+ * 
+ * Shows the connect_view for connected clients.
+ **/
 function showConnectViewConnected() {
 	
-	//hide all
-	jQuery(".view").hide();
-	
-	jQuery("#backbutton").show();
-	
 	//and prepare #connect_view
 	jQuery("#disconnected").hide();
+	jQuery("#connected").show();
 	
 	jQuery("#connected_to_url").val(bookmaak.controller.Controller.server_url);
-	jQuery("#connected").show();
 	
 	//show view
 	jQuery("#connect_view").fadeIn();
 }
 
+/**
+ * showConnectViewDisconnected()
+ * 
+ * Shows the connect_view for disconnected clients.
+ **/
 function showConnectViewDisconnected() {
 	
-	//hide all
-	jQuery(".view").hide();
-	
-	jQuery("#backbutton").hide();
-	
 	//and prepare #connect_view
 	jQuery("#connected").hide();
 	jQuery("#disconnected").show();
 	
 	//show view
 	jQuery("#connect_view").fadeIn();
+	
+	jQuery("#connect_to_url").focus();
 }

src/main/client/ui/connect_view.jade

 div#connect_view.hidden.view
-  div#disconnected
-    p
-      | Specify the server to connect to...
+  span#disconnected
+    
     label(for='connect_to_url')
       | Connect to:
     input#connect_to_url(type='url', list='server_urls')
      datalist#server_urls
       option(value='http://localhost:1337')
       option(value='http://localhost:6006')
+      
     input(value='connect', type='button',
       onClick='bookmaak.ui.onClickConnect()')
       
-  div#connected.hidden
+      
+  span#connected.hidden
+  
     label(for='connected_to_url')
       | Connected to:
     input#connected_to_url(type='url', disabled)
+    
     input(value='disconnect', type='button',
       onClick='bookmaak.ui.onClickDisconnect()')

src/main/client/ui/index.jade

   body(onClick='bookmaak.controller.Controller.rng.rng_seed_time();',
     onKeyPress='bookmaak.controller.Controller.rng.rng_seed_time();')
     
+  div#components
+  
     div#messages
       div.successbox
       div.noticebox
       div.errorbox
       
       
-      
     div#loading.hidden
       img(src="http://upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif")
       
     input#backbutton(value='back', type='button',
       onClick='bookmaak.ui.onClickBack()')
       
-    div#views
-      
-      include connect_view
-      
-      include register_view
-      
-      include login_view
-      
-      include manage_account_view
-      
-      include manage_bookmarks_view
+  div#views
+    
+    include connect_view
+    
+    include register_view
+    
+    include login_view
+    
+    include manage_account_view
+    

src/main/client/ui/index_presenter.js

 		jQuery('.errorbox').hide();
 		
 		//show initialview
+		hideBackbutton();
 		showConnectViewInit();
 	};
 };
 		switch(visibleView.id) {
 		
 		case REGISTER_VIEW_ID:
-			showLoginView();
-			break;
-		case MANAGE_ACCOUNT_VIEW_ID:
-			showLoginView(bookmaak.controller.Controller.login_name);
+			hideRegisterView();
+			showLoginViewLoggedOut();
 			break;
 		case MANAGE_BOOKMARKS_VIEW_ID:
 			showManageAccountView();
 			break;
-		case CONNECT_VIEW_ID://well that one is not a real view... more a widget
+		case MANAGE_ACCOUNT_VIEW_ID://well those are not a real views... more a widgets
+		case CONNECT_VIEW_ID:
 			break;
 		default:
 			throw new Error("bookmaak.ui.onClickBack: Semantical error!");
 		}
 	}
 	
-	
-	
 	//TODO call funktion to the defined previous view
 	
 };
+
+
+
+
+
+/**
+ * showBackbutton()
+ * 
+ * Shows the back button.
+ **/
+function showBackbutton() {
+	
+	jQuery("#backbutton").show();
+}
+
+/**
+ * hideBackbutton()
+ * 
+ * Hides the back button.
+ **/
+function hideBackbutton() {
+	
+	jQuery("#backbutton").hide();
+}
+
+/**
+ * hideAllViews()
+ * 
+ * Hides all views.
+ **/
+function hideAllViews() {
+	
+	jQuery(".view").hide();
+}
+

src/main/client/ui/login_presenter.js

  **/
 bookmaak.ui.onClickLogin = function() {
 	
-	var _login = jQuery("#login").val();
+	var _login = jQuery("#logged_out_login").val();
 	
 	if(bookmaak.util.validation.validateLogin(_login)) {
 		
 				bookmaak.ui.
 				printSuccessMessage("Login successful, you may proceed!");
 				
+				showLoginViewLoggedIn();
 				showManageAccountView();
 			}
 			else {
 				bookmaak.ui.
 				printWarningMessage("Login failed, maybe register first?");
 				
-				showLoginView(_login);
+				showLoginViewLoggedOut(_login);
 			}
 		});
 	}
 	}
 };
 
-function showLoginView(login) {
+
+/**
+ * bookmaak.ui.onClickRegister()
+ * 
+ * Called when the user clicks register(to begin registration).
+ **/
+bookmaak.ui.onClickRegister = function() {
+	
+	hideLoginView();
+	showBackbutton();
+	showRegisterView();
+};
+
+
+/**
+ * bookmaak.ui.onClickLogout()
+ * 
+ * Called when the user clicks logout..
+ **/
+bookmaak.ui.onClickLogout = function() {
+	
+	//TODO make that one a controller property .... so we can access last login from every state for security we should clean it some time...
+	var last_login = bookmaak.controller.Controller.login_name;
+	
+	console.debug("bookmaak.ui.onClickLogout: loggin out...");
+	bookmaak.controller.Controller.logout();
+	
+	hideManageAccountView();
+	showLoginViewLoggedOut(last_login);
+};
+
+
+
+
+
+
+
+/**
+ * showLoginViewLoggedIn()
+ * 
+ * Shows the login_view for logged in users.
+ **/
+function showLoginViewLoggedIn() {
+	
+	jQuery("#logged_out").hide();
+	jQuery("#logged_in").show();
+	
+	//we don't need the backbutton here
+	hideBackbutton();
+	
+	jQuery("#logged_in_login").val(bookmaak.controller.Controller.login_name);
+	
+	//show view
+	jQuery("#login_view").fadeIn();
+}
+
+/**
+ * showLoginViewLoggedOut(String)
+ * 
+ * Shows the login_view for not yet logged in user or logged out users.
+ * 
+ * **login** the login
+ **/
+function showLoginViewLoggedOut(login) {
 	
 	if(!bookmaak.util.isDefined(login))
 		login = "";
 		login = "";
 	}
 	
-	//hide all
-	jQuery(".view").hide();
+	//and re-init login-view
+	jQuery("#logged_out_login").val(login);
 	
-	jQuery("#backbutton").hide();
+	jQuery("#logged_in").hide();
+	jQuery("#logged_out").show();
 	
-	//and re-init login-view
-	jQuery("#login").val(login);
+	//we don't need the backbutton here
+	hideBackbutton();
 	
-	//show views
-	jQuery("#connect_view").show();
+	//show view
 	jQuery("#login_view").fadeIn();
+	
+	jQuery("#login").focus();
 }
 
 
-
-
 /**
- * bookmaak.ui.onClickRegister()
+ * hideLoginView()
  * 
- * Called when the user clicks register(to begin registration).
+ * Hides the whole login view.
  **/
-bookmaak.ui.onClickRegister = function() {
+function hideLoginView() {
 	
-	showRegisterView();
-};
+	jQuery("#login_view").hide();
+}

src/main/client/ui/login_view.jade

 div#login_view.hidden.view
 
-  label(for='login')
-    | Login(just for development):
-  input#login(type='text')
+  div#logged_out
   
-  input(value='Login',    type='button',
-    onClick='bookmaak.ui.onClickLogin()')
+    label(for='logged_out_login')
+      | Login:
+    input#logged_out_login(type='text')
     
-  input(value='Register', type='button',
-    onClick='bookmaak.ui.onClickRegister()')
+    input(value='Login',    type='button',
+      onClick='bookmaak.ui.onClickLogin()')
+      
+    input(value='Register', type='button',
+      onClick='bookmaak.ui.onClickRegister()')
+      
+      
+      
+  div#logged_in
+  
+    input#logged_in_login(type='text', disabled)
+    
+    input(value='Logout', type='button',
+      onClick='bookmaak.ui.onClickLogout()')
+  

src/main/client/ui/manage_account_presenter.js

 //  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 //
 
-//TODO this should be a "widget" like connect_view
+
 /**
  * bookmaak.ui.onClickManageBookmarks()
  * 
  **/
 bookmaak.ui.onClickManageBookmarks = function() {
 	
-	showManageBookmarksView();
+	showManageAccountView("#man_opt_manage_bookmarks");
 };
 
 /**
 	showManageAccountView("#man_opt_delete_account");
 };
 
+
+
+
+
+
+
 /**
- * bookmaak.ui.onClickLogout()
+ * showManageAccountView(String)
  * 
- * Called when the user clicks logout..
+ * Shows the manage_account_view
+ * 
+ * **option_to_show** id if the option to show
  **/
-bookmaak.ui.onClickLogout = function() {
-	
-	//TODO make that one a controller property .... so we can access last login from every state for security we should clean it some time...
-	var last_login = bookmaak.controller.Controller.login_name;
-	
-	console.debug("bookmaak.ui.onClickLogout: loggin out...");
-	bookmaak.controller.Controller.logout();
-	
-	showLoginView(last_login);
-};
-
 function showManageAccountView(option_to_show) {
 	
 	if(!bookmaak.util.isDefined(option_to_show)
 		option_to_show = "";
 	}
 	
-	//hide all
-	jQuery(".view").hide();
-	
-	jQuery("#backbutton").hide();
-
 	//hide all options by default
 	jQuery(".man_opt_option").hide();
 	switch(option_to_show) {
+		case "#man_opt_manage_bookmarks":
 		case "#man_opt_import_export":
 		case "#man_opt_change_account":
 		case "#man_opt_delete_account":
-			jQuery(option_to_show).show();
+			jQuery(option_to_show).fadeIn();
 			break;
 	}
 	
 	//show view
 	jQuery("#manage_account_view").show();
 	
-	//fade in new content
-	jQuery("#connect_view").show();
 	jQuery("#manage").fadeIn();
 }
+
+/**
+ * hideManageAccountView()
+ * 
+ * Hides the manage_account_view
+ **/
+function hideManageAccountView() {
+	
+	jQuery("#manage_account_view").hide();
+}

src/main/client/ui/manage_account_view.jade

 
   div#manage_options
   
-    input(value='Manage bookmarks',        type='button',
+    input(value='Manage bookmarks', type='button',
       onClick='bookmaak.ui.onClickManageBookmarks()')
       
     input(value='Import/export bookmarks', type='button',
       onClick='bookmaak.ui.onClickImportExport()')
       
-    input(value='Change account',          type='button',
+    input(value='Change account', type='button',
       onClick='bookmaak.ui.onClickChangeAccount()')
       
-    input(value='Delete account',          type='button',
+    input(value='Delete account', type='button',
       onClick='bookmaak.ui.onClickDeleteAccount()')
       
-    input(value='Logout',                  type='button',
-      onClick='bookmaak.ui.onClickLogout()')
-      
-      
   div#manage
   
+    div#man_opt_manage_bookmarks.man_opt_option.hidden
+      
+      include manage_bookmarks_view
+        
     div#man_opt_import_export.man_opt_option.hidden
       p
         | TODO import/export

src/main/client/ui/manage_bookmarks_presenter.js

 //
 
 
-
 /**
  * bookmaak.ui.onKeyPressSearch()
  * 
 bookmaak.ui.onKeyPressSearch = function() {
 	
 	//TODO get all option values
-	
-	//TODO call the controller to get the result
-	
 	bookmaak.ui.printNoticeMessage("(debug) searching...");
 	
+	jQuery("#bookmarks").empty();
+	
 	var all_bookmarks = bookmaak.controller.Controller.get_bookmarks();
+	
 	for(var i = 0; i < all_bookmarks.length; i++) {
 		
 		var bookmark = all_bookmarks[i];
 		
-		jQuery("#bookmarkstable").append(
-				"<tr>" +
-				"<td>"+bookmark.getId()+"</td>" +
-				"<td>"+bookmark.getTitle()+"</td>" +
-				"<td>"+bookmark.getUrl()+"</td>" +
-				"<td>"+bookmark.getTags().toString()+"</td>" +
-				"<td>"+bookmark.getMetas().toString()+"</td>" +
-				"</tr>");
+		jQuery("#bookmarks").append(
+			'<li id="'+bookmark.getId()+'" class="bookmark">' +
+				'<input class="selectlink" type="checkbox" />' +
+				'<a class="link" href="'+bookmark.getUrl()+'">'+bookmark.getTitle()+'</a>' +
+				'<br/>' +
+				'<strong>tags:</strong><span class="tags">'+bookmark.getTags().toString()+'</span>' +
+				'<br/>' +
+				'<strong>meta tags:</strong><span class="metas">'+bookmark.getMetas().toString()+'</span>' +
+			"</li>");
 	}
 	
 	jQuery("#search_result").show();
 };
 
+
+/**
+ * bookmaak.ui.onClickAddNewBookmark()
+ * 
+ * Called when the user clicks to show the add bookmark controls..
+ **/
+bookmaak.ui.onClickAddNewBookmark = function() {
+	
+	//add is visible we hide it and fade in the other
+	if(jQuery("#add_bookmark").is(":visible")) {
+		
+		jQuery("#add_bookmark").toggle();
+		jQuery("#search").fadeToggle();
+	}
+	else {
+		
+		jQuery("#add_bookmark").fadeToggle();
+		jQuery("#search").toggle();
+	}
+};
+
+
+/**
+ * bookmaak.ui.onClickSearchOptions()
+ * 
+ * Called when the user clicks the search options checkbox...
+ **/
+bookmaak.ui.onClickSearchOptions = function() {
+	
+	jQuery("#search_options").toggle();
+};
+
+
 /**
  * bookmaak.ui.onClickSearchOptionInTitle()
  * 
 	//get current value
 	var search_in_title = jQuery("#search_option_title").val();
 	
-	//set the opposite
-	if(search_in_title == "on")
-		jQuery("#search_option_title").val("off");
-	else
-		jQuery("#search_option_title").val("on");
-	
 	//TODO remember option value in local store
 };
 
 	//get current value
 	var search_in_url = jQuery("#search_option_url").val();
 	
-	//set the opposite
-	if(search_in_url == "on")
-		jQuery("#search_option_url").val("off");
-	else
-		jQuery("#search_option_url").val("on");
-	
 	//TODO remember option value in local store
 };
 
 	//get current value
 	var search_in_tags = jQuery("#search_option_tags").val();
 	
-	//set the opposite
-	if(search_in_tags == "on")
-		jQuery("#search_option_tags").val("off");
-	else
-		jQuery("#search_option_tags").val("on");
-	
 	//TODO remember option value in local store
 };
 
 	//get current value
 	var search_in_metas = jQuery("#search_option_metas").val();
 	
-	//set the opposite
-	if(search_option_metas == "on")
-		jQuery("#search_option_metas").val("off");
-	else
-		jQuery("#search_option_metas").val("on");
-	
 	//TODO remember option value in local store
 };
 
-function showManageBookmarksView() {
+
+/**
+ * bookmaak.ui.onClickAddBookmark()
+ * 
+ * Called when the user clicks the add bookmark button..
+ **/
+bookmaak.ui.onClickAddBookmark = function() {
 	
-	//TODO reload last options from local store
-	
-	//hide all
-	jQuery(".view").hide();
-	
-	jQuery("#backbutton").show();
-	
-	//hide result by default
-	jQuery("#search_result").hide();
-	
-	//show view
-	jQuery("#connect_view").show();
-	jQuery("#manage_bookmarks_view").fadeIn();
-}
+//	showManageBookmarksViewFadeAddBookmark();//TODO add the new bookmark
+};
+
+
+
+
+
+
+/*
+ * Shows the manage_bookmarks_view
+ * 
+ *  deprecated
+ */
+//function showManageBookmarksView() {
+//	
+//	//prepare
+//	jQuery("#search").show();//TODO make functions for that ??!
+//	jQuery("#add_bookmark").hide();
+//	jQuery("#search_options").hide();
+//	
+//	jQuery("#manage_bookmarks_view").fadeIn();
+//}
+
+

src/main/client/ui/manage_bookmarks_view.jade

-div#manage_bookmarks_view.hidden.view
+div#manage_bookmarks_view.view
 
-  div#search_options
-    p
-      | search
+  input(value='Add new bookmark', type='button',
+    onCLick='bookmaak.ui.onClickAddNewBookmark()')
+    
+  div#search
+  
     label(for='search_field')
       | Search:
     input#search_field(type='search', autocomplete='on', autofocus,
       onKeyPress='bookmaak.ui.onKeyPressSearch()')
       
+    label(for='search_options_chk')
+      | advanced options
+    input#search_options_chk(type='checkbox',
+      onCLick='bookmaak.ui.onClickSearchOptions()')
+      
+    div#search_options.hidden
+    
+      label(for='search_option_title')
+        | in title
+      input#search_option_title(type='checkbox', checked,
+        onClick='bookmaak.ui.onClickSearchOptionInTitle()')
+        
+      label(for='search_option_url')
+        | in url
+      input#search_option_url(type='checkbox',
+       onClick='bookmaak.ui.onClickSearchOptionInUrl()')
+      
+      label(for='search_option_tags')
+        | in tags
+      input#search_option_tags(type='checkbox', checked,
+        onClick='bookmaak.ui.onClickSearchOptionInTags()')
+        
+      label(for='search_option_metas')
+        | in meta tags
+      input#search_option_metas(type='checkbox', checked,
+        onClick='bookmaak.ui.onClickSearchOptionInMetas()')
+        
+    div#search_result.hidden
+    
+      input#select_all(type='button', value='select all',
+        onClick='bookmaak.ui.onClickSelectAll()')
+        
+      ul#bookmarks
+        
+        
+        
+  div#add_bookmark.hidden
+  
+    label(for='bookmark_title')
+      | title:
     br
+    input#bookmark_title(type='text')
+    br
+    br
+    label(for='bookmark_url')
+      | url:
+    br
+    input#bookmark_url(type='text')
+    br
+    br
+    label(for='bookmark_tags')
+      | tags(comma separated):
+    br
+    input#bookmark_tags(type='text')
+    br
+    br
+    label(for='bookmark_metas')
+      | meta tags(comma separated)(until we fetch them):
+    br
+    input#bookmark_metas(type='text')
+    br
+    br
+    input#add_bookmark(value='add', type='button',
+      onCLick='bookmaak.ui.onClickAddBookmark()')
     
-    label(for='search_option_title')
-      | in title
-    input#search_option_title(type='checkbox', checked,
-      onClick='bookmaak.ui.onClickSearchOptionInTitle()')
-      
-    label(for='search_option_url')
-      | in url
-    input#search_option_url(type='checkbox',
-      onClick='bookmaak.ui.onClickSearchOptionInUrl()')
     
-    label(for='search_option_tags')
-      | in tags
-    input#search_option_tags(type='checkbox', checked,
-      onClick='bookmaak.ui.onClickSearchOptionInTags()')
-    
-    label(for='search_option_metas')
-      | in meta tags
-    input#search_option_metas(type='checkbox', checked,
-      onClick='bookmaak.ui.onClickSearchOptionInMetas()')
-      
-      
-  div#search_result.hidden
-    table
-      thead
-        tr
-          th
-            'id'
-          th
-            'title'
-          th
-            'url'
-          th
-            'tags'
-          th
-            'metas'
-      tbody#bookmarkstable
-      
-      tfooter

src/main/client/ui/register_presenter.js

 							if(result.success) {
 								bookmaak.ui.printSuccessMessage(
 									"Registration successful, you may login now!");
+								
 								//show the login site
-								showLoginView(registrationData.login);
+								hideRegisterView();
+								hideBackbutton();
+								showLoginViewLoggedOut(registrationData.login);
 							}
 							else {
 								bookmaak.ui.printWarningMessage(
 									"Registration failed, try again later.<br/>"
 									+"If the problem persists, contact the servers administrator.");
+								
 								//back again
+								showBackbutton();
 								showRegisterView(registrationData);
 							}
 						});
 	}
 };
 
+
+
+
+
+
+
+/**
+ * showRegisterView(Object)
+ * 
+ * Shows the register_view with the defined values.
+ * 
+ * **values** the register form values
+ **/
 function showRegisterView(values) {
 	
-	//hide all
-	jQuery(".view").hide();
-	
 	//re-init register-view if neccessary
 	if(!bookmaak.util.isDefined(values)
 	|| !bookmaak.util.isType(values, bookmaak.util.TYPE.OBJECT)) {
 		};
 	}
 	
-	jQuery("#backbutton").show();
-	
 	jQuery("#register_login").val(values.login);
 	jQuery("#register_private_key").val(values.private_key);
 	jQuery("#register_public_key").val(values.public_key);
 	
 	//show view
-	jQuery("#connect_view").show();
 	jQuery("#register_view").fadeIn();
 }
 
+/**
+ * hideRegisterView()
+ * 
+ * Hides the register_view
+ **/
+function hideRegisterView() {
+	
+	jQuery("#register_view").hide();
+}
 add src/main/client/ui/manage_account_presenter.js
 add src/main/client/ui/manage_bookmarks_presenter.js
 
-