From a9929073ebe112d3c1066ff55b2d777ce2d79bc9 Mon Sep 17 00:00:00 2001 From: stef013 Date: Fri, 8 Jan 2021 11:50:57 +0100 Subject: [PATCH 1/6] Add video verbeterd --- config-fe/package-lock.json | 44 +++++++++++++++++++ config-fe/package.json | 1 + config-fe/src/features/custom/Popup.jsx | 56 ++++++++++++++++++++++++- config-fe/src/pages/Livefeed.jsx | 11 ++--- 4 files changed, 106 insertions(+), 6 deletions(-) diff --git a/config-fe/package-lock.json b/config-fe/package-lock.json index c4637ea..84eee81 100644 --- a/config-fe/package-lock.json +++ b/config-fe/package-lock.json @@ -3575,6 +3575,11 @@ "color-convert": "^1.9.0" } }, + "any-promise": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", + "integrity": "sha1-q8av7tzqUugJzcA3au0845Y10X8=" + }, "anymatch": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz", @@ -7935,6 +7940,14 @@ "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz", "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=" }, + "get-video-dimensions": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/get-video-dimensions/-/get-video-dimensions-1.0.0.tgz", + "integrity": "sha1-/H5ayBw5JEH1uG1Q3XeDiptTFHo=", + "requires": { + "mz": "^1.2.1" + } + }, "getpass": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz", @@ -12570,6 +12583,16 @@ "integrity": "sha512-5VmmjADBqS4++8pTI6poSRJ+chHdaoI4XErcQPM5w4QfwaDl+FQlSI0iOgWbYDn6CBCbDRKaSCcEiN2K5aHNGQ==", "dev": true }, + "mz": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/mz/-/mz-1.3.0.tgz", + "integrity": "sha1-BvCT/dmVagbTfhsegTROJ0eMQvA=", + "requires": { + "native-or-bluebird": "1", + "thenify": "3", + "thenify-all": "1" + } + }, "nan": { "version": "2.14.2", "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz", @@ -12606,6 +12629,11 @@ } } }, + "native-or-bluebird": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/native-or-bluebird/-/native-or-bluebird-1.2.0.tgz", + "integrity": "sha1-OcR7/Xgl0fuf+tMiEK4l2q3xAck=" + }, "native-url": { "version": "0.2.6", "resolved": "https://registry.npmjs.org/native-url/-/native-url-0.2.6.tgz", @@ -17294,6 +17322,22 @@ "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=" }, + "thenify": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", + "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", + "requires": { + "any-promise": "^1.0.0" + } + }, + "thenify-all": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", + "integrity": "sha1-GhkY1ALY/D+Y+/I02wvMjMEOlyY=", + "requires": { + "thenify": ">= 3.1.0 < 4" + } + }, "throat": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz", diff --git a/config-fe/package.json b/config-fe/package.json index 47afecf..70b2347 100644 --- a/config-fe/package.json +++ b/config-fe/package.json @@ -22,6 +22,7 @@ "clsx": "^1.1.1", "cors": "^2.8.5", "fontsource-roboto": "^3.0.3", + "get-video-dimensions": "^1.0.0", "konva": "^7.2.0", "line-reader": "^0.4.0", "prop-types": "^15.7.2", diff --git a/config-fe/src/features/custom/Popup.jsx b/config-fe/src/features/custom/Popup.jsx index 27fdca8..a101884 100644 --- a/config-fe/src/features/custom/Popup.jsx +++ b/config-fe/src/features/custom/Popup.jsx @@ -7,6 +7,7 @@ import AddCircleIcon from "@material-ui/icons/AddCircle"; import plusIcon from "assets/plusicon.png"; import PropTypes from "prop-types"; import { LoadVideoSources, AddVideoSource } from 'store/modules/video_sources/sourcesSlice' +import getDimensions from 'get-video-dimensions'; const useStyles = makeStyles({ title: { @@ -26,6 +27,18 @@ const useStyles = makeStyles({ marginBottom: 15, textAlign: "left" }, + successMessage: { + fontSize: 14, + fontWeight: 400, + marginBottom: 15, + paddingLeft: 10, + textAlign: "left", + backgroundColor: "#57c22d", + color: "white", + borderRadius: 5, + lineHeight: 3, + + }, pos: { marginBottom: 12 }, @@ -134,6 +147,7 @@ function Popup(props) { const pulseclasses = pulseStyles(); const [value, setValue] = React.useState(0); const [open, setOpen] = React.useState(false); + const [success, setSuccess] = React.useState(false); const [newFeed, setNewFeed] = React.useState({ name: "", location: "", @@ -174,8 +188,39 @@ function Popup(props) { const onFormSubmit = e => { e.preventDefault(); console.log(newFeed) - props.AddVideoSource(newFeed) + //get video resolution + getVideoDimensionsOf(newFeed.url) + .then(({ width, height }) => { + console.log("Video width: " + width); + console.log("Video height: " + height); + }); + + //props.AddVideoSource(newFeed); + + setSuccess(true); + } + + function getVideoDimensionsOf(url) { + return new Promise(function (resolve) { + // create the video element + let video = document.createElement('video'); + + // place a listener on it + video.addEventListener("loadedmetadata", function () { + // retrieve dimensions + let height = this.videoHeight; + let width = this.videoWidth; + // send back result + resolve({ + height: height, + width: width + }); + }, false); + + // start download meta-datas + video.src = url; + }); } return ( @@ -269,6 +314,12 @@ function Popup(props) { + + + {success ? + Video successfully added! + : null} + New feed config: @@ -277,6 +328,7 @@ function Popup(props) { editName(e.target)} /> @@ -290,12 +342,14 @@ function Popup(props) { className={classes.urlField} id="outlined-basic" label="Description" + required="Required" onInput={e => editDescription(e.target)} /> editUrl(e.target)} /> diff --git a/config-fe/src/pages/Livefeed.jsx b/config-fe/src/pages/Livefeed.jsx index 4958075..2328d68 100644 --- a/config-fe/src/pages/Livefeed.jsx +++ b/config-fe/src/pages/Livefeed.jsx @@ -4,7 +4,7 @@ import stompClient from 'rabbitMQ/rabbitMQ' import { Client, Message } from '@stomp/stompjs'; import { Container } from '@material-ui/core'; -import { withStyles } from '@material-ui/core/styles'; +import { withStyles } from '@material-ui/core/styles'; const styles = theme => ({ videoPlayer: { @@ -35,7 +35,7 @@ class Livefeed extends React.Component { //attempt to connect to rabbitmq this.stompClient.activate(); - this.stompClient.onConnect = (frame) => { + this.stompClient.onConnect = (frame) => { console.log("CONNECTED TO RABBITMQ") var subscription = this.stompClient.subscribe("/queue/video-queue", onQueueMessage); @@ -47,6 +47,7 @@ class Livefeed extends React.Component { let image = new Image(); let blob = new Blob([message.binaryBody]); let url = URL.createObjectURL(blob); + console.log(url) document.querySelector("#image").src = url; /*image.onload = () => { @@ -71,13 +72,13 @@ class Livefeed extends React.Component { render() { const { classes } = this.props; - return( + return ( - + {/* */} ) } } -export default withStyles(styles, {withTheme: true})(Livefeed); \ No newline at end of file +export default withStyles(styles, { withTheme: true })(Livefeed); \ No newline at end of file From 25cc39c28f92dc82c7316e8115cb4babe2987b4d Mon Sep 17 00:00:00 2001 From: stef013 Date: Fri, 8 Jan 2021 11:52:27 +0100 Subject: [PATCH 2/6] Popup fix --- config-fe/src/features/custom/Popup.jsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/config-fe/src/features/custom/Popup.jsx b/config-fe/src/features/custom/Popup.jsx index 5fe52a5..4e130a4 100644 --- a/config-fe/src/features/custom/Popup.jsx +++ b/config-fe/src/features/custom/Popup.jsx @@ -6,12 +6,8 @@ import Image from "../../Images/CamPlaceholder.PNG"; import AddCircleIcon from "@material-ui/icons/AddCircle"; import plusIcon from "assets/plusicon.png"; import PropTypes from "prop-types"; -<<<<<<< HEAD import { LoadVideoSources, AddVideoSource } from 'store/modules/video_sources/sourcesSlice' import getDimensions from 'get-video-dimensions'; -======= -import { AddVideoSource } from 'store/modules/video_sources/sourcesSlice' ->>>>>>> 3aecaf0bcdf3d62007147b2f890845a002341ef4 const useStyles = makeStyles({ title: { From eed048347c859c91502d528781e24dab1e05a9e7 Mon Sep 17 00:00:00 2001 From: stef013 Date: Fri, 8 Jan 2021 11:55:42 +0100 Subject: [PATCH 3/6] save video uncomment --- config-fe/src/features/custom/Popup.jsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/config-fe/src/features/custom/Popup.jsx b/config-fe/src/features/custom/Popup.jsx index 4e130a4..8fa0fa6 100644 --- a/config-fe/src/features/custom/Popup.jsx +++ b/config-fe/src/features/custom/Popup.jsx @@ -6,8 +6,7 @@ import Image from "../../Images/CamPlaceholder.PNG"; import AddCircleIcon from "@material-ui/icons/AddCircle"; import plusIcon from "assets/plusicon.png"; import PropTypes from "prop-types"; -import { LoadVideoSources, AddVideoSource } from 'store/modules/video_sources/sourcesSlice' -import getDimensions from 'get-video-dimensions'; +import { AddVideoSource } from 'store/modules/video_sources/sourcesSlice' const useStyles = makeStyles({ title: { @@ -196,7 +195,7 @@ function Popup(props) { console.log("Video height: " + height); }); - //props.AddVideoSource(newFeed); + props.AddVideoSource(newFeed); setSuccess(true); } @@ -315,7 +314,6 @@ function Popup(props) { - {success ? Video successfully added! : null} From 960918532c6635d9112f069272af5c01ed1317c7 Mon Sep 17 00:00:00 2001 From: stef013 Date: Tue, 12 Jan 2021 13:25:43 +0100 Subject: [PATCH 4/6] Feed name wordt correct gewijzigd, feed info in config weergegeven --- config-fe/src/api/FeedApi.tsx | 6 ++ config-fe/src/api/axios.js | 2 +- .../src/features/card/customVideoCard.jsx | 18 ++--- config-fe/src/pages/Configuration.jsx | 47 ++++++++---- config-fe/src/pages/Dashboard.jsx | 1 + .../modules/video_sources/sourcesSlice.tsx | 76 ++++++++++--------- 6 files changed, 91 insertions(+), 59 deletions(-) diff --git a/config-fe/src/api/FeedApi.tsx b/config-fe/src/api/FeedApi.tsx index e0a8d81..b5cdece 100644 --- a/config-fe/src/api/FeedApi.tsx +++ b/config-fe/src/api/FeedApi.tsx @@ -43,6 +43,12 @@ export async function createFeed(feed: Feed) { return data; } +export async function updateFeed(feed: Feed) { + let { data } = await axios.put(`/feeds/${feed.id}`, feed); + console.log(data); + return data; +} + export async function deleteFeed(feed: Feed) { let response = await axios.delete(`/feeds/${feed.id}`) diff --git a/config-fe/src/api/axios.js b/config-fe/src/api/axios.js index cc99a93..ef2dcdf 100644 --- a/config-fe/src/api/axios.js +++ b/config-fe/src/api/axios.js @@ -2,7 +2,7 @@ import axios from "axios"; import * as qs from "qs"; import { PathLike } from "fs"; -let API_URL = process.env.API_URL || "http://localhost:5050"; +let API_URL = process.env.API_URL || "http://localhost:5000"; const apiConfig = { returnRejectedPromiseOnError: true, diff --git a/config-fe/src/features/card/customVideoCard.jsx b/config-fe/src/features/card/customVideoCard.jsx index dacd693..58eb297 100644 --- a/config-fe/src/features/card/customVideoCard.jsx +++ b/config-fe/src/features/card/customVideoCard.jsx @@ -29,7 +29,7 @@ const styles = theme => ({ class customVideoCard extends React.Component { FetchUrlObjectForBlob(blob) { - if(blob) { + if (blob) { let url = URL.createObjectURL(blob); return url; } else { @@ -66,18 +66,18 @@ class customVideoCard extends React.Component { - + {(this.props.Active) ? - this.props.OnStartStop(this.props.Id)}> - - - : - this.props.OnStartStop(this.props.Id)}> - - + this.props.OnStartStop(this.props.Id)}> + + + : + this.props.OnStartStop(this.props.Id)}> + + } diff --git a/config-fe/src/pages/Configuration.jsx b/config-fe/src/pages/Configuration.jsx index 38fc442..36f21df 100644 --- a/config-fe/src/pages/Configuration.jsx +++ b/config-fe/src/pages/Configuration.jsx @@ -3,6 +3,7 @@ import { withStyles } from "@material-ui/core/styles"; import { Grid, Typography, Card, TextField, FormGroup, Chip, FormControlLabel, Checkbox, Button, CardContent, FormControl, MenuItem, InputLabel, Box } from "@material-ui/core"; import Canvas from "../features/custom/Canvas"; import { SaveConfig, LoadConfig, UpdateConfig } from "../store/modules/configuration/configSlice"; +import { UpdateVideoSource } from "../store/modules/video_sources/sourcesSlice"; import { withRouter, Link } from 'react-router-dom'; import { connect } from 'react-redux'; import Detections from '../Model/Detections'; @@ -78,7 +79,7 @@ const mapStateToProps = state => ({ snapshots: state.sources.snapshots }); -const mapDispatch = { LoadConfig, SaveConfig, UpdateConfig } +const mapDispatch = { LoadConfig, SaveConfig, UpdateConfig, UpdateVideoSource } class Configuration extends React.Component { @@ -94,6 +95,18 @@ class Configuration extends React.Component { drawables: "" }; + this.feed = { + id: this.props.location.state.feed.id, + name: this.props.location.state.feed.name, + description: this.props.location.state.feed.description, + location: this.props.location.state.feed.location, + feed_type: this.props.location.state.feed.feed_type, + url: this.props.location.state.feed.url, + active: this.props.location.state.feed.active, + configuration: this.props.location.state.feed.configuration, + } + console.log(this.feed); + this.state = { isLoading: true, existingConfig: false, @@ -111,7 +124,7 @@ class Configuration extends React.Component { async componentDidMount() { await this.props.LoadConfig(this.props.match.params.id); - if(this.props.config != null) { + if (this.props.config != null) { this.setState({ existingConfig: true }); this.configuration.name = this.props.config.name; this.configuration.resolution = this.props.config.resolution; @@ -125,9 +138,9 @@ class Configuration extends React.Component { } SnapshotAvailable() { - if(this.props.snapshots && this.props.snapshots.length > 0) { + if (this.props.snapshots && this.props.snapshots.length > 0) { let blob = this.props.snapshots.find(x => x.feed_id == this.props.match.params.id)?.snapshot; - if(blob) { + if (blob) { return true; } else { return false; @@ -138,9 +151,9 @@ class Configuration extends React.Component { } FetchBlobPreview() { - if(this.props.snapshots && this.props.snapshots.length > 0) { + if (this.props.snapshots && this.props.snapshots.length > 0) { let blob = this.props.snapshots.find(x => x.feed_id == this.props.match.params.id)?.snapshot; - if(blob) { + if (blob) { let url = URL.createObjectURL(blob); return url; } else { @@ -167,11 +180,15 @@ class Configuration extends React.Component { e.preventDefault(); //check if we are updating an existing config or creating a new one. - if(this.state.existingConfig) { + if (this.state.existingConfig) { this.configuration.id = this.props.config.id; + this.feed.name = this.configuration.name; this.props.UpdateConfig(this.configuration) + this.props.UpdateVideoSource(this.feed); } else { + this.feed.name = this.configuration.name; this.props.SaveConfig(this.configuration) + this.props.UpdateVideoSource(this.feed); } this.configuration.detection_types.map(object => { @@ -199,8 +216,8 @@ class Configuration extends React.Component { - Configuratie - Camera X - + Configuratie - {this.feed.name} + @@ -217,7 +234,7 @@ class Configuration extends React.Component { > this.configuration.name = e.target.value} /> @@ -233,6 +250,7 @@ class Configuration extends React.Component { > @@ -245,10 +263,11 @@ class Configuration extends React.Component { className={classes.title2} color="textSecondary" gutterBottom + > @@ -298,7 +317,7 @@ class Configuration extends React.Component { @@ -427,7 +446,7 @@ class Configuration extends React.Component { variant="contained" color="default" className={classes.Buttons} - + > Cancel @@ -443,7 +462,7 @@ class Configuration extends React.Component { Camera Preview - + diff --git a/config-fe/src/pages/Dashboard.jsx b/config-fe/src/pages/Dashboard.jsx index b260260..1fca4ef 100644 --- a/config-fe/src/pages/Dashboard.jsx +++ b/config-fe/src/pages/Dashboard.jsx @@ -58,6 +58,7 @@ class Dashboard extends React.Component { Active={value.active} Snapshot={(this.props.snapshots && this.props.snapshots.length > 0) ? this.props.snapshots.find(x => x.feed_id == value.id)?.snapshot : null} OnStartStop={this.OnChangeFeedActive} + Feed={value} /> ) })} diff --git a/config-fe/src/store/modules/video_sources/sourcesSlice.tsx b/config-fe/src/store/modules/video_sources/sourcesSlice.tsx index 61b11f9..486b29b 100644 --- a/config-fe/src/store/modules/video_sources/sourcesSlice.tsx +++ b/config-fe/src/store/modules/video_sources/sourcesSlice.tsx @@ -1,5 +1,5 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; -import { Feed, getFeeds, getFeedDetails, createFeed, deleteFeed, Snapshot, FeedChangeEvent, ChangeFeed } from 'api/FeedApi'; +import { Feed, getFeeds, getFeedDetails, createFeed, updateFeed, deleteFeed, Snapshot, FeedChangeEvent, ChangeFeed } from 'api/FeedApi'; import stompClient from 'rabbitMQ/rabbitMQ' import store from 'store/store'; @@ -9,32 +9,32 @@ const initialState: { videoSources: Feed[], snapshots: Snapshot[] } = { }; export const sourcesSlice = createSlice({ - name: 'sources', - initialState, - reducers: { - LoadSources: (state, action : PayloadAction) => { - //set sources loaded from API to local state. - state.videoSources = action.payload; - }, - AddSource: (state, action : PayloadAction) => { - //add video source to local state array - state.videoSources.push(action.payload); - }, - RemoveSource: (state, action : PayloadAction) => { - //delete from local state array. - var indexOfVideoToDelete = state.videoSources.indexOf(action.payload); - state.videoSources.splice(indexOfVideoToDelete, 1); - }, - ChangeFeedActive: (state, action : PayloadAction) => { - var foundIndex = state.videoSources.findIndex(x => x.id == action.payload.id); - state.videoSources[foundIndex] = action.payload; - }, - LoadSnapshots: (state, action: PayloadAction) => { - state.snapshots = action.payload; - } + name: 'sources', + initialState, + reducers: { + LoadSources: (state, action: PayloadAction) => { + //set sources loaded from API to local state. + state.videoSources = action.payload; + }, + AddSource: (state, action: PayloadAction) => { + //add video source to local state array + state.videoSources.push(action.payload); + }, + RemoveSource: (state, action: PayloadAction) => { + //delete from local state array. + var indexOfVideoToDelete = state.videoSources.indexOf(action.payload); + state.videoSources.splice(indexOfVideoToDelete, 1); }, - }); - + ChangeFeedActive: (state, action: PayloadAction) => { + var foundIndex = state.videoSources.findIndex(x => x.id == action.payload.id); + state.videoSources[foundIndex] = action.payload; + }, + LoadSnapshots: (state, action: PayloadAction) => { + state.snapshots = action.payload; + } + }, +}); + export const { LoadSources, AddSource, RemoveSource, LoadSnapshots, ChangeFeedActive } = sourcesSlice.actions; // The function below is called a selector and allows us to select a value from @@ -55,6 +55,12 @@ export const AddVideoSource = (videoSource: Feed) => async (dispatch: any) => { dispatch(AddSource(feed)); } +export const UpdateVideoSource = (videoSource: Feed) => async (dispatch: any) => { + let feed = await updateFeed(videoSource); + console.log(feed); + dispatch(AddSource(feed)); +} + export const RemoveVideoSource = (videoSource: Feed) => async (dispatch: any) => { let deleted = await deleteFeed(videoSource); @@ -65,12 +71,12 @@ export const RemoveVideoSource = (videoSource: Feed) => async (dispatch: any) => } } -export const StartStopVideoSource = (FeedChangeEvent: FeedChangeEvent) => async (dispatch : any) => { +export const StartStopVideoSource = (FeedChangeEvent: FeedChangeEvent) => async (dispatch: any) => { let updatedfeed = await ChangeFeed(FeedChangeEvent); dispatch(ChangeFeedActive(updatedfeed)); } -export const FetchSnapshots = () => async (dispatch : any) => { +export const FetchSnapshots = () => async (dispatch: any) => { let tempSnapshots = [] as Snapshot[]; //subscriptions storing the client subscribe messages. let subscriptions = [] as any[]; @@ -82,7 +88,7 @@ export const FetchSnapshots = () => async (dispatch : any) => { let sub = subscriptions[indexOfSub]; let blob = new Blob([message.binaryBody]); - let snapshot: Snapshot = { feed_id: sub.feed_id, snapshot: blob}; + let snapshot: Snapshot = { feed_id: sub.feed_id, snapshot: blob }; tempSnapshots.push(snapshot); //finally unsubscribe from the subscription so we only receive one frame and remove the sub from the list. @@ -99,13 +105,13 @@ export const FetchSnapshots = () => async (dispatch : any) => { //attempt to connect to rabbitmq client.activate(); - client.onConnect = (frame) => { - for(let feed of store.getState().sources.videoSources) { + client.onConnect = (frame) => { + for (let feed of store.getState().sources.videoSources) { //only fetch for active feeds. - if(feed.active) { + if (feed.active) { //subscribe to the queue for messages. - var sub = client.subscribe("/queue/video-queue", onQueueMessage, {'ack': 'client-individual', 'prefetch-count': 1 }); - + var sub = client.subscribe("/queue/video-queue", onQueueMessage, { 'ack': 'client-individual', 'prefetch-count': 1 }); + subscriptions.push({ subscription: sub, feed_id: feed.id @@ -115,7 +121,7 @@ export const FetchSnapshots = () => async (dispatch : any) => { }; //wait 3 seconds then deactivate the client to give the client time to receive a single frame. - setTimeout(function() { + setTimeout(function () { client.deactivate(); //in the end, pass all the results to the snapshot state. From 47cf088fcbf75d42a184ecae075842876fd81155 Mon Sep 17 00:00:00 2001 From: stef013 Date: Tue, 12 Jan 2021 14:07:33 +0100 Subject: [PATCH 5/6] feed info ophalen bij config verbeterd, name wordt correct gewijzigd --- config-fe/src/api/FeedApi.tsx | 2 - config-fe/src/pages/Configuration.jsx | 42 +++++++++---------- .../modules/video_sources/sourcesSlice.tsx | 14 ++++++- 3 files changed, 32 insertions(+), 26 deletions(-) diff --git a/config-fe/src/api/FeedApi.tsx b/config-fe/src/api/FeedApi.tsx index b5cdece..36f83a7 100644 --- a/config-fe/src/api/FeedApi.tsx +++ b/config-fe/src/api/FeedApi.tsx @@ -45,13 +45,11 @@ export async function createFeed(feed: Feed) { export async function updateFeed(feed: Feed) { let { data } = await axios.put(`/feeds/${feed.id}`, feed); - console.log(data); return data; } export async function deleteFeed(feed: Feed) { let response = await axios.delete(`/feeds/${feed.id}`) - return response.status === 204; } diff --git a/config-fe/src/pages/Configuration.jsx b/config-fe/src/pages/Configuration.jsx index 36f21df..5032c04 100644 --- a/config-fe/src/pages/Configuration.jsx +++ b/config-fe/src/pages/Configuration.jsx @@ -3,7 +3,7 @@ import { withStyles } from "@material-ui/core/styles"; import { Grid, Typography, Card, TextField, FormGroup, Chip, FormControlLabel, Checkbox, Button, CardContent, FormControl, MenuItem, InputLabel, Box } from "@material-ui/core"; import Canvas from "../features/custom/Canvas"; import { SaveConfig, LoadConfig, UpdateConfig } from "../store/modules/configuration/configSlice"; -import { UpdateVideoSource } from "../store/modules/video_sources/sourcesSlice"; +import { UpdateVideoSource, GetVideoSource } from "../store/modules/video_sources/sourcesSlice"; import { withRouter, Link } from 'react-router-dom'; import { connect } from 'react-redux'; import Detections from '../Model/Detections'; @@ -76,10 +76,11 @@ const useStyles = (theme) => ({ const mapStateToProps = state => ({ config: state.config.configSource, + feed: state.sources.singleVideoSource, snapshots: state.sources.snapshots }); -const mapDispatch = { LoadConfig, SaveConfig, UpdateConfig, UpdateVideoSource } +const mapDispatch = { LoadConfig, SaveConfig, UpdateConfig, UpdateVideoSource, GetVideoSource } class Configuration extends React.Component { @@ -95,18 +96,6 @@ class Configuration extends React.Component { drawables: "" }; - this.feed = { - id: this.props.location.state.feed.id, - name: this.props.location.state.feed.name, - description: this.props.location.state.feed.description, - location: this.props.location.state.feed.location, - feed_type: this.props.location.state.feed.feed_type, - url: this.props.location.state.feed.url, - active: this.props.location.state.feed.active, - configuration: this.props.location.state.feed.configuration, - } - console.log(this.feed); - this.state = { isLoading: true, existingConfig: false, @@ -119,11 +108,14 @@ class Configuration extends React.Component { value: [], detectionArray: [], fixedOptions: [], + feed: "", } } async componentDidMount() { await this.props.LoadConfig(this.props.match.params.id); + await this.props.GetVideoSource(this.props.match.params.id); + console.log(this.props.feed); if (this.props.config != null) { this.setState({ existingConfig: true }); this.configuration.name = this.props.config.name; @@ -133,6 +125,10 @@ class Configuration extends React.Component { this.state.fixedOptions.push(object.detectionType); }); } + if (this.props.feed != null) { + this.setState({ feed: this.props.feed }); + + } this.setState({ isLoading: false }); } @@ -182,13 +178,15 @@ class Configuration extends React.Component { //check if we are updating an existing config or creating a new one. if (this.state.existingConfig) { this.configuration.id = this.props.config.id; - this.feed.name = this.configuration.name; + const feed = { ...this.state.feed, name: this.configuration.name } + this.setState(() => ({ feed })) this.props.UpdateConfig(this.configuration) - this.props.UpdateVideoSource(this.feed); + this.props.UpdateVideoSource(feed); } else { - this.feed.name = this.configuration.name; + const feed = { ...this.state.feed, name: this.configuration.name } + this.setState(() => ({ feed })) this.props.SaveConfig(this.configuration) - this.props.UpdateVideoSource(this.feed); + this.props.UpdateVideoSource(feed); } this.configuration.detection_types.map(object => { @@ -216,7 +214,7 @@ class Configuration extends React.Component { - Configuratie - {this.feed.name} + Configuratie - {this.state.feed.name} @@ -234,7 +232,7 @@ class Configuration extends React.Component { > this.configuration.name = e.target.value} /> @@ -250,7 +248,7 @@ class Configuration extends React.Component { > @@ -317,7 +315,7 @@ class Configuration extends React.Component { diff --git a/config-fe/src/store/modules/video_sources/sourcesSlice.tsx b/config-fe/src/store/modules/video_sources/sourcesSlice.tsx index 486b29b..a79e956 100644 --- a/config-fe/src/store/modules/video_sources/sourcesSlice.tsx +++ b/config-fe/src/store/modules/video_sources/sourcesSlice.tsx @@ -3,8 +3,9 @@ import { Feed, getFeeds, getFeedDetails, createFeed, updateFeed, deleteFeed, Sna import stompClient from 'rabbitMQ/rabbitMQ' import store from 'store/store'; -const initialState: { videoSources: Feed[], snapshots: Snapshot[] } = { +const initialState: { videoSources: Feed[], singleVideoSource: (null | Feed), snapshots: Snapshot[] } = { videoSources: [], + singleVideoSource: null, snapshots: [] }; @@ -16,6 +17,10 @@ export const sourcesSlice = createSlice({ //set sources loaded from API to local state. state.videoSources = action.payload; }, + GetSource: (state, action: PayloadAction) => { + //set sources loaded from API to local state. + state.singleVideoSource = action.payload; + }, AddSource: (state, action: PayloadAction) => { //add video source to local state array state.videoSources.push(action.payload); @@ -35,7 +40,7 @@ export const sourcesSlice = createSlice({ }, }); -export const { LoadSources, AddSource, RemoveSource, LoadSnapshots, ChangeFeedActive } = sourcesSlice.actions; +export const { LoadSources, GetSource, AddSource, RemoveSource, LoadSnapshots, ChangeFeedActive } = sourcesSlice.actions; // The function below is called a selector and allows us to select a value from // the state. Selectors can also be defined inline where they're used instead of @@ -50,6 +55,11 @@ export const LoadVideoSources = () => async (dispatch: any) => { dispatch(LoadSources(feeds)); } +export const GetVideoSource = (id: number) => async (dispatch: any) => { + let feed = await getFeedDetails(id); + dispatch(GetSource(feed)); +} + export const AddVideoSource = (videoSource: Feed) => async (dispatch: any) => { let feed = await createFeed(videoSource); dispatch(AddSource(feed)); From a7a7d701fdd8364dc538d044ffe6c9f24166fcfd Mon Sep 17 00:00:00 2001 From: nick van der burgt Date: Wed, 13 Jan 2021 17:54:52 +0100 Subject: [PATCH 6/6] changed feed.name to feed.url for url input --- config-fe/src/pages/Configuration.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config-fe/src/pages/Configuration.jsx b/config-fe/src/pages/Configuration.jsx index 5032c04..a850a9b 100644 --- a/config-fe/src/pages/Configuration.jsx +++ b/config-fe/src/pages/Configuration.jsx @@ -315,7 +315,7 @@ class Configuration extends React.Component {