Lots of navigation fixes. UI work.

api.php

@@ -34,17 +34,21 @@
 					// TODO - handle admin requests
 				break;
 				case 'template':
-					$ret['template'] = file_get_contents(PATH_DATA.'pages/'.$id.'.template');
-					if(file_exists(PATH_DATA.'context/'.$id.'.json')){
-						$context = objectToArray(json_decode(file_get_contents(PATH_DATA.'context/'.$id.'.json')));
+					if(file_exists(PATH_DATA.'pages/'.$id.'.template')){
+						$ret['template'] = file_get_contents(PATH_DATA.'pages/'.$id.'.template');
+						if(file_exists(PATH_DATA.'context/'.$id.'.json')){
+							$context = objectToArray(json_decode(file_get_contents(PATH_DATA.'context/'.$id.'.json')));
+						}else{
+							$context = Array();
+						}
+						if($LOGGEDIN){
+							$context['key'] = true;
+							$context['user'] = userObj($_SESSION['username']);
+						};
+						$ret['context'] = $context;
 					}else{
-						$context = Array();
+						$ret['error'] = 'That page does not exist';
 					}
-					if($LOGGEDIN){
-						$context['key'] = true;
-						$context['user'] = userObj($_SESSION['username']);
-					};
-					$ret['context'] = $context;
 					retj($ret,$id);
 				break;
 				case 'action':

css/style.css

@@ -5,9 +5,72 @@ html,body{
 	padding: 0;
 	margin: 0;
 }
-div#content{
+h1,h2,h3,h4,p{
+	margin: 0;
+}
+p{
+	padding-top: 16px;
+	padding-bottom: 16px;
+	padding-left: 5px;
+	padding-right: 5px;
+}
+div#topbar{
 	width: 100%;
+	height: 35px;
+	border-color: black;
+	border-style: solid;
+	border-width: 1px;
+	background-color: black;
+	color: white;
+	overflow: hidden;
+}
+div#topbar div{
+	height: 100%;
+}
+div#topbar a{
+	color: white;
+	text-decoration: none;
+	text-transform: capitalize;
+	text-align: center;
+	vertical-align: middle;
 	height: 100%;
+	display: inline-block;
+	border-color: white;
+	border-style: solid;
+	border-width: 0;
+	border-right-width: 1px;
+	border-left-width: 1px;
+	margin-left: -1px;
+	float: left;
+	font-size: 20px;
+	line-height: 35px;
+	padding-left: 2px;
+	padding-right: 2px;
+}
+div#topbar a:hover{
+	background-color: white;
+	color: black;
+	border-bottom-color: black;
+}
+div#topbar a:hover + a{
+	border-left-color: black;
+}
+div.topbar-right{
+	float: right;
+}
+div.topbar-left{
+	float: left;
+}
+a.topbar-home{
+	width: 35px;
+	background-color: darkred;
+}
+a.topbar-home:hover{
+	background-color: gray !important;
+}
+div#content{
+	width: 100%;
+	height: calc(100% - 35px);
 	overflow: auto;
 }
 div#loading{

data/context/index.json

@@ -1,3 +0,0 @@
-{
-	"title": "Bugs"
-}

data/context/login.json

@@ -1,3 +0,0 @@
-{
-	"title": "Login"
-}

data/context/register.json

@@ -1,3 +0,0 @@
-{
-	"title": "Register"
-}

data/pages/index.template

@@ -1,17 +1 @@
-<h1>
-	{{title}}
-</h1>
-<p>
-	Welcome to bugs!
-</p>
-<p>
-	{{#unless key}}
-		<a href="#page-login">Login</a>
-		-
-		<a href="#page-register">Register</a>
-	{{else}}
-		<a href="#page-logout">Logout</a>
-		-
-		<a href="#~{{user.name}}">{{user.name}}</a>
-	{{/unless}}
-</p>
+Welcome to bugs!

data/pages/topbar.template

@@ -0,0 +1,28 @@
+<div class="topbar-left">
+	<a class="topbar-home" href="#page-index">
+		&#8962;
+	</a>
+	<a href="#{{url}}">
+		{{title}}
+	</a>
+</div>
+<div class="topbar-right">
+	{{#unless key}}
+		<a href="#page-login">
+			Login
+		</a>
+	{{else}}
+		<a href="#page-issues">
+			Issues
+		</a>
+		<a href="#page-scrums">
+			Scrums
+		</a>
+		<a href="#~{{user.name}}">
+			{{user.name}}
+		</a>
+		<a href="#page-logout">
+			Logout
+		</a>
+	{{/unless}}
+</div>

data/pages/user.template

@@ -1,15 +1,6 @@
 <div>
-	{{name}}
+	Name: {{name}}
 </div>
 <div>
-	{{email}}
-</div>
-{{#unless key}}
-	<a href="#page-index">Home</a>
-{{else}}
-	<a href="#page-logout">Logout</a>
-	-
-	<a href="#~{{user.name}}">{{user.name}}</a>
-	-
-	<a href="#page-index">Home</a>
-{{/unless}}
+	Email: {{email}}
+</div>

js/index.js

@@ -34,6 +34,7 @@
 			return Key;
 		},
 		apiCall = window.apiCall = function(data,callback){
+			console.log('apiCall('+data.type+'-'+data.id+')');
 			$('#loading').show();
 			data.get = 'api';
 			data.timestamp = +new Date;
@@ -42,6 +43,7 @@
 					error(d);
 				}else{
 					if(location.href.substr(location.href.lastIndexOf('/')+1) != d.state.url){
+						console.log('Forced redirection to '+d.state.url);
 						History.pushState(d.state.data,d.state.title,d.state.url);
 					}
 				}
@@ -51,6 +53,7 @@
 			},'json');
 		},
 		loadState = window.loadState = function(href,callback){
+			console.log('loadState('+href+')');
 			$('#loading').show();
 			var data = {
 				get:'state',
@@ -69,6 +72,7 @@
 			},'json');
 		},
 		apiState = window.apiState = function(href,callback){
+			console.log('apiState('+href+')');
 			$('#loading').show();
 			var data = {
 				get:'state',
@@ -90,6 +94,7 @@
 			e = '['+State.url+']'+e.error;
 			console.error(e+"\n"+(exists(e.state)?JSON.stringify(e.state):''));
 			alert(e);
+			//History.back();
 		},
 		getNewState = function(){
 			State = History.getState();
@@ -107,6 +112,32 @@
 				}
 			}
 			return true;
+		},
+		render = {
+			topbar: function(t,c){
+				$('#topbar').html(Handlebars.compile(t)(c));
+				render.links('#topbar');
+			},
+			content: function(t,c){
+				$('#content').html(Handlebars.compile(t)(c)).mCustomScrollbar('destroy');
+				$('#content,.scroll').mCustomScrollbar({
+					theme: 'dark-2',
+					scrollInertia: 0
+				});
+				render.links('#content');
+			},
+			links: function(selector){
+				$(selector).find('a').each(function(){
+					var href = this.href;
+					if(href.indexOf(location.origin) != -1 && href.indexOf('#') != -1){
+						href = href.substr(href.indexOf('#')+1);
+						$(this).click(function(){
+							loadState(href);
+							return false;
+						});
+					}
+				})
+			}
 		};
 	if(exists($.cookie('key'))){
 		setKey($.cookie('key'));
@@ -120,27 +151,18 @@
 				switch(State.data.type){
 					case 'template':case 'user':
 						apiCall(State.data,function(d){
-							if(!exists(d.context.key)&&Key!==null){
-								console.log('Context detected logout');
-								setKey(null);
-							}
-							$('#content').html(Handlebars.compile(d.template)(d.context)).mCustomScrollbar('destroy');
-							$('#content,.scroll').mCustomScrollbar({
-								theme: 'dark-2',
-								scrollInertia: 0
-							});
-							$('#content').find('a').each(function(){
-								var href = this.href;
-								if(href.indexOf(location.origin) != -1 && href.indexOf('#') != -1){
-									href = href.substr(href.indexOf('#')+1);
-									console.log('Setting up link to '+href);
-									$(this).click(function(){
-										loadState(href);
-										return false;
-									});
+							if(exists(d.context)){
+								if(!exists(d.context.key)&&Key!==null){
+									console.log('Context detected logout');
+									setKey(null);
 								}
-							});
-							$('#loading').hide();
+								render.topbar(d.topbar.template,d.topbar.context);
+								render.content(d.template,d.context);
+								$('#loading').hide();
+							}else{
+								console.error('No context given');
+								History.back();
+							}
 						});
 					break;
 					case 'action':break;
@@ -179,7 +201,6 @@
 						data: ''
 					};
 				}
-				$(window).trigger('statechange');
 			});
 		},'json');
 	});

php/functions.php

@@ -2,11 +2,10 @@
 	require_once(realpath(dirname(__FILE__)).'/config.php');
 	// TODO - create php functions for the api
 	function retj($json,$title=null){
-		if(is_null($title)){
-			$title = $_GET['id'];
-		}
+		global $LOGGEDIN;
 		$type=$_GET['type'];
 		$id=$_GET['id'];
+		// State
 		if(!isset($json['state'])){
 			$json['state'] = Array();
 		}
@@ -21,7 +20,12 @@
 				}
 			}
 		}
+		// Title
+		if(is_null($title)){
+			$title = $_GET['id'];
+		}
 		$json['state']['title'] = $title;
+		// URL
 		switch($type){
 			case 'user':$url='~'.$id;break;
 			case 'group':$url='+'.$id;break;
@@ -31,6 +35,21 @@
 			default:$url=$type.'-'.$id;
 		}
 		$json['state']['url'] = $url;
+		// Tobar
+		if($LOGGEDIN){
+			$context = Array(
+				'user'=>userObj($_SESSION['username']),
+				'key'=>true
+			);
+		}else{
+			$context = Array();
+		}
+		$context['title'] = $title;
+		$context['url'] = $url;
+		$json['topbar'] = Array(
+			'template'=>file_get_contents(PATH_DATA.'pages/topbar.template'),
+			'context'=>$context
+		);
 		die(json_encode($json));
 	}
 ?>