More web work

rearranged how web files were loaded a bit

Started on breadcrumb handling

project.go

@@ -185,12 +185,11 @@ func (p *Project) setStage(stage string) {
 }
 
 type webProject struct {
-	ID             string `json:"id"`
-	Name           string `json:"name"`
-	ReleaseVersion string `json:"releaseVersion"` //last successfully released version
-	LastVersion    string `json:"lastVersion"`    //last version success or otherwise
-	LastLog        string `json:"lastLog"`        // last log entry of last cycle
-	Stage          string `json:"stage"`          // current stage
+	ID             string         `json:"id"`
+	Name           string         `json:"name"`
+	ReleaseVersion string         `json:"releaseVersion"` //last successfully released version
+	Stage          string         `json:"stage"`          // current stage
+	LastLog        *datastore.Log `json:"lastLog"`
 }
 
 func (p *Project) webData() (*webProject, error) {
@@ -211,9 +210,8 @@ func (p *Project) webData() (*webProject, error) {
 		Name:           p.Name,
 		ID:             p.id(),
 		ReleaseVersion: release.Version,
-		LastVersion:    last.Version,
-		LastLog:        last.Log,
 		Stage:          p.stage,
+		LastLog:        last,
 	}
 
 	return d, nil

server.go

@@ -103,6 +103,14 @@ func routes() {
 		get: rootGet,
 	})
 
+	webRoot.Handle("/js/", &methodHandler{
+		get: assetGet,
+	})
+
+	webRoot.Handle("/css/", &methodHandler{
+		get: assetGet,
+	})
+
 	webRoot.Handle("/log/", &methodHandler{
 		get: logGet,
 	})
@@ -118,12 +126,11 @@ func routes() {
 }
 
 func rootGet(w http.ResponseWriter, r *http.Request) {
-	if r.URL.Path == "/" {
-		//send index.html
-		serveAsset(w, r, "web/index.html")
-		return
-	}
+	//send index.html
+	serveAsset(w, r, "web/index.html")
+}
 
+func assetGet(w http.ResponseWriter, r *http.Request) {
 	serveAsset(w, r, path.Join("web", r.URL.Path))
 }
 

web/index.html

@@ -39,10 +39,7 @@
 		.table-responsive {
 			margin-left: auto;
 			margin-right: auto;
-
 			overflow-x: auto;
-			-webkit-overflow-scrolling: touch;
-			margin-bottom: 1em;
 		}
 
 		.table-responsive table {
@@ -50,7 +47,18 @@
 			max-width: 100%;
 		}
 
+		/* error */
+		.error {
+			display: inline-block;
+			background-color: red;
+			color: white;
+			border-radius: 4px;
+			padding: .5em 1em;
+			margin: 10px;
+		}
+
 		/*stages*/
+
 		.stage-load {
 
 		}
@@ -70,6 +78,18 @@
 		.stage-release {
 
 		}
+
+		/* breadcrumbs */
+
+		#breadcrumbs {
+			margin-bottom: 10px;
+		}
+
+		.breadcrumb-separator {
+			color: #ccc;
+			font-weight: bold;
+			font-size: 2em;
+		}
 	
 	</style>
 </head>
@@ -77,12 +97,51 @@
 <script id="tMain" type="text/ractive">
 <div class="container pure-g">
 	<div class="pure-u-1">
-		<h3 class="text-center">Iron Smith Project List</h3>
+		<h3 class="text-center">Iron Smith</h3>
+		{{#if error}}
+			<div class="text-center">
+				<span class="error">{{error}}</span>
+			</div>
+		{{/if}}
+		<div id="breadcrumbs" class="pure-menu pure-menu-horizontal text-center">
+			<ul class="pure-menu-list">
+				<li class="pure-menu-item">
+					<a href="/" class="pure-menu-link">Project List</a>
+				</li>
+				{{#if project}}
+					<li class="pure-menu-item">
+						<span class="breadcrumb-separator">/</span>
+					</li>
+					<li class="pure-menu-item">
+						<a href="/project/{{project.id}}" class="pure-menu-link">{{project.name}}</a>
+					</li>
+				{{/if}}
+				{{#if project && version}}
+					<li class="pure-menu-item">
+						<span class="breadcrumb-separator">/</span>
+					</li>
+					<li class="pure-menu-item">
+						<a href="/project/{{project.id}}/{{version}}" class="pure-menu-link">{{version}}</a>
+					</li>
+				{{/if}}
+				{{#if project && version && stage}}
+					<li class="pure-menu-item">
+						<span class="breadcrumb-separator">/</span>
+					</li>
+					<li class="pure-menu-item">
+						<a href="/project/{{project.id}}/{{version}}/{{stage}}" class="pure-menu-link">{{stage}}</a>
+					</li>
+				{{/if}}
+			</ul>
+		</div>
 		{{#if !project}}
 			{{>projects}}
 		{{elseif !version}}
+			{{>project}}
 		{{elseif !stage}}
+			{{>version}}
 		{{else}}
+			{{>stage}}
 		{{/if}}
 	</div>
 </div>
@@ -104,18 +163,28 @@
 	<tbody>
 		{{#projects:i}}	
 			<tr>
-				<td>{{.name}}</td>
+				<td><a href="/project/{{.id}}/">{{.name}}</a></td>
 				<td>{{.status}}</td>
 				<td>{{.stage}}</td>
 				<td>{{.releaseVersion}}</td>
-				<td>{{.lastVersion}}</td>
-				<td title="{{.lastLog}}">{{.lastLog.substring(0,100) + " ..."}}</td>
+				<td>{{.lastLog.version}}</td>
+				<td title="{{.lastLog.log}}">{{#if .lastLog.log}}{{.lastLog.log.substring(0,100) + " ..."}}{{/if}}</td>
 			</tr>
 		{{/projects}}
 	</tbody>
 </table>
 </div>
 {{/partial}}
+
+{{#partial project}}
+{{/partial}}
+
+{{#partial version}}
+{{/partial}}
+
+{{#partial stage}}
+
+{{/partial}}
 	
 </script>
 <script src="/js/ractive.min.js"></script>

web/js/index.js

@@ -15,23 +15,92 @@
                 version: null,
                 stage: null,
                 projects: [],
+                error: null,
             };
         },
     });
 
-    getProjects();
+    setPaths();
+
+
+    function setPaths() {
+        var paths = window.location.pathname.split("/");
+
+        if (paths.length <= 1) {
+            getProjects();
+            return;
+        }
+        if (!paths[1]) {
+            getProjects();
+            return;
+        }
+
+        if (paths[1] == "project") {
+            if (paths[2]) {
+                getProject(paths[2]);
+                if (paths[3]) {
+                    r.set("version", paths[3]);
+                    if (paths[4]) {
+                        r.set("stage", paths[4]);
+                        //get stage
+                    }
+                    //get version
+                }
+
+            }
+            getProjects();
+            return;
+        }
+
+        r.set("error", "Path Not found!");
+    }
 
 
     function getProjects() {
         get("/log/",
             function(result) {
+                for (var i = 0; i < result.data.length; i++) {
+                    setStatus(result.data[i]);
+                }
+
                 r.set("projects", result.data);
             },
             function(result) {
-                console.log("error", result);
+                r.set("error", err(result).message);
             });
     }
 
+    function getProject(id) {
+        get("/log/" + id,
+            function(result) {
+                r.set("project", result.data);
+            },
+            function(result) {
+                r.set("error", err(result).message);
+            });
+    }
+
+    function setStatus(project) {
+        //statuses 
+        if (project.lastLog.version == project.releaseVersion) {
+            project.status = "Success";
+        } else {
+            if (project.lastLog.stage == "loading") {
+                project.status = "Load Failing";
+            } else if (project.lastLog.stage == "fetching") {
+                project.status = "Fetch Failing";
+            } else if (project.lastLog.stage == "building") {
+                project.status = "Build Failing";
+            } else if (project.lastLog.stage == "testing") {
+                project.status = "Tests Failing";
+            } else if (project.lastLog.stage == "releasing") {
+                project.status = "Release Failing";
+            } else {
+                project.status = "Failing";
+            }
+        }
+    }
+
 })();
 
 function ajax(type, url, data, success, error) {
@@ -72,3 +141,14 @@ function get(url, success, error) {
     ajax("GET", url, null, success, error);
 }
 
+function err(response) {
+    "use strict";
+    var error = {
+        message: "An error occurred and has been logged",
+    };
+
+    if (typeof response === "string") {
+        error.message = response;
+    }
+    return error;
+}