Dev

ui/.env

@@ -0,0 +1,11 @@
+REACT_APP_DB_IP=10.5.110.11
+REACT_APP_DB_PORT=8081
+REACT_APP_KIBANA_IP=10.5.110.1
+REACT_APP_KIBANA_PORT=5601
+REACT_APP_HEALTHCHECK_IP=10.5.110.11
+REACT_APP_HEALTHCHECK_PORT=8083
+REACT_APP_LOGICCORE_IP=10.5.110.11
+REACT_APP_LOGICCORE_PORT=8081
+REACT_APP_ALARM_IP=0.0.0.0
+REACT_APP_ALARM_PORT=8080
+REACT_APP_KAKAO_MAP_KEY=21ac78abd39b1baa196594d8611e392d

ui/src/App.tsx

@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route } from 'react-router-dom';
 import Nav from './Navigation';
 import SensorManagement from './ManagementComponents/SensorManagement';
 import NodeManagement from './ManagementComponents/NodeManagement';
+import ActuatorManagement from './ManagementComponents/ActuatorManagement';
 import Dashboard from './KibanaDashboard';
 import Visualize from './KibanaVisualize';
 import Main from './Home';
@@ -28,6 +29,7 @@ class App extends Component {
 						<div className="container pt-4 mt-4">
 							<Route exact path="/" render={Main} />
 							<Route path="/sensor" component={SensorManagement} />
+							<Route path="/actuator" component={ActuatorManagement} />
 							<Route path="/node" component={NodeManagement} />
 							<Route path="/sink" component={SinkManagement} />
 							<Route path="/topic" component={TopicManagement} />

ui/src/ElemInterface/ElementsInterface.tsx

@@ -28,6 +28,11 @@ export interface value_list_elem {
 	index: number;
 }
 
+export interface actuatorListElem {
+	id: number;
+	name: string;
+}
+
 // sinkList interface
 export interface sinkListElem {
 	id: number;
@@ -86,8 +91,9 @@ export interface topicOptionsElem {
 
 // node health check
 export interface nodeHealthCheckElem {
-	n_id: number;
+	nid: number;
 	state: number;
+	battery: number;
 }
 
 // alarm

ui/src/ElemInterface/LcElementsInterface.tsx

@@ -10,9 +10,14 @@ export interface timeRange {
 	end: string;
 }
 
+export interface control {
+	value: number;
+	sleep: number;
+}
+
 export interface logicElem {
 	elem: string;
-	arg: lcValueArg | lcTimeArg | lcGroupArg | lcActionArg;
+	arg: lcValueArg | lcTimeArg | lcGroupArg | lcActionArg | lcActuator;
 }
 
 export interface lcValueArg {
@@ -32,6 +37,11 @@ export interface lcActionArg {
 	text: string;
 }
 
+export interface lcActuator {
+	aid: number;
+	motion: Array<control>;
+}
+
 export interface logicListElem {
 	id: string; // request: undefined, receive: number
 	logic_name: string;

ui/src/LogicCoreComponents/InputCards/InputActionCard.tsx

@@ -1,6 +1,8 @@
+import { type } from 'jquery';
 import React, { Component } from 'react';
 import Select from 'react-select';
-import { logicElem } from '../../ElemInterface/LcElementsInterface';
+import { control, logicElem } from '../../ElemInterface/LcElementsInterface';
+import InputActuatorCard from './InputActuatorCard';
 import '../LogicCore.css';
 
 interface InputActionCardProps {
@@ -11,10 +13,11 @@ interface InputActionCardProps {
 
 interface InputActionCardState {
 	elem: string;
-	arg: {
+	arg: { 
 		text: string;
 	};
 }
+
 interface actionOptionsElem {
 	label: string;
 	value: string;
@@ -31,22 +34,24 @@ class InputActionCard extends Component<
 	state: InputActionCardState = {
 		elem: '',
 		arg: { text: '' },
-	};
+	}
 
 	// Handle action change (select alarm or email)
 	handleActionChange = async (e: any) => {
-		// Change this state and then..
 		await this.setState({
 			elem: e.value,
 		});
+		console.log(this.state.elem + '!!!!!@@#@####!@#!');
 		// change parent's state
 		this.props.handleInputActionCardChange(this.state);
 	};
 
 	// Handle text change by typing
 	handleTextChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
 		await this.setState({
-			arg: { text: e.target.value },
+			arg: { 
+				text: e.target.value, 
+			},
 		});
 		this.props.handleInputActionCardChange(this.state);
 	};
@@ -55,7 +60,9 @@ class InputActionCard extends Component<
 		let actionOptions: Array<actionOptionsElem> = [
 			{ label: 'alarm', value: 'alarm' },
 			{ label: 'email', value: 'email' },
+			{ label: 'actuator', value: 'actuator'},
 		];
+
 		return (
 			<div className="card form-group">
 				<div className="card-body row">
@@ -94,9 +101,9 @@ class InputActionCard extends Component<
 					</div>
 
 					<div className="col-1"></div>
-					<div className="col-5">
+						{/*<div className="col-4">*/}
 						{this.state.elem === 'alarm' ? ( // If user select alarm
-							<div>
+							<div className="col-5">
 								<span>Alarm MSG</span>
 								<input
 									type="text"
@@ -106,9 +113,9 @@ class InputActionCard extends Component<
 									placeholder="Enter alarm msg which you want to get alert"
 									onChange={this.handleTextChange}
 								/>
-							</div>
+							</div>	
 						) : this.state.elem === 'email' ? ( // If user select email
-							<div>
+							<div className="col-5">
 								<span>Email address</span>
 								<input
 									type="email"
@@ -123,12 +130,16 @@ class InputActionCard extends Component<
 									We'll send message to this e-mail.
 								</small>
 							</div>
+						) : this.state.elem === 'actuator' ? (
+							<InputActuatorCard
+								handleInputActionCardChange = {this.props.handleInputActionCardChange}
+							/>
 						) : (
 							<div></div>
 						)}
 					</div>
 				</div>
-			</div>
+			// </div>
 		);
 	}
 }

ui/src/LogicCoreComponents/InputCards/InputActuatorCard.tsx

@@ -0,0 +1,193 @@
+import { type } from 'jquery';
+import React, { Component } from 'react';
+import Select from 'react-select';
+import { control, logicElem } from '../../ElemInterface/LcElementsInterface';
+import '../LogicCore.css';
+
+interface InputActionCardProps {
+	handleInputActionCardChange: (value: logicElem) => void;
+	//handleRemoveInputActionCardClick: () => void;
+	//index: number;
+}
+
+interface InputActionCardState {
+	elem: string;
+	arg: {
+		aid: number;
+		motion: Array<control>;
+	};
+}
+interface actionOptionsElem {
+	label: string;
+	value: string;
+}
+
+/*
+InputActionCard
+- Get input of action element
+*/
+class InputActionCard extends Component<
+	InputActionCardProps,
+	InputActionCardState
+> {
+	state: InputActionCardState = {
+		elem: 'actuator',
+		arg: {
+			   aid: 0, 
+               motion:[{ value: 0, sleep: 0 }] 
+            },
+	};
+
+	// Handle action change (select alarm or email)
+	handleActionChange = async (e: any) => {
+		// Change this state and then..
+		if (e.value === 'motor') {
+			await this.setState({
+				arg: {
+					aid: 1,
+					motion: this.state.arg.motion,
+				}
+			});
+			console.log(this.state.arg.aid);
+		}
+		else if (e.value === 'switch') {
+			await this.setState({
+				arg: {
+					aid: 2,
+					motion: this.state.arg.motion,
+				}
+			});
+		}
+		this.props.handleInputActionCardChange(this.state);
+	};
+
+	// Handle text change by typing
+	handleTextChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+		await this.setState({
+			arg: { 
+				aid: this.state.arg.aid,
+				motion: this.state.arg.motion,
+			},
+		});
+		this.props.handleInputActionCardChange(this.state);
+	};
+
+	handleControlChange = (idx: number) => async (e:any) => {
+		const new_motion_elem = this.state.arg.motion.map(
+			(motionElem: control, sidx: number) => {
+				if (idx !== sidx) return motionElem;
+				if (e.target.id === 'actuator_value') 
+					return { ...motionElem, value: parseInt(e.target.value) };
+                return { ...motionElem, sleep: parseInt(e.target.value) };
+
+			}
+		);
+
+		await this.setState({
+			arg: { 
+				aid: this.state.arg.aid,
+				motion: new_motion_elem	
+			}
+		});
+
+		this.props.handleInputActionCardChange(this.state);
+	};
+
+	handleAddClick = async () => {
+		await this.setState({
+			arg: {
+				aid: this.state.arg.aid,
+				motion: [...this.state.arg.motion, {value: 0, sleep: 0}],
+			},
+		});
+		this.props.handleInputActionCardChange(this.state);
+	};
+
+	handleRemoveClick = (idx: number) => async () => {
+		await this.setState({
+			arg: {
+				aid: this.state.arg.aid,
+				motion: this.state.arg.motion.filter(
+					(s: any, sidx: number) => idx !== sidx
+				),
+			},
+		});
+		this.props.handleInputActionCardChange(this.state)
+	};
+
+	render() {		
+		let actuatorOptios: Array<actionOptionsElem> = [
+			{ label: 'motor', value: 'motor'},
+			{ label: 'switch', value: 'switch'},
+		]
+		return (
+			<div>							
+				<div className="col">
+					<Select
+						options={actuatorOptios}
+						name="action"
+						classNamePrefix="select"
+						onChange={this.handleActionChange}         
+					/>
+				</div>
+				<div className="col">
+					<button
+						type="button"
+						className="btn float-right"
+						style={{ background: 'pink' }}
+						onClick={this.handleAddClick}
+					>
+						Add scope
+					</button>
+				</div>
+				<div className="col-5">
+					{this.state.arg.motion.map((Control: control, idx: number) => (
+						<div className="input-group mb-2">
+							<span>value</span>
+							<input
+								type="number"
+								className="form-control"
+								id="actuator_value"
+								value={Control.value}
+								placeholder="Enter "
+								onChange={this.handleControlChange(idx)}
+							/>
+							<div className="col-1"></div>
+							<span>sleep</span>
+							<input
+								type="number"
+								className="form-control"
+								id="actuator_sleep"
+								value={Control.sleep}
+								placeholder="Enter "
+								onChange={this.handleControlChange(idx)}
+							/>
+<								button
+								className="btn btn-sm"
+								type="button"
+								id="button-addon2"
+								onClick={this.handleRemoveClick(idx)}
+							>
+								<svg
+									width="1em"
+									height="1em"
+									viewBox="0 0 16 16"
+									className="bi bi-trash-fill"
+									fill="currentColor"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<path
+										fill-rule="evenodd"
+										d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7z"
+									/>
+								</svg>
+							</button>
+						</div>	
+					))}								
+				</div>                                          								
+			</div>
+		);
+	}
+}
+
+export default InputActionCard;

ui/src/LogicCoreComponents/RegisterLogic.tsx

@@ -146,6 +146,7 @@ class RegisterLogic extends Component<{}, RegisterLogicState> {
 	handleActionCardChange = (idx: number) => (selectedAction: logicElem) => {
 		// Action card is updated dynamic. It can be added or removed freely.
 		// so find changing field by using received idx and change state.
+		console.log(selectedAction.elem + "!!!!");
 		const new_selected_action = this.state.selected_action.map(
 			(action: logicElem, sidx: number) => {
 				if (idx !== sidx) return action;
@@ -237,7 +238,9 @@ class RegisterLogic extends Component<{}, RegisterLogicState> {
 			this.state.selected_action
 		);
 
-		// Filter elem: 'empty' field
+		console.log(this.state.selected_action[0] + "!@!@!@!!@@!@");
+
+		// Filter elem: 'empty' fie ld
 		elems = elems.filter(function (logic) {
 			return logic.elem !== 'empty';
 		});