You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@plc4x.apache.org by cd...@apache.org on 2024/01/11 22:02:09 UTC
(plc4x) 02/02: chore: Made the server events reach the frontend slice.
This is an automated email from the ASF dual-hosted git repository.
cdutz pushed a commit to branch feature/new-ui-tool
in repository https://gitbox.apache.org/repos/asf/plc4x.git
commit 22695fcaf6393e06abe45614f9e1f24f57d4d832
Author: Christofer Dutz <cd...@apache.org>
AuthorDate: Thu Jan 11 23:02:00 2024 +0100
chore: Made the server events reach the frontend slice.
---
plc4j/tools/ui/backend/pom.xml | 4 +--
.../plc4x/java/tools/ui/event/DeviceEvent.java | 2 +-
...plicationEvent.java => UiApplicationEvent.java} | 4 +--
.../java/tools/ui/handler/WebSocketHandler.java | 8 ++---
plc4j/tools/ui/frontend/frontend/src/App.tsx | 34 ++++++++++++++++++----
.../frontend/src/components/NavigationTree.tsx | 12 ++++----
.../src/generated/plc4j-tools-ui-frontend.ts | 24 ++++++++++++++-
.../tools/ui/frontend/frontend/src/store/index.ts | 6 ++--
plc4j/tools/ui/frontend/pom.xml | 3 ++
9 files changed, 75 insertions(+), 22 deletions(-)
diff --git a/plc4j/tools/ui/backend/pom.xml b/plc4j/tools/ui/backend/pom.xml
index 9236cf0b06..63b90f0ea5 100644
--- a/plc4j/tools/ui/backend/pom.xml
+++ b/plc4j/tools/ui/backend/pom.xml
@@ -84,10 +84,10 @@
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
- <!--dependency>
+ <dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
- </dependency-->
+ </dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
diff --git a/plc4j/tools/ui/backend/src/main/java/org/apache/plc4x/java/tools/ui/event/DeviceEvent.java b/plc4j/tools/ui/backend/src/main/java/org/apache/plc4x/java/tools/ui/event/DeviceEvent.java
index d9693b7c39..038ee23e46 100644
--- a/plc4j/tools/ui/backend/src/main/java/org/apache/plc4x/java/tools/ui/event/DeviceEvent.java
+++ b/plc4j/tools/ui/backend/src/main/java/org/apache/plc4x/java/tools/ui/event/DeviceEvent.java
@@ -21,7 +21,7 @@ package org.apache.plc4x.java.tools.ui.event;
import org.apache.plc4x.java.tools.ui.model.Device;
-public class DeviceEvent extends ApplicationEvent<Device> {
+public class DeviceEvent extends UiApplicationEvent<Device> {
public DeviceEvent(Device source, EventType eventType) {
super(source, eventType);
diff --git a/plc4j/tools/ui/backend/src/main/java/org/apache/plc4x/java/tools/ui/event/ApplicationEvent.java b/plc4j/tools/ui/backend/src/main/java/org/apache/plc4x/java/tools/ui/event/UiApplicationEvent.java
similarity index 88%
rename from plc4j/tools/ui/backend/src/main/java/org/apache/plc4x/java/tools/ui/event/ApplicationEvent.java
rename to plc4j/tools/ui/backend/src/main/java/org/apache/plc4x/java/tools/ui/event/UiApplicationEvent.java
index 6eab967421..7c7f205b35 100644
--- a/plc4j/tools/ui/backend/src/main/java/org/apache/plc4x/java/tools/ui/event/ApplicationEvent.java
+++ b/plc4j/tools/ui/backend/src/main/java/org/apache/plc4x/java/tools/ui/event/UiApplicationEvent.java
@@ -19,11 +19,11 @@
package org.apache.plc4x.java.tools.ui.event;
-public abstract class ApplicationEvent<T> extends org.springframework.context.ApplicationEvent {
+public abstract class UiApplicationEvent<T> extends org.springframework.context.ApplicationEvent {
private final EventType eventType;
- public ApplicationEvent(T source, EventType eventType) {
+ public UiApplicationEvent(T source, EventType eventType) {
super(source);
this.eventType = eventType;
}
diff --git a/plc4j/tools/ui/backend/src/main/java/org/apache/plc4x/java/tools/ui/handler/WebSocketHandler.java b/plc4j/tools/ui/backend/src/main/java/org/apache/plc4x/java/tools/ui/handler/WebSocketHandler.java
index 4fe3fc2ea3..2748dce0de 100644
--- a/plc4j/tools/ui/backend/src/main/java/org/apache/plc4x/java/tools/ui/handler/WebSocketHandler.java
+++ b/plc4j/tools/ui/backend/src/main/java/org/apache/plc4x/java/tools/ui/handler/WebSocketHandler.java
@@ -20,7 +20,7 @@
package org.apache.plc4x.java.tools.ui.handler;
import com.fasterxml.jackson.databind.ObjectMapper;
-import org.apache.plc4x.java.tools.ui.event.ApplicationEvent;
+import org.apache.plc4x.java.tools.ui.event.UiApplicationEvent;
import org.springframework.context.event.EventListener;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.CloseStatus;
@@ -41,13 +41,13 @@ public class WebSocketHandler implements org.springframework.web.socket.WebSocke
/**
* ApplicationEvent listener forwarding all ApplicationEvents from this application to all connected clients.
- * @param applicationEvent event that we want to be forwarded.
+ * @param uiApplicationEvent event that we want to be forwarded.
*/
@EventListener
- public void onApplicationEvent(ApplicationEvent<?> applicationEvent) {
+ public void onApplicationEvent(UiApplicationEvent<?> uiApplicationEvent) {
openSessions.forEach((s, webSocketSession) -> {
try {
- webSocketSession.sendMessage(new TextMessage(objectMapper.writeValueAsString(applicationEvent)));
+ webSocketSession.sendMessage(new TextMessage(objectMapper.writeValueAsString(uiApplicationEvent)));
} catch (IOException e) {
throw new RuntimeException(e);
}
diff --git a/plc4j/tools/ui/frontend/frontend/src/App.tsx b/plc4j/tools/ui/frontend/frontend/src/App.tsx
index 959914a261..85ba9180d5 100644
--- a/plc4j/tools/ui/frontend/frontend/src/App.tsx
+++ b/plc4j/tools/ui/frontend/frontend/src/App.tsx
@@ -28,8 +28,15 @@ import Settings from "./pages/Settings.tsx";
import About from "./pages/About.tsx";
import useWebSocket from 'react-use-websocket';
import {useState} from "react";
-import {RestApplicationClient} from "./generated/plc4j-tools-ui-frontend.ts";
-import store, {InitializeConnectionsAction, initializeLists} from "./store";
+import {DeviceEvent, RestApplicationClient} from "./generated/plc4j-tools-ui-frontend.ts";
+import store, {
+ addDevice,
+ deleteDevice,
+ DeviceAction,
+ InitializeConnectionsAction,
+ initializeLists,
+ updateDevice
+} from "./store";
axios.defaults.baseURL = 'http://localhost:8080';
const restClient = new RestApplicationClient(axios);
@@ -57,17 +64,34 @@ function App() {
console.log('WebSocket connection established.');
},
onMessage: event => {
- console.log('Incoming message: ' + event.data)
+ const deviceEvent = JSON.parse(event.data) as DeviceEvent;
+ if(deviceEvent != null) {
+ switch (deviceEvent.eventType) {
+ case "CREATED": {
+ const action:DeviceAction = {device: deviceEvent.source}
+ store.dispatch(addDevice(action));
+ break;
+ }
+ case "UPDATED": {
+ const action:DeviceAction = {device: deviceEvent.source}
+ updateDevice(action)
+ break;
+ }
+ case "DELETED": {
+ const action: DeviceAction = {device: deviceEvent.source}
+ deleteDevice(action)
+ break;
+ }
+ }
+ }
}
});
// Load the initial list of drivers and connections and initialize the store with that.
if(!initialized) {
setInitialized(true);
- console.log("Initializing")
restClient.getAllDrivers().then(driverList => {
restClient.getAllDevices().then(deviceList => {
- console.log("Dispatching (Initialize-Lists)")
const action:InitializeConnectionsAction = {driverList:driverList.data, deviceList: deviceList.data}
store.dispatch(initializeLists(action))
})
diff --git a/plc4j/tools/ui/frontend/frontend/src/components/NavigationTree.tsx b/plc4j/tools/ui/frontend/frontend/src/components/NavigationTree.tsx
index 5878bf1f3b..efd5146568 100644
--- a/plc4j/tools/ui/frontend/frontend/src/components/NavigationTree.tsx
+++ b/plc4j/tools/ui/frontend/frontend/src/components/NavigationTree.tsx
@@ -25,14 +25,14 @@ import 'primeicons/primeicons.css';
import {useRef} from "react";
import {ContextMenu} from "primereact/contextmenu";
import {MenuItem} from "primereact/menuitem";
-//import {RestApplicationClient} from "../generated/plc4j-tools-ui-frontend.ts";
-//import axios from "axios";
+import {RestApplicationClient} from "../generated/plc4j-tools-ui-frontend.ts";
+import axios from "axios";
type NavigationTreeProps = {
treeItems: TreeItemData[];
}
-//const restClient = new RestApplicationClient(axios);
+const restClient = new RestApplicationClient(axios);
export default function NavigationTree({treeItems}: NavigationTreeProps) {
const cm = useRef<ContextMenu>(null);
@@ -53,9 +53,11 @@ export default function NavigationTree({treeItems}: NavigationTreeProps) {
} as MenuItem
] as MenuItem[]
function updateMenu(selectedItem:TreeItemData) {
- menu[0].disabled = selectedItem.supportsDiscovery
+ menu[0].disabled = !selectedItem.supportsDiscovery
+ menu[0].command = () => {
+ restClient.discover(selectedItem.id)
+ }
menu[1].disabled = selectedItem.type != "DRIVER"
- console.log("Second element enabled: " + (menu[1].disabled))
}
function getIcon(curItem: TreeItemData):IconType<TreeNode> {
switch (curItem.type) {
diff --git a/plc4j/tools/ui/frontend/frontend/src/generated/plc4j-tools-ui-frontend.ts b/plc4j/tools/ui/frontend/frontend/src/generated/plc4j-tools-ui-frontend.ts
index f6949f75af..b3be722010 100644
--- a/plc4j/tools/ui/frontend/frontend/src/generated/plc4j-tools-ui-frontend.ts
+++ b/plc4j/tools/ui/frontend/frontend/src/generated/plc4j-tools-ui-frontend.ts
@@ -19,7 +19,7 @@
*/
/* tslint:disable */
/* eslint-disable */
-// Generated using typescript-generator version 3.2.1263 on 2024-01-06 12:02:32.
+// Generated using typescript-generator version 3.2.1263 on 2024-01-11 22:58:15.
export interface Device {
id: number;
@@ -39,6 +39,15 @@ export interface Driver {
transports: { [index: string]: Transport };
}
+export interface UiApplicationEvent<T> extends ApplicationEvent {
+ source: T;
+ eventType: EventType;
+}
+
+export interface DeviceEvent extends UiApplicationEvent<Device> {
+ source: Device;
+}
+
export interface ConfigurationOption {
name: string;
typeName: string;
@@ -52,6 +61,17 @@ export interface Transport {
options: { [index: string]: any };
}
+export interface ApplicationEvent extends EventObject {
+ timestamp: number;
+}
+
+export interface EventObject extends Serializable {
+ source: any;
+}
+
+export interface Serializable {
+}
+
export interface HttpClient<O> {
request<R>(requestConfig: { method: string; url: string; queryParams?: any; data?: any; copyFn?: (data: R) => R; options?: O; }): RestResponse<R>;
@@ -113,6 +133,8 @@ export class RestApplicationClient<O> {
export type RestResponse<R> = Promise<Axios.GenericAxiosResponse<R>>;
+export type EventType = "CREATED" | "UPDATED" | "DELETED";
+
function uriEncoding(template: TemplateStringsArray, ...substitutions: any[]): string {
let result = "";
for (let i = 0; i < substitutions.length; i++) {
diff --git a/plc4j/tools/ui/frontend/frontend/src/store/index.ts b/plc4j/tools/ui/frontend/frontend/src/store/index.ts
index 4433a9cbab..b9823c9c58 100644
--- a/plc4j/tools/ui/frontend/frontend/src/store/index.ts
+++ b/plc4j/tools/ui/frontend/frontend/src/store/index.ts
@@ -26,7 +26,7 @@ export type InitializeConnectionsAction = {
deviceList: Device[]
}
-type DeviceAction = {
+export type DeviceAction = {
device: Device
}
@@ -47,12 +47,13 @@ const connectionsSlice = createSlice({
initializeLists: (state, action: PayloadAction<InitializeConnectionsAction>) => {
state.driverList = action.payload.driverList
state.deviceList = action.payload.deviceList
- console.log("updated driver and device lists")
},
addDevice: (state, action: PayloadAction<DeviceAction>) => {
+ console.log("ADD " + action)
state.deviceList = [...state.deviceList, action.payload.device]
},
updateDevice: (state, action: PayloadAction<DeviceAction>) => {
+ console.log("UPDATE " + action)
const device = state.deviceList.find(value => value.id == action.payload.device.id);
if (device) {
const index = state.deviceList.indexOf(device);
@@ -62,6 +63,7 @@ const connectionsSlice = createSlice({
}
},
deleteDevice: (state, action: PayloadAction<DeviceAction>) => {
+ console.log("DELETE " + action)
const device = state.deviceList.find(value => value.id == action.payload.device.id);
if (device) {
const index = state.deviceList.indexOf(device);
diff --git a/plc4j/tools/ui/frontend/pom.xml b/plc4j/tools/ui/frontend/pom.xml
index 3225e91c65..525a10db02 100644
--- a/plc4j/tools/ui/frontend/pom.xml
+++ b/plc4j/tools/ui/frontend/pom.xml
@@ -66,6 +66,9 @@
<class>org.apache.plc4x.java.api.value.PlcValue</class-->
<class>org.apache.plc4x.java.tools.ui.model.Device</class>
<class>org.apache.plc4x.java.tools.ui.model.Driver</class>
+ <class>org.apache.plc4x.java.tools.ui.event.EventType</class>
+ <class>org.apache.plc4x.java.tools.ui.event.UiApplicationEvent</class>
+ <class>org.apache.plc4x.java.tools.ui.event.DeviceEvent</class>
<!-- Here come the REST controllers -->
<class>org.apache.plc4x.java.tools.ui.controller.DeviceController</class>
<class>org.apache.plc4x.java.tools.ui.controller.DriverController</class>