Added basic search.

static/js/node.mjs

@@ -85,6 +85,10 @@ export class NodeUI extends Component {
 			case 'keys':
 				page = html`<${Keys} nodeui=${this} />`
 				break
+
+			case 'search':
+				page = html`<${Search} nodeui=${this} />`
+				break
 		}
 
 		let menu = ''
@@ -124,41 +128,37 @@ export class NodeUI extends Component {
 
 	keyHandler(evt) {//{{{
 		let handled = true
+
+		// All keybindings is Alt+Shift, since the popular browsers at the time (2023) allows to override thees.
+		// Ctrl+S is the exception to using Alt+Shift, since it is overridable and in such widespread use for saving.
+		// Thus, the exception is acceptable to consequent use of alt+shift.
+		if(!(evt.shiftKey && evt.altKey) && !(evt.key.toUpperCase() == 'S' && evt.ctrlKey))
+			return
+
 		switch(evt.key.toUpperCase()) {
 			case 'E':
-				if(evt.shiftKey && evt.altKey)
-					this.showPage('keys')
-				else
-					handled = false
+				this.showPage('keys')
 				break
 
 			case 'N':
-				if(evt.shiftKey && evt.altKey)
-					this.createNode()
-				else
-					handled = false
+				this.createNode()
 				break
 
 			case 'P':
-				if(evt.shiftKey && evt.altKey)
-					this.showPage('node-properties')
-				else
-					handled = false
+				this.showPage('node-properties')
 				break
 
 			case 'S':
-				if(evt.ctrlKey || (evt.shiftKey && evt.altKey))
-					this.saveNode()
-				else
-					handled = false
+				this.saveNode()
 				break
 
-
 			case 'U':
-				if(evt.shiftKey && evt.altKey)
-					this.showPage('upload')
-				else
-					handled = false
+				this.showPage('upload')
+				break
+
+			case 'F':
+				this.showPage('search')
+				break
 
 			default:
 				handled = false
@@ -723,4 +723,69 @@ class NodeProperties extends Component {
 	}//}}}
 }
 
+class Search extends Component {
+	constructor() {//{{{
+		super()
+		this.state = {
+			matches: [],
+			results_returned: false,
+		}
+	}//}}}
+	render({ nodeui }, { matches, results_returned }) {//{{{
+		let match_elements = [
+			html`<h2>Results</h2>`,
+		]
+		let matched_nodes = matches.map(node=>html`
+			<div class="matched-node" onclick=${()=>nodeui.goToNode(node.ID)}>
+				${node.Name}
+			</div>
+		`)
+		match_elements.push(html`<div class="matches">${matched_nodes}</div>`)
+
+		return html`
+			<div id="search">
+				<h1>Search</h1>
+
+				<input type="text" id="search-for" placeholder="Search for" onkeydown=${evt=>this.keyHandler(evt)} />
+				<button onclick=${()=>this.search()}>Search</button>
+
+				${results_returned ? match_elements : ''}
+			</div>`
+	}//}}}
+	componentDidMount() {//{{{
+		document.getElementById('search-for').focus()
+	}//}}}
+
+	keyHandler(evt) {//{{{
+		let handled = true
+
+		switch(evt.key.toUpperCase()) {
+			case 'ENTER':
+				this.search()
+				break
+
+			default:
+				handled = false
+		}
+
+		if(handled) {
+			evt.preventDefault()
+			evt.stopPropagation()
+		}
+	}//}}}
+	search() {//{{{
+		let Search = document.getElementById('search-for').value
+
+		window._app.current.request('/node/search', { Search })
+		.then(res=>{
+			this.setState({
+				matches: res.Nodes,
+				results_returned: true,
+
+			})
+		})
+		.catch(window._app.current.responseError)
+	}//}}}
+}
+
 // vim: foldmethod=marker