Inicio Explorar Ayuda
Iniciar sesión
LBP
/
OliveTin
espejo de https://github.com/OliveTin/OliveTin.git
4
0
Fork 0
Archivos Incidencias 0 Wiki
Explorar el Código

#17 Fixing UI after change to Autonomous Custom Elements

jamesread hace 4 años
padre
fd04922e59
commit
1b94e29721
Se han modificado 5 ficheros con 49 adiciones y 64 borrados
Unificar vista Mostrar estadísticas de diff
  1. 3 3
      webui/index.html
  2. 10 19
      webui/js/ActionButton.js
  3. 2 2
      webui/js/marshaller.js
  4. 6 6
      webui/main.js
  5. 28 34
      webui/style.css

+ 3 - 3
webui/index.html
Ver fichero 

@@ -12,7 +12,7 @@
 
 
 
 	<body>
 
 	<body>
 
 		<main title = "main content">
 
 		<main title = "main content">
 
-			<fieldset id = "switcher">
 
+			<fieldset id = "sectionSwitcher">
 
 				<button id = "showActions">Actions</button>
 
 				<button id = "showActions">Actions</button>
 
 				<button id = "showLogs">Logs</button>
 
 				<button id = "showLogs">Logs</button>
 
 			</fieldset>
 
 			</fieldset>
 
@@ -51,7 +51,7 @@
 
 		</footer>
 
 		</footer>
 
 
 
 		<template id = "tplArgumentForm">
 
 		<template id = "tplArgumentForm">
 
-			<form>
 
+			<form class = "actionArguments">
 
 				<div class = "wrapper">
 
 				<div class = "wrapper">
 
 					<div>
 
 					<div>
 
 						<span class = "icon" role = "icon"></span>
 
 						<span class = "icon" role = "icon"></span>
 
@@ -70,7 +70,7 @@
 
 
 
 		<template id = "tplActionButton">
 
 		<template id = "tplActionButton">
 
 			<button>
 
 			<button>
 
-				<span role = "img" title = "button icon" class = "icon">&#x1f4a9;</span>
 
+				<span role = "icon" title = "button icon" class = "icon">&#x1f4a9;</span>
 
 				<p role = "title" class = "title">Untitled Button</p>
 
 				<p role = "title" class = "title">Untitled Button</p>
 
 			</button>
 
 			</button>
 
 		</template>
 
 		</template>

+ 10 - 19
webui/js/ActionButton.js
Ver fichero 

@@ -7,21 +7,19 @@ class ActionButton extends window.HTMLElement {
 
 
 
     this.constructDomFromTemplate()
 
     this.constructDomFromTemplate()
 
 
 
-    // DOM Attributes
 
-    this.btn.title = json.title
 
-    this.btn.onclick = () => { this.startAction() }
 
-    
     // Class attributes
 
     // Class attributes
 
-    this.actionCallUrl = window.restBaseUrl + 'StartAction?actionName=' + json.title
 
     this.temporaryStatusMessage = null
 
     this.temporaryStatusMessage = null
 
     this.isWaiting = false
 
     this.isWaiting = false
 
     this.actionCallUrl = window.restBaseUrl + 'StartAction'
 
     this.actionCallUrl = window.restBaseUrl + 'StartAction'
 
 
 
     this.updateFromJson(json)
 
     this.updateFromJson(json)
 
 
 
-    this.onclick = () => {
 
+    // DOM Attributes
 
+    this.btn.title = json.title
 
+    this.btn.onclick = () => {
 
+      console.log(json.arguments)
 
       if (json.arguments.length > 0) {
 
       if (json.arguments.length > 0) {
 
-        const frm = document.createElement('form', { is: 'argument-form' })
 
+        const frm = document.createElement('argument-form')
 
         frm.setup(json, (args) => {
 
         frm.setup(json, (args) => {
 
           this.startAction(args)
 
           this.startAction(args)
 
         })
 
         })
 
@@ -32,15 +30,9 @@ class ActionButton extends window.HTMLElement {
 
       }
 
       }
 
     }
 
     }
 
 
 
-    this.constructTemplate()
 
-
 
-    this.updateHtml()
 
-=======
 
-
 
     this.updateFromJson(json)
 
     this.updateFromJson(json)
 
 
 
     this.updateDom()
 
     this.updateDom()
 
->>>>>>> 40cfb1f (progress so far)
 
 
 
     this.setAttribute('id', 'actionButton_' + json.id)
 
     this.setAttribute('id', 'actionButton_' + json.id)
 
   }
 
   }
 
@@ -70,7 +62,7 @@ class ActionButton extends window.HTMLElement {
 
     }
 
     }
 
 
 
     const startActionArgs = {
 
     const startActionArgs = {
 
-      actionName: this.title,
 
+      actionName: this.btn.title,
 
       arguments: actionArgs
 
       arguments: actionArgs
 
     }
 
     }
 
 
 
@@ -105,17 +97,18 @@ class ActionButton extends window.HTMLElement {
 
   }
 
   }
 
 
 
   onActionResult (cssClass, temporaryStatusMessage) {
 
   onActionResult (cssClass, temporaryStatusMessage) {
 
+    this.btn.disabled = false
 
     this.temporaryStatusMessage = '[ ' + temporaryStatusMessage + ' ]'
 
     this.temporaryStatusMessage = '[ ' + temporaryStatusMessage + ' ]'
 
     this.updateDom()
 
     this.updateDom()
 
     this.btn.classList.add(cssClass)
 
     this.btn.classList.add(cssClass)
 
 
 
     setTimeout(() => {
 
     setTimeout(() => {
 
       this.btn.classList.remove(cssClass)
 
       this.btn.classList.remove(cssClass)
 
-    }, 1000);
 
+    }, 1000)
 
   }
 
   }
 
 
 
   onActionError (err) {
 
   onActionError (err) {
 
-    console.log('callback error', err)
 
+    console.error('callback error', err)
 
     this.btn.disabled = false
 
     this.btn.disabled = false
 
     this.isWaiting = false
 
     this.isWaiting = false
 
     this.updateDom()
 
     this.updateDom()
 
@@ -123,7 +116,7 @@ class ActionButton extends window.HTMLElement {
 
 
 
     setTimeout(() => {
 
     setTimeout(() => {
 
       this.btn.classList.remove('actionFailed')
 
       this.btn.classList.remove('actionFailed')
 
-    }, 1000);
 
+    }, 1000)
 
   }
 
   }
 
 
 
   constructDomFromTemplate () {
 
   constructDomFromTemplate () {
 
@@ -143,8 +136,6 @@ class ActionButton extends window.HTMLElement {
 
   }
 
   }
 
 
 
   updateDom () {
 
   updateDom () {
 
-    console.log(this.querySelector("button"))
 
-
 
     if (this.temporaryStatusMessage != null) {
 
     if (this.temporaryStatusMessage != null) {
 
       this.domTitle.innerText = this.temporaryStatusMessage
 
       this.domTitle.innerText = this.temporaryStatusMessage
 
       this.domTitle.classList.add('temporaryStatusMessage')
 
       this.domTitle.classList.add('temporaryStatusMessage')

+ 2 - 2
webui/js/marshaller.js
Ver fichero 

@@ -21,8 +21,8 @@ export function marshalActionButtonsJsonToHtml (json) {
 
 
 
   // Remove existing, but stale buttons (that were not updated in this round)
 
   // Remove existing, but stale buttons (that were not updated in this round)
 
   for (const existingButton of document.querySelector('#contentActions').querySelectorAll('action-button')) {
 
   for (const existingButton of document.querySelector('#contentActions').querySelectorAll('action-button')) {
 
-    if (existingButton.updateIterationTimestamp != currentIterationTimestamp) {
 
-      existingButton.remove();
 
+    if (existingButton.updateIterationTimestamp !== currentIterationTimestamp) {
 
+      existingButton.remove()
 
     }
 
     }
 
   }
 
   }
 
 }
 
 }

+ 6 - 6
webui/main.js
Ver fichero 

@@ -27,7 +27,7 @@ function fetchGetDashboardComponents () {
 
   }).then(res => {
 
   }).then(res => {
 
     marshalActionButtonsJsonToHtml(res)
 
     marshalActionButtonsJsonToHtml(res)
 
   }).catch(err => {
 
   }).catch(err => {
 
-    showBigError('fetch-buttons', 'getting buttons', err, 'blat')
 
+    window.showBigError('fetch-buttons', 'getting buttons', err, 'blat')
 
   })
 
   })
 
 }
 
 }
 
 
 
@@ -39,7 +39,7 @@ function fetchGetLogs () {
 
   }).then(res => {
 
   }).then(res => {
 
     marshalLogsJsonToHtml(res)
 
     marshalLogsJsonToHtml(res)
 
   }).catch(err => {
 
   }).catch(err => {
 
-    showBigError('fetch-buttons', 'getting buttons', err, 'blat')
 
+    window.showBigError('fetch-buttons', 'getting buttons', err, 'blat')
 
   })
 
   })
 
 }
 
 }
 
 
 
@@ -62,10 +62,10 @@ function processWebuiSettingsJson (settings) {
 
     document.querySelector('#availableVersion').hidden = false
 
     document.querySelector('#availableVersion').hidden = false
 
   }
 
   }
 
 
 
-  document.querySelector('#switcher').hidden = settings.HideNavigation
 
+  document.querySelector('#sectionSwitcher').hidden = settings.HideNavigation
 
 }
 
 }
 
 
 
-function main() {
 
+function main () {
 
   setupSections()
 
   setupSections()
 
 
 
   window.fetch('webUiSettings.json').then(res => {
 
   window.fetch('webUiSettings.json').then(res => {
 
@@ -78,8 +78,8 @@ function main() {
 
 
 
     window.buttonInterval = setInterval(fetchGetDashboardComponents, 3000)
 
     window.buttonInterval = setInterval(fetchGetDashboardComponents, 3000)
 
   }).catch(err => {
 
   }).catch(err => {
 
-    showBigError('fetch-webui-settings', 'getting webui settings', err)
 
+    window.showBigError('fetch-webui-settings', 'getting webui settings', err)
 
   })
 
   })
 
 }
 
 }
 
 
 
-main(); // call self
 
+main() // call self

+ 28 - 34
webui/style.css
Ver fichero 

@@ -20,33 +20,6 @@ fieldset#rootGroup {
 
   border: 0;
 
   border: 0;
 
 }
 
 }
 
 
 
-fieldset#switcher {
 
-	border: 0; 
-	text-align: right;
 
-	margin-bottom: 1em;
 
-}
 
-
 
-fieldset#switcher button {
 
-	padding: 1em;
 
-	color: black;
 
-	display: table-cell;
 
-	text-align: center;
 
-	border: 1px solid #999;
 
-	background-color: white;
 
-	box-shadow: 0 0 6px 0 #aaa;
 
-	user-select: none;
 
-	background-color: white;
 
-	cursor: pointer;
 
-}
 
-
 
-fieldset#switcher button:first-child{
 
-	border-radius: 1em 0em 0em 1em;
 
-}
 
-
 
-fieldset#switcher button:last-child{
 
-	border-radius: 0 1em 1em 0;
 
-}
 
-
 
 table {
 
 table {
 
   background-color: white;
 
   background-color: white;
 
   border-collapse: collapse;
 
   border-collapse: collapse;
 
@@ -69,10 +42,6 @@ tr:hover td {
 
   background-color: beige;
 
   background-color: beige;
 
 }
 
 }
 
 
 
-button.activeSection {
 
-  font-weight: bold;
 
-}
 
-
 
 legend {
 
 legend {
 
   padding-top: 1em;
 
   padding-top: 1em;
 
 }
 
 }
 
@@ -117,6 +86,8 @@ div.entity h2 {
 
   grid-column: 1 / span all;
 
   grid-column: 1 / span all;
 
 }
 
 }
 
 
 
+/* Buttons */
 
+
 
 button,
 
 button,
 
 input[type="submit"] {
 
 input[type="submit"] {
 
   padding: 1em;
 
   padding: 1em;
 
@@ -146,20 +117,43 @@ input[type="submit"]:disabled {
 
   cursor: not-allowed;
 
   cursor: not-allowed;
 
 }
 
 }
 
 
 
-fieldset#switcher {
 
+fieldset#sectionSwitcher {
 
   border: 0;
 
   border: 0;
 
   text-align: right;
 
   text-align: right;
 
   margin-bottom: 1em;
 
   margin-bottom: 1em;
 
 }
 
 }
 
 
 
-fieldset#switcher button:first-child {
 
+fieldset#sectionSwitcher button {
 
+  padding: 1em;
 
+  color: black;
 
+  display: table-cell;
 
+  text-align: center;
 
+  border: 1px solid #999;
 
+  background-color: white;
 
+  box-shadow: 0 0 6px 0 #aaa;
 
+  user-select: none;
 
+  cursor: pointer;
 
+}
 
+
 
+fieldset#rootGroup action-button button {
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+
 
+fieldset#sectionSwitcher button:first-child {
 
   border-radius: 1em 0 0 1em;
 
   border-radius: 1em 0 0 1em;
 
 }
 
 }
 
 
 
-fieldset#switcher button:last-child {
 
+fieldset#sectionSwitcher button:last-child {
 
   border-radius: 0 1em 1em 0;
 
   border-radius: 0 1em 1em 0;
 
 }
 
 }
 
 
 
+button.activeSection {
 
+  font-weight: bold;
 
+}
 
+
 
+/* Button animations */
 
+
 
 .actionFailed {
 
 .actionFailed {
 
   animation: kfActionFailed 1s;
 
   animation: kfActionFailed 1s;
 
 }
 
 }