From 2e6af3b2623da3d002816a6de325133d626858c9 Mon Sep 17 00:00:00 2001 From: VaiTon Date: Mon, 5 Jun 2023 16:54:12 +0200 Subject: Frontend to jsx --- frontend/src/components/dialogs/CommentDialog.jsx | 70 +++++++++++++++++++ frontend/src/components/dialogs/CopyDialog.jsx | 69 ++++++++++++++++++ frontend/src/components/dialogs/Filters.jsx | 85 +++++++++++++++++++++++ 3 files changed, 224 insertions(+) create mode 100644 frontend/src/components/dialogs/CommentDialog.jsx create mode 100644 frontend/src/components/dialogs/CopyDialog.jsx create mode 100644 frontend/src/components/dialogs/Filters.jsx (limited to 'frontend/src/components/dialogs') diff --git a/frontend/src/components/dialogs/CommentDialog.jsx b/frontend/src/components/dialogs/CommentDialog.jsx new file mode 100644 index 0000000..970aa83 --- /dev/null +++ b/frontend/src/components/dialogs/CommentDialog.jsx @@ -0,0 +1,70 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import React, {Component} from "react"; +import {Modal} from "react-bootstrap"; +import backend from "../../backend"; +import log from "../../log"; +import ButtonField from "../fields/ButtonField"; +import TextField from "../fields/TextField"; + +class CommentDialog extends Component { + + state = {}; + + componentDidMount() { + this.setState({comment: this.props.initialComment || ""}); + } + + setComment = () => { + if (this.state.comment === this.props.initialComment) { + return this.close(); + } + const comment = this.state.comment || null; + backend.post(`/api/connections/${this.props.connectionId}/comment`, {comment}) + .then((_) => { + this.close(); + }).catch((e) => { + log.error(e); + this.setState({error: "failed to save comment"}); + }); + }; + + close = () => this.props.onSave(this.state.comment || null); + + render() { + return ( + + + + ~/.comment + + + + this.setState({comment})} + rows={7} error={this.state.error}/> + + + + + + + ); + } +} + +export default CommentDialog; diff --git a/frontend/src/components/dialogs/CopyDialog.jsx b/frontend/src/components/dialogs/CopyDialog.jsx new file mode 100644 index 0000000..069fd2e --- /dev/null +++ b/frontend/src/components/dialogs/CopyDialog.jsx @@ -0,0 +1,69 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import React, {Component} from "react"; +import {Modal} from "react-bootstrap"; +import ButtonField from "../fields/ButtonField"; +import TextField from "../fields/TextField"; + +class CopyDialog extends Component { + + state = { + copyButtonText: "copy" + }; + + constructor(props) { + super(props); + this.textbox = React.createRef(); + } + + copyActionValue = () => { + this.textbox.current.select(); + document.execCommand("copy"); + this.setState({copyButtonText: "copied!"}); + this.timeoutHandle = setTimeout(() => this.setState({copyButtonText: "copy"}), 3000); + }; + + componentWillUnmount() { + if (this.timeoutHandle) { + clearTimeout(this.timeoutHandle); + } + } + + render() { + return ( + + + + {this.props.name} + + + + + + + + + + + ); + } +} + +export default CopyDialog; diff --git a/frontend/src/components/dialogs/Filters.jsx b/frontend/src/components/dialogs/Filters.jsx new file mode 100644 index 0000000..a2407df --- /dev/null +++ b/frontend/src/components/dialogs/Filters.jsx @@ -0,0 +1,85 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import React, {Component} from "react"; +import {Modal} from "react-bootstrap"; +import {cleanNumber, validateIpAddress, validateMin, validatePort} from "../../utils"; +import ButtonField from "../fields/ButtonField"; +import StringConnectionsFilter from "../filters/StringConnectionsFilter"; +import "./Filters.scss"; + +class Filters extends Component { + + render() { + return ( + + + + ~/advanced_filters + + + +
+
+ + + +
+ +
+ + + +
+
+
+ + + +
+ ); + } +} + +export default Filters; -- cgit v1.2.3-70-g09d2