Clipper: Display server status in popup

Clipper/joplin-webclipper/popup/src/App.css

@@ -18,6 +18,10 @@
 	font-weight: normal;
 }
 
+.App a {
+	color: #5A95C7;
+}
+
 .App .Disabled {
 	opacity: .5;
 }
@@ -62,7 +66,7 @@
 	min-height: 0;
 	flex: 1;
 	align-items: stretch;
-	margin: 0 10px 10px 10px;
+	margin: 0 10px 0 10px;
 	display: flex;
 	flex-direction: column;
 	/*border: 2px solid red;*/
@@ -85,20 +89,41 @@
 }
 
 .App .Preview .Body {
-	/*flex: 1;*/
 	font-size: .5em;
 	overflow-x: hidden;
 	overflow-y: scroll;
 	overflow-wrap: break-word;
 	background-color: #ffffff;
-	/*flex-shrink: 1;*/
-	/*min-width: auto;*/
-	/*padding: 10px;*/
-	/*margin-bottom: 10px;*/
 	width: 100%;
 	height: 100%;
 }
 
 .App .Preview .Confirm {
 	flex: 0;
+}
+
+.App .StatusBar {
+	color: #5A95C7;
+	font-size: .7em;
+	display: flex;
+	flex: 0;
+	flex-direction: 'row';
+	align-items: center;
+	min-height: 31px;
+	padding: 0px 10px 5px 10px;
+}
+
+.App .StatusBar .Led {
+	display: flex;
+	flex: 0;
+}
+
+.App .StatusBar .ServerStatus {
+	display: flex;
+	flex: 1;
+	margin-left: 5px;
+}
+
+.App .StatusBar .ServerStatus .Help {
+	margin-left: 5px;
 }

Clipper/joplin-webclipper/popup/src/App.js

@@ -1,5 +1,8 @@
 import React, { Component } from 'react';
 import './App.css';
+import led_red from './led_red.png'; // Tell Webpack this JS file uses this image
+import led_green from './led_green.png'; // Tell Webpack this JS file uses this image
+import led_orange from './led_orange.png'; // Tell Webpack this JS file uses this image
 
 const { connect } = require('react-redux');
 const { bridge } = require('./bridge');
@@ -38,6 +41,10 @@ class AppComponent extends Component {
 				this.props.dispatch({ type: 'CONTENT_UPLOAD', operation: { uploading: false, success: false, errorMessage: error.message } });
 			}
 		}
+
+		this.clipperServerHelpLink_click = () => {
+			bridge().tabsCreate({ url: 'https://joplin.cozic.net/clipper' });
+		}
 	}
 
 	clipSimplified_click() {
@@ -115,6 +122,33 @@ class AppComponent extends Component {
 			}
 		}
 
+		const clipperStatusComp = () => {
+
+			const stateToString = function(state) {
+				if (state === 'not_found') return 'Not found';
+				return state.charAt(0).toUpperCase() + state.slice(1);
+			} 
+
+			let msg = ''
+			let led = null;
+			let helpLink = null;
+
+			const foundState = this.props.clipperServer.foundState
+			
+			if (foundState === 'found') {
+				msg = "Ready on port " + this.props.clipperServer.port
+				led = led_green
+			} else {
+				msg = stateToString(foundState)
+				led = foundState === 'searching' ? led_orange : led_red
+				if (foundState === 'not_found') helpLink = <a className="Help" onClick={this.clipperServerHelpLink_click} href="#">[Help]</a>
+			}
+
+			msg = "Service status: " + msg
+
+			return <div className="StatusBar"><img className="Led" src={led}/><span className="ServerStatus">{ msg }{ helpLink }</span></div>
+		}		
+
 		return (
 			<div className="App">
 				<div className="Controls">			
@@ -127,6 +161,7 @@ class AppComponent extends Component {
 				{ warningComponent }
 				<h2>Preview:</h2>
 				{ previewComponent }
+				{ clipperStatusComp() }
 			</div>
 		);
 	}
@@ -138,6 +173,7 @@ const mapStateToProps = (state) => {
 		warning: state.warning,
 		clippedContent: state.clippedContent,
 		contentUploadOperation: state.contentUploadOperation,
+		clipperServer: state.clipperServer,
 	};
 };
 

Clipper/joplin-webclipper/popup/src/bridge.js

@@ -53,6 +53,8 @@ class Bridge {
 	}
 
 	async findClipperServerPort() {
+		this.dispatch({ type: 'CLIPPER_SERVER_SET', foundState: 'searching' });
+
 		let state = null;
 		for (let i = 0; i < 10; i++) {
 			state = randomClipperPort(state, this.env());
@@ -65,6 +67,7 @@ class Bridge {
 				if (text.trim() === 'JoplinClipperServer') {
 					this.clipperServerPortStatus_ = 'found';
 					this.clipperServerPort_ = state.port;
+					this.dispatch({ type: 'CLIPPER_SERVER_SET', foundState: 'found', port: state.port });
 					return;
 				}
 			} catch (error) {
@@ -74,6 +77,8 @@ class Bridge {
 
 		this.clipperServerPortStatus_ = 'not_found';
 
+		this.dispatch({ type: 'CLIPPER_SERVER_SET', foundState: 'not_found' });
+
 		return null;
 	}
 
@@ -137,6 +142,16 @@ class Bridge {
 		});
 	}
 
+	async tabsCreate(options) {
+		if (this.browserSupportsPromises_) return this.browser().tabs.create(options);
+		
+		return new Promise((resolve, reject) => {
+			this.browser().tabs.create(options, () => {
+				resolve();
+			});
+		});
+	}
+
 	async sendCommandToActiveTab(command) {
 		const tabs = await this.tabsQuery({ active: true, currentWindow: true });
 		if (!tabs.length) {

Clipper/joplin-webclipper/popup/src/index.js

@@ -11,6 +11,10 @@ const defaultState = {
 	warning: '',
 	clippedContent: null,
 	contentUploadOperation: null,
+	clipperServer: {
+		foundState: 'idle',
+		port: null,
+	},
 };
 
 function reducer(state = defaultState, action) {
@@ -38,6 +42,14 @@ function reducer(state = defaultState, action) {
 		newState = Object.assign({}, state);
 		newState.contentUploadOperation = action.operation;
 
+	} else if (action.type === 'CLIPPER_SERVER_SET') {
+
+		newState = Object.assign({}, state);
+		const clipperServer = Object.assign({}, newState.clipperServer);
+		if ('foundState' in action) clipperServer.foundState = action.foundState;
+		if ('port' in action) clipperServer.port = action.port;
+		newState.clipperServer = clipperServer;
+
 	}
 
 	return newState;