From 312da655fe42c69d425efc196f8a51d970287620 Mon Sep 17 00:00:00 2001 From: Melania Dello Spedale La Paglia Date: Thu, 26 Mar 2020 17:46:03 +0100 Subject: [PATCH] deviceForm #11 --- frontend/src/components/forms/DNSForm.tsx | 59 +------ frontend/src/components/forms/deviceForm.tsx | 166 +++++++++++++++++++ 2 files changed, 174 insertions(+), 51 deletions(-) create mode 100644 frontend/src/components/forms/deviceForm.tsx diff --git a/frontend/src/components/forms/DNSForm.tsx b/frontend/src/components/forms/DNSForm.tsx index 6be08ad..c514b43 100644 --- a/frontend/src/components/forms/DNSForm.tsx +++ b/frontend/src/components/forms/DNSForm.tsx @@ -6,59 +6,19 @@ import { history } from '../../main'; import _ from 'lodash'; import { Link } from 'react-router-dom'; import DNSApi from './../../api/dnsApi'; - -// interface CompProps { -// } - -// interface CompState { -// confirm_password?: string; -// email?: string; -// name?: string; -// password?: string; -// isLogin?: boolean; -// } - - -// export default class DNSForm extends DNSBaseComponent { -// state = { -// }; +import DeviceApi from './../../api/deviceApi'; const DNSForm = () => { - const [mac_address, setMacAddress] = useState('test'); - const [name, setName] = useState('name'); - // const [form, setState] = useState({ - // ip: '', - // mac_address: '' - // }); - - - // constructor(props: any) { - // super(props); - // } - - // componentWillMount() { - // } - - // componentDidMount() { - // } - - // componentWillReceiveProps(nextProps: any) { - - // } - - // componentWillUnmount() { - // this.cancelPromises(); - // } - - // render() { + const [mac_address, setMacAddress] = useState(''); + const [dns_name_manual, setDnsNameManual] = useState(''); + async function submit() { try { - const responseInsertion = await DNSApi.addElement({ + const responseInsertion = await DeviceApi.create({ mac_address, - name + dns_name_manual }); - console.log("CREATED???", responseInsertion); } catch (error) { console.log("ERROR", error); } @@ -68,9 +28,6 @@ const DNSForm = () => { const target = event.target; const value = target.type === 'checkbox' ? target.checked : target.value; const name = target.name; - console.log("name", name); - console.log("value", value); - // setState({ ...form }); eval(`set${name}("${value}")`); } @@ -93,8 +50,8 @@ const DNSForm = () => { { diff --git a/frontend/src/components/forms/deviceForm.tsx b/frontend/src/components/forms/deviceForm.tsx new file mode 100644 index 0000000..708f134 --- /dev/null +++ b/frontend/src/components/forms/deviceForm.tsx @@ -0,0 +1,166 @@ +import * as React from 'react'; +import { connect } from 'react-redux'; +import authutils from '../../utils/authutils'; +import * as NotificationActions from '../../actions/notificationActions'; +import * as UserActions from '../../actions/userActions'; +import DeviceApi from './../../api/deviceApi'; +import DNSBaseComponent from '../dnsBaseComponent'; +import { Grid, Input, Button, Container, Segment, Card, Image, Form, Icon } from 'semantic-ui-react'; +import { history } from '../../main'; +import _ from 'lodash'; +import { IDevice } from '../../../interfaces/device'; + +interface CompProps { + device?: IDevice; + onBack?: (arg?: any) => any; + +} + +interface CompState { + dns_name_auto: string; + dns_name_manual: string; + is_gw: boolean; + gw_id: number; + mac_address: string; + tenant_id: number; +} + +class DeviceForm extends DNSBaseComponent { + state = { + dns_name_auto: '', + dns_name_manual: '', + is_gw: false, + gw_id: null, + mac_address: '', + tenant_id: null, + }; + + constructor(props: any) { + super(props); + } + + componentWillMount() { + } + + componentDidMount() { + } + + componentWillReceiveProps(nextProps: any) { + + } + + componentWillUnmount() { + this.cancelPromises(); + } + + handleChange(event: any) { + const target = event.target; + const value = target.type === 'checkbox' ? target.checked : target.value; + const name = target.name; + this.setState({ + [name]: value + }); + } + + async createDevice() { + try { + if (this.state.mac_address && this.state.dns_name_manual) { + const tenant: IDevice = { + description: this.state.description, + edge_interface_name: this.state.edge_interface_name + }; + const registerPromise = TenantApi.create(tenant); + this.registerPromise(registerPromise); + const responseCreate: any = await registerPromise; + if (responseCreate && responseCreate.status === 200 && responseCreate.data) { + if (responseCreate.data.message === 'Tenant successfully created') { + this.props.dispatchNotification('Creation successfully done', 'success', Math.random()); + } else if (responseCreate.data.message === 'Tenant already exists') { + this.props.dispatchNotification('Creation successfully done', 'warning', Math.random()); + } else { + this.props.dispatchNotification(`Error creation.`, 'error', Math.random()); + } + } + } else { + this.props.dispatchNotification(`Missing Data`, 'warning', Math.random()); + } + } catch (error) { + console.log('error: ', error); + this.props.dispatchNotification('Sign Up Error', 'error', Math.random()); + } + } + + render() { + return ( + <> + + + Creazione Device +
+ + + { + this.handleChange(event); + }} + /> + + + { + this.handleChange(event); + }} + /> + + + + +
+ + + ); + } +} + +const mapStateToProps = (state: any) => { + return { + userdata: state.userReducer.userdata, + status: state.userReducer.status + }; +}; + +const mapDispatchToProps = (dispatch: any) => { + return { + dispatchLoginAction: (username: string, password: string) => { + dispatch(UserActions.login(username, password)); + }, + dispatchNotification: (body: string, status: string, id: string) => { + dispatch(NotificationActions.globalStatusChanged({ body, status, id })); + } + }; +}; + +export default connect( + mapStateToProps, + mapDispatchToProps +)(DeviceForm);