浏览代码

Initial work

jamesread 5 年之前
父节点
当前提交
1a8426a71d
共有 6 个文件被更改,包括 98 次插入5 次删除
  1. 1 1
      Makefile
  2. 17 0
      OliveTin.proto
  3. 19 2
      webui/index.html
  4. 8 0
      webui/js/ActionButton.js
  5. 16 0
      webui/main.js
  6. 37 2
      webui/style.css

+ 1 - 1
Makefile

@@ -23,7 +23,7 @@ daemon-unittests:
 	go tool cover -html=reports/unittests.out -o reports/unittests.html
 	go tool cover -html=reports/unittests.out -o reports/unittests.html
 
 
 grpc:
 grpc:
-	protoc -I.:$(GOPATH)/src/github.com/grpc-ecosystem/grpc-gateway/third_party/googleapis/ --go_out=. --go-grpc_out=. --grpc-gateway_out=. OliveTin.proto 
+	protoc -I.:/home/xconspirisist/sandbox/go/pkg/mod/github.com/grpc-ecosystem/grpc-gateway@v1.16.0/third_party/googleapis/ --go_out=. --go-grpc_out=. --grpc-gateway_out=. OliveTin.proto 
 
 
 podman-image:
 podman-image:
 	buildah bud -t olivetin
 	buildah bud -t olivetin

+ 17 - 0
OliveTin.proto

@@ -27,6 +27,17 @@ message StartActionResponse {
 	int32 exitCode = 4;
 	int32 exitCode = 4;
 }
 }
 
 
+message GetLogsRequest{};
+
+message LogEntry {
+	string datetime = 1;
+	string content = 2;
+}
+
+message GetLogsResponse {
+	repeated LogEntry logs = 1;
+}
+
 service OliveTinApi {
 service OliveTinApi {
 	rpc GetButtons(GetButtonsRequest) returns (GetButtonsResponse) {
 	rpc GetButtons(GetButtonsRequest) returns (GetButtonsResponse) {
 		option (google.api.http) = {
 		option (google.api.http) = {
@@ -40,4 +51,10 @@ service OliveTinApi {
 		};
 		};
 	}
 	}
 
 
+	rpc GetLogs(GetLogsRequst) returns (GetLogsResponse) {
+		option (google.api.http) = {
+			get: "/api/GetLogs"
+		}
+	}
+
 }
 }

+ 19 - 2
webui/index.html

@@ -12,9 +12,26 @@
 
 
 	<body>
 	<body>
 		<main title = "main content">
 		<main title = "main content">
-			<fieldset id = "rootGroup">
-				<legend>OliveTin Actions</legend>
+			<fieldset id = "switcher">
+				<button id = "showActions">Actions</button>
+				<button id = "showLogs">Logs</button>
 			</fieldset>
 			</fieldset>
+
+			<section id = "contentLogs" title = "Logs" hidden>
+				<table>
+					<tr>
+						<td>12 seconds ago</td> <td>blat blat <button>Logs</button></td>
+					</tr>
+					<tr>
+						<td>4 seconds ago</td> <td>blat blat foo foo <button>Logs</button></td>
+					</tr>
+				</table>
+			</section>
+
+			<section id = "contentActions" title = "Actions" hidden >
+				<fieldset id = "rootGroup">
+				</fieldset>
+			</section>
 		</main>
 		</main>
 		<footer title = "footer">
 		<footer title = "footer">
 			<p><img title = "application icon" src = "OliveTinLogo.png" height = "1em" class = "logo" /> <a href = "http://github.com/jamesread/OliveTin" target = "_new">OliveTin</a></p>
 			<p><img title = "application icon" src = "OliveTinLogo.png" height = "1em" class = "logo" /> <a href = "http://github.com/jamesread/OliveTin" target = "_new">OliveTin</a></p>

+ 8 - 0
webui/js/ActionButton.js

@@ -44,6 +44,10 @@ class ActionButton extends window.HTMLButtonElement {
     this.temporaryStatusMessage = '[ ' + temporaryStatusMessage + ' ]'
     this.temporaryStatusMessage = '[ ' + temporaryStatusMessage + ' ]'
     this.updateHtml()
     this.updateHtml()
     this.classList.add(cssClass)
     this.classList.add(cssClass)
+
+    setTimeout(() => {
+      this.classList.remove(cssClass)
+    }, 1000);
   }
   }
 
 
   onActionError (err) {
   onActionError (err) {
@@ -52,6 +56,10 @@ class ActionButton extends window.HTMLButtonElement {
     this.isWaiting = false
     this.isWaiting = false
     this.updateHtml()
     this.updateHtml()
     this.classList.add('actionFailed')
     this.classList.add('actionFailed')
+
+    setTimeout(() => {
+      this.classList.remove('actionFailed')
+    }, 1000);
   }
   }
 
 
   constructTemplate () {
   constructTemplate () {

+ 16 - 0
webui/main.js

@@ -12,7 +12,23 @@ function showBigError (type, friendlyType, message) {
   document.getElementById('rootGroup').appendChild(domErr)
   document.getElementById('rootGroup').appendChild(domErr)
 }
 }
 
 
+function showSection (name) {
+  for (let otherName of ["Actions", "Logs"]) {
+    document.getElementById('show' + otherName).classList.remove('activeSection');
+    document.getElementById('content' + otherName).hidden = true;
+  }
+
+  document.getElementById('show' + name).classList.add('activeSection')
+  document.getElementById('content' + name).hidden = false;
+}
+
+
 function onInitialLoad (res) {
 function onInitialLoad (res) {
+  document.getElementById('showActions').onclick = () => { showSection('Actions') };
+  document.getElementById('showLogs').onclick = () => { showSection('Logs') }
+
+  showSection('Actions');
+
   window.restBaseUrl = res.Rest
   window.restBaseUrl = res.Rest
 
 
   window.fetch(window.restBaseUrl + 'GetButtons', {
   window.fetch(window.restBaseUrl + 'GetButtons', {

+ 37 - 2
webui/style.css

@@ -7,16 +7,47 @@ body {
   margin: 0;
   margin: 0;
 }
 }
 
 
-fieldset {
+fieldset { 
+  padding: 0;
+}
+
+fieldset#rootGroup {
   display: grid;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
   grid-template-rows: auto auto auto auto;
   grid-template-rows: auto auto auto auto;
-  padding: 1em;
   grid-gap: 1em;
   grid-gap: 1em;
   text-align: center;
   text-align: center;
   border: 0;
   border: 0;
 }
 }
 
 
+fieldset#switcher {
+	border: 0; 
+	text-align: right;
+	margin-bottom: 1em;
+}
+
+fieldset#switcher button:first-child{
+	border-radius: 1em 0em 0em 1em;
+}
+
+fieldset#switcher button:last-child{
+	border-radius: 0 1em 1em 0;
+}
+
+table {
+	background-color: white;
+	border-collapse: collapse;
+}
+
+td {
+	border: 1px solid #efefef;
+}
+
+button.activeSection {
+	font-weight: bold;
+}
+
+
 legend {
 legend {
   padding-top: 1em;
   padding-top: 1em;
 }
 }
@@ -154,3 +185,7 @@ img.logo {
     background-color: black;
     background-color: black;
   }
   }
 }
 }
+
+main {
+	padding: 1em;
+}