mirror of
https://github.com/openmhz/trunk-server.git
synced 2026-11-12 16:57:39 -05:00
Create System is working... ask me how I know!
This commit is contained in:
Luke Berndt
@@ -174,6 +174,7 @@ exports.ownSystem = async function (req, res, next) {
|
||||
|
||||
if (!system) {
|
||||
console.error("ERROR: OwnSystem - system does not exist: " + req.body.shortName.toLowerCase());
|
||||
res.status(500)
|
||||
res.json({
|
||||
success: false,
|
||||
message: "That System does not exist."
|
||||
@@ -182,7 +183,7 @@ exports.ownSystem = async function (req, res, next) {
|
||||
}
|
||||
if (!system.userId.equals(req.user._id)) {
|
||||
console.error("ERROR: OwnSystem - not users system " + req.body.shortName.toLowerCase());
|
||||
|
||||
res.status(500)
|
||||
res.json({
|
||||
success: false,
|
||||
message: "You are not the user associated with this system."
|
||||
@@ -195,6 +196,7 @@ exports.ownSystem = async function (req, res, next) {
|
||||
|
||||
} catch (err) {
|
||||
console.error("ERROR: ownSystem - caught: " + err);
|
||||
res.status(500)
|
||||
res.json({
|
||||
success: false,
|
||||
message: err
|
||||
@@ -215,6 +217,7 @@ exports.uniqueShortName = async function (req, res, next) {
|
||||
}
|
||||
if (typeof shortName == 'undefined') {
|
||||
console.error("ShortName is not in req.body instead")
|
||||
res.status(500)
|
||||
res.json({
|
||||
success: false,
|
||||
message: "Short Name not provided in form"
|
||||
@@ -228,6 +231,7 @@ exports.uniqueShortName = async function (req, res, next) {
|
||||
|
||||
if (system) {
|
||||
console.error("ERROR: Unique Shortname already in use: " + req.body.shortName.toLowerCase());
|
||||
res.status(500)
|
||||
res.json({
|
||||
success: false,
|
||||
message: "Short Name already in use"
|
||||
@@ -240,10 +244,8 @@ exports.uniqueShortName = async function (req, res, next) {
|
||||
|
||||
} catch (err) {
|
||||
console.error("ERROR: Unique ShortName - caught: " + err);
|
||||
res.json({
|
||||
success: false,
|
||||
message: err
|
||||
});
|
||||
res.status(500);
|
||||
res.json({ message: "ERROR: Unique ShortName - caught: " + err});
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -300,10 +302,7 @@ exports.updateSystem = async function (req, res, next) {
|
||||
ignoreUnknownTalkgroup
|
||||
}))(res.locals.system);
|
||||
returnSys.id = res.locals.system._id;
|
||||
res.json({
|
||||
success: true,
|
||||
system: returnSys
|
||||
});
|
||||
res.json(returnSys);
|
||||
return;
|
||||
}
|
||||
});
|
||||
@@ -317,6 +316,7 @@ exports.validateSystem = async function (req, res, next) {
|
||||
res.locals.ignoreUnknownTalkgroup = req.body.ignoreUnknownTalkgroup;
|
||||
if (!req.body.name || (req.body.name.length < 2)) {
|
||||
console.error("ERROR: Validate System - req.body.name");
|
||||
res.status(500)
|
||||
res.json({
|
||||
success: false,
|
||||
message: "System Name is Required"
|
||||
@@ -327,6 +327,7 @@ exports.validateSystem = async function (req, res, next) {
|
||||
|
||||
if (!req.body.description || (req.body.description.length < 2)) {
|
||||
console.error("ERROR: Validate System - req.body.description");
|
||||
res.status(500)
|
||||
res.json({
|
||||
success: false,
|
||||
message: "System Description is Required"
|
||||
@@ -337,6 +338,7 @@ exports.validateSystem = async function (req, res, next) {
|
||||
|
||||
if (!req.body.shortName || (req.body.shortName.length < 2)) {
|
||||
console.error("ERROR: Validate System - req.body.shortName");
|
||||
res.status(500)
|
||||
res.json({
|
||||
success: false,
|
||||
message: "System ShortName is Required"
|
||||
@@ -352,6 +354,7 @@ exports.validateSystem = async function (req, res, next) {
|
||||
// make sure it is one of the expected types
|
||||
if ((req.body.systemType != "state") && (req.body.systemType != "city") && (req.body.systemType != "county") && (req.body.systemType != "international")) {
|
||||
console.error("ERROR: Validate System - req.body.systemType: " + req.body.systemType);
|
||||
res.status(500)
|
||||
res.json({
|
||||
success: false,
|
||||
message: "Select system location"
|
||||
@@ -368,6 +371,7 @@ exports.validateSystem = async function (req, res, next) {
|
||||
req.body.systemType === "county") {
|
||||
if (!req.body.state || (req.body.state === "") || (req.body.state.length < 2)) {
|
||||
console.error("ERROR: Validate System - req.body.state: " + req.body.state);
|
||||
res.status(500)
|
||||
res.json({
|
||||
success: false,
|
||||
message: "Select the State for the System"
|
||||
@@ -380,6 +384,7 @@ exports.validateSystem = async function (req, res, next) {
|
||||
if (req.body.systemType === "city") {
|
||||
if (!req.body.city || (req.body.city === "") || (req.body.city.length < 2)) {
|
||||
console.error("ERROR: Validate System - req.body.systemType: " + req.body.systemType);
|
||||
res.status(500)
|
||||
res.json({
|
||||
success: false,
|
||||
message: "Enter the city for the System"
|
||||
@@ -392,6 +397,7 @@ exports.validateSystem = async function (req, res, next) {
|
||||
if (req.body.systemType === "county") {
|
||||
if (!req.body.county || (req.body.county === "") || (req.body.county.length < 2)) {
|
||||
console.error("ERROR: Validate System - req.body.county: " + req.body.county);
|
||||
res.status(500)
|
||||
res.json({
|
||||
success: false,
|
||||
message: "Enter the county for the System"
|
||||
@@ -404,6 +410,7 @@ exports.validateSystem = async function (req, res, next) {
|
||||
if (req.body.systemType === "international") {
|
||||
if (!req.body.country || (req.body.country === "") || (req.body.country.length < 2)) {
|
||||
console.error("ERROR: Validate System - req.body.country: " + req.body.country);
|
||||
res.status(500)
|
||||
res.json({
|
||||
success: false,
|
||||
message: "Enter the country for the System"
|
||||
@@ -416,6 +423,7 @@ exports.validateSystem = async function (req, res, next) {
|
||||
|
||||
} catch (err) {
|
||||
console.error("ERROR: Validate System - caught: " + err);
|
||||
res.status(500)
|
||||
res.json({
|
||||
success: false,
|
||||
message: err
|
||||
@@ -457,15 +465,17 @@ exports.createSystem = async function (req, res, next) {
|
||||
}))(res.locals);
|
||||
system.key = key;
|
||||
system.userId = new mongoose.Types.ObjectId(req.user._id);
|
||||
System.create(system, function (err, newSys) {
|
||||
if (err) {
|
||||
const newSys = await System.create(system).catch( err => {
|
||||
|
||||
console.error(err);
|
||||
res.status(500)
|
||||
res.json({
|
||||
success: false,
|
||||
message: err
|
||||
});
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
var returnSys = (({
|
||||
name,
|
||||
shortName,
|
||||
@@ -494,10 +504,7 @@ exports.createSystem = async function (req, res, next) {
|
||||
key
|
||||
}))(newSys);
|
||||
returnSys.id = newSys._id;
|
||||
res.json({
|
||||
success: true,
|
||||
system: returnSys
|
||||
});
|
||||
res.json( returnSys);
|
||||
return;
|
||||
});
|
||||
|
||||
}
|
||||
@@ -8,7 +8,7 @@ import About from "../Components/About"
|
||||
import System from "../System/System"
|
||||
import ListSystems from "../System/ListSystems"
|
||||
import UpdateSystemContainer from "../System/UpdateSystemContainer"
|
||||
import CreateSystemContainer from "../System/CreateSystemContainer"
|
||||
import CreateSystem from "../System/CreateSystem"
|
||||
|
||||
|
||||
const App = (params) => {
|
||||
@@ -20,7 +20,7 @@ const App = (params) => {
|
||||
<Route path="/about" element={ <Restricted><About/></Restricted>} />
|
||||
<Route path="/system/:shortName" element={ <Restricted><System/></Restricted>} />
|
||||
<Route path="/update-system/:shortName" component={Restricted(UpdateSystemContainer, store)} />
|
||||
<Route path="/create-system" component={Restricted(CreateSystemContainer, store)} />
|
||||
<Route path="/create-system" element={ <Restricted><CreateSystem/></Restricted>} />
|
||||
<Route path="/list-systems" element={ <Restricted><ListSystems/></Restricted>} />
|
||||
<Route path="/" element={ <Restricted><ListSystems/></Restricted>} />
|
||||
<Route render={() => (<div>Miss</div>)} />
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { Component } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import React, { useState } from "react";
|
||||
|
||||
import {
|
||||
Container,
|
||||
Header,
|
||||
@@ -12,7 +12,9 @@ import {
|
||||
Message,
|
||||
Icon
|
||||
} from "semantic-ui-react";
|
||||
|
||||
import { useCreateSystemMutation} from '../features/api/apiSlice'
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import { useLocation, useNavigate, useParams } from 'react-router-dom';
|
||||
import SystemForm from "./SystemForm";
|
||||
|
||||
// ----------------------------------------------------
|
||||
@@ -21,35 +23,26 @@ const requestMessageStyle = {
|
||||
};
|
||||
|
||||
// ----------------------------------------------------
|
||||
class CreateSystem extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
const CreateSystem = (props) => {
|
||||
const navigate = useNavigate();
|
||||
const [createSystem, { error }] = useCreateSystemMutation();
|
||||
const { screenName } = useSelector((state) => state.user);
|
||||
|
||||
const [requestMessage, setRequestMessage] = useState("");
|
||||
|
||||
const handleSubmit = async (system) => {
|
||||
try {
|
||||
const originalPromiseResult = await createSystem(system).unwrap();
|
||||
navigate("/list-systems")
|
||||
} catch (error) {
|
||||
const message = error.data.message;
|
||||
console.log(message);
|
||||
setRequestMessage(message);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
state = {
|
||||
requestMessage: ""
|
||||
}
|
||||
|
||||
|
||||
|
||||
handleSubmit(system) {
|
||||
this.props
|
||||
.createSystem(system)
|
||||
.then(requestMessage => {
|
||||
if (requestMessage) {
|
||||
// report to the user is there was a problem during registration
|
||||
this.setState({
|
||||
requestMessage
|
||||
});
|
||||
} else {
|
||||
this.props.changeUrl("/list-systems")
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Container text>
|
||||
@@ -72,11 +65,11 @@ class CreateSystem extends Component {
|
||||
|
||||
<Container text>
|
||||
<Header as="h1">Create System</Header>
|
||||
<SystemForm onSubmit={this.handleSubmit} requestMessage={this.state.requestMessage} screenName={this.props.user.screenName}/>
|
||||
<SystemForm onSubmit={handleSubmit} requestMessage={requestMessage} screenName={screenName}/>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default CreateSystem;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { Component } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
Divider,
|
||||
Form,
|
||||
@@ -9,421 +9,387 @@ import {
|
||||
} from "semantic-ui-react";
|
||||
|
||||
// ----------------------------------------------------
|
||||
class SystemForm extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleInputChange = this.handleInputChange.bind(this);
|
||||
this.handleScreenNameCheckboxChange = this.handleScreenNameCheckboxChange.bind(this);
|
||||
this.handleTalkgroupCheckboxChange = this.handleTalkgroupCheckboxChange.bind(this);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
this.checkInputs = this.checkInputs.bind(this);
|
||||
this.render = this.render.bind(this);
|
||||
const SystemForm = (props) => {
|
||||
|
||||
|
||||
this.state = {
|
||||
checkInputMessages: [],
|
||||
name: "",
|
||||
shortName: "",
|
||||
description: "",
|
||||
systemType: "state",
|
||||
state: "",
|
||||
city: "",
|
||||
county: "",
|
||||
country: "",
|
||||
showScreenName: false,
|
||||
ignoreUnknownTalkgroup: false,
|
||||
nameError: false,
|
||||
shortNameError: false,
|
||||
descriptionError: false,
|
||||
emailError: false,
|
||||
systemTypeError: false,
|
||||
stateError: false,
|
||||
cityErorr: false,
|
||||
countyError: false,
|
||||
countryError: false,
|
||||
isEditing: this.props.isEditing
|
||||
};
|
||||
if (this.props.isEditing && this.props.system) {
|
||||
this.state.name = this.props.system.name;
|
||||
this.state.shortName = this.props.system.shortName;
|
||||
this.state.description = this.props.system.description;
|
||||
this.state.systemType = this.props.system.systemType;
|
||||
this.state.city = this.props.system.city;
|
||||
this.state.state = this.props.system.state;
|
||||
this.state.county = this.props.system.county;
|
||||
this.state.country = this.props.system.country;
|
||||
this.state.showScreenName = this.props.system.showScreenName;
|
||||
this.state.ignoreUnknownTalkgroup = this.props.system.ignoreUnknownTalkgroup;
|
||||
|
||||
|
||||
const [checkInputMessages, setCheckInputMessage] = useState([]);
|
||||
const [name, setName] = useState("");
|
||||
const [shortName, setShortName] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [systemType, setSystemType] = useState("state");
|
||||
const [systemState, setSystemState] = useState("");
|
||||
const [city, setCity] = useState("");
|
||||
const [county, setCounty] = useState("");
|
||||
const [country, setCountry] = useState("");
|
||||
const [showScreenName, setShowScreenName] = useState(false);
|
||||
const [ignoreUnknownTalkgroup, setIgnoreUnknownTalkgroup] = useState(false);
|
||||
const [nameError, setNameError] = useState(false);
|
||||
const [shortNameError, setShortNameError] = useState(false);
|
||||
const [descriptionError, setDescriptionError] = useState(false);
|
||||
const [emailError, setEmailError] = useState(false);
|
||||
const [systemTypeError, setSystemTypeError] = useState(false);
|
||||
const [systemStateError, setSystemStateError] = useState(false);
|
||||
const [cityError, setCityError] = useState(false);
|
||||
const [countyError, setCountyError] = useState(false);
|
||||
const [countryError, setCountryError] = useState(false);
|
||||
const [isEditing, setIsEditing] = useState(props.isEditing);
|
||||
|
||||
useEffect(() => {
|
||||
if (props.isEditing && props.system) {
|
||||
setName(props.system.name);
|
||||
setShortName(props.system.shortName);
|
||||
setDescription(props.system.description);
|
||||
setSystemType(props.system.systemType);
|
||||
setCity(props.system.city);
|
||||
setSystemState(props.system.state)
|
||||
setCounty(props.system.county);
|
||||
setCountry(props.system.country);
|
||||
setShowScreenName(props.system.showScreenName);
|
||||
setIgnoreUnknownTalkgroup(props.system.ignoreUnknownTalkgroup);
|
||||
}
|
||||
}
|
||||
// If we directly to an updating url, the system fetch will come back after the constructer, so we need to catch this and update the values
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.isEditing && this.props.system && !prevProps.system) {
|
||||
this.setState({
|
||||
name: this.props.system.name,
|
||||
shortName: this.props.system.shortName,
|
||||
description: this.props.system.description,
|
||||
systemType: this.props.system.systemType,
|
||||
city: this.props.system.city,
|
||||
state: this.props.system.state,
|
||||
county: this.props.system.county,
|
||||
country: this.props.system.country,
|
||||
showScreenName: this.props.system.showScreenName,
|
||||
ignoreUnknownTalkgroup: this.props.system.ignoreUnknownTalkgroup,
|
||||
});
|
||||
}
|
||||
}
|
||||
checkInputs() {
|
||||
}, [props.system]);
|
||||
|
||||
|
||||
const checkInputs = () => {
|
||||
let error = false;
|
||||
var checkInputMessages = [];
|
||||
var messages = [];
|
||||
|
||||
if (this.state.name === "") {
|
||||
this.setState({ nameError: true });
|
||||
checkInputMessages.push("System Name is required");
|
||||
if (name === "") {
|
||||
setNameError(true);
|
||||
messages.push("System Name is required");
|
||||
error = true;
|
||||
} else {
|
||||
this.setState({ nameError: false });
|
||||
setNameError(false);
|
||||
}
|
||||
|
||||
if (this.state.shortName.length === 0 || this.state.shortName.length > 10) {
|
||||
this.setState({ shortNameError: true });
|
||||
checkInputMessages.push(
|
||||
if (shortName.length < 4 || shortName.length > 10) {
|
||||
setShortNameError(true)
|
||||
messages.push(
|
||||
"Short Name for the system has to be 4-10 charecters"
|
||||
);
|
||||
error = true;
|
||||
} else {
|
||||
this.setState({ shortNameError: false });
|
||||
setShortNameError(false);
|
||||
}
|
||||
|
||||
if (this.state.description === "") {
|
||||
this.setState({ descriptionError: true });
|
||||
checkInputMessages.push("System description is required");
|
||||
if (description === "") {
|
||||
setDescriptionError(true);
|
||||
messages.push("System description is required");
|
||||
error = true;
|
||||
} else {
|
||||
this.setState({ descriptionError: false });
|
||||
setDescriptionError(false);
|
||||
}
|
||||
|
||||
if (
|
||||
this.state.systemType === "state" ||
|
||||
this.state.systemType === "city" ||
|
||||
this.state.systemType === "county"
|
||||
systemType === "state" ||
|
||||
systemType === "city" ||
|
||||
systemType === "county"
|
||||
) {
|
||||
if (this.state.state === "") {
|
||||
this.setState({ stateError: true });
|
||||
checkInputMessages.push("Select a state");
|
||||
if (systemState === "") {
|
||||
setSystemStateError(true);
|
||||
messages.push("Select a state");
|
||||
error = true;
|
||||
} else {
|
||||
this.setState({ stateError: false });
|
||||
setSystemStateError(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.state.systemType === "city") {
|
||||
if (this.state.city === "") {
|
||||
this.setState({ cityError: true });
|
||||
checkInputMessages.push("Enter a city");
|
||||
if (systemType === "city") {
|
||||
if (city === "") {
|
||||
setCityError(true);
|
||||
messages.push("Enter a city");
|
||||
error = true;
|
||||
} else {
|
||||
this.setState({ cityError: false });
|
||||
setCityError(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.state.systemType === "county") {
|
||||
if (this.state.county === "") {
|
||||
this.setState({ countyError: true });
|
||||
checkInputMessages.push("Enter a city");
|
||||
if (systemType === "county") {
|
||||
if (county === "") {
|
||||
setCountyError(true)
|
||||
messages.push("Enter a county");
|
||||
error = true;
|
||||
} else {
|
||||
this.setState({ countyError: false });
|
||||
setCountyError(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.state.systemType === "international") {
|
||||
if (this.state.country === "") {
|
||||
this.setState({ countryError: true });
|
||||
checkInputMessages.push("Enter a city");
|
||||
if (systemType === "international") {
|
||||
if (country === "") {
|
||||
setCountryError(true);
|
||||
messages.push("Enter a country");
|
||||
error = true;
|
||||
} else {
|
||||
this.setState({ countryError: false });
|
||||
setCountryError(false);
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({ checkInputMessages: checkInputMessages });
|
||||
setCheckInputMessage(messages);
|
||||
return error;
|
||||
}
|
||||
|
||||
handleInputChange = (e, { name, value }) => this.setState({ [name]: value });
|
||||
handleScreenNameCheckboxChange() {
|
||||
this.setState({ showScreenName: !this.state.showScreenName });
|
||||
const handleScreenNameCheckboxChange = () => {
|
||||
setShowScreenName((current) => !current);
|
||||
}
|
||||
|
||||
handleTalkgroupCheckboxChange() {
|
||||
this.setState({ ignoreUnknownTalkgroup: !this.state.ignoreUnknownTalkgroup });
|
||||
const handleTalkgroupCheckboxChange = () => {
|
||||
setIgnoreUnknownTalkgroup((current) => !current);
|
||||
}
|
||||
handleSubmit(event) {
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
let inputError = this.checkInputs();
|
||||
let inputError = checkInputs();
|
||||
|
||||
if (!inputError) {
|
||||
const system = (({
|
||||
const system = {
|
||||
name,
|
||||
shortName,
|
||||
description,
|
||||
systemType,
|
||||
city,
|
||||
state,
|
||||
state: systemState,
|
||||
county,
|
||||
country,
|
||||
showScreenName,
|
||||
ignoreUnknownTalkgroup
|
||||
}) => ({
|
||||
name,
|
||||
shortName,
|
||||
description,
|
||||
systemType,
|
||||
city,
|
||||
state,
|
||||
county,
|
||||
country,
|
||||
showScreenName,
|
||||
ignoreUnknownTalkgroup
|
||||
}))(this.state);
|
||||
this.props.onSubmit(system);
|
||||
};
|
||||
props.onSubmit(system);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
var requestMessage = "";
|
||||
var floatStyle = {
|
||||
overflow: "auto"
|
||||
};
|
||||
|
||||
const { isEditing } = this.props;
|
||||
const stateOptions = [
|
||||
{ value: "AL", text: "Alabama" },
|
||||
{ value: "AK", text: "Alaska" },
|
||||
{ value: "AZ", text: "Arizona" },
|
||||
{ value: "AR", text: "Arkansas" },
|
||||
{ value: "CA", text: "California" },
|
||||
{ value: "CO", text: "Colorado" },
|
||||
{ value: "CT", text: "Connecticut" },
|
||||
{ value: "DE", text: "Delaware" },
|
||||
{ value: "DC", text: "District Of Columbia" },
|
||||
{ value: "FL", text: "Florida" },
|
||||
{ value: "GA", text: "Georgia" },
|
||||
{ value: "HI", text: "Hawaii" },
|
||||
{ value: "ID", text: "Idaho" },
|
||||
{ value: "IL", text: "Illinois" },
|
||||
{ value: "IN", text: "Indiana" },
|
||||
{ value: "IA", text: "Iowa" },
|
||||
{ value: "KS", text: "Kansas" },
|
||||
{ value: "KY", text: "Kentucky" },
|
||||
{ value: "LA", text: "Louisiana" },
|
||||
{ value: "ME", text: "Maine" },
|
||||
{ value: "MD", text: "Maryland" },
|
||||
{ value: "MA", text: "Massachusetts" },
|
||||
{ value: "MI", text: "Michigan" },
|
||||
{ value: "MN", text: "Minnesota" },
|
||||
{ value: "MS", text: "Mississippi" },
|
||||
{ value: "MO", text: "Missouri" },
|
||||
{ value: "MT", text: "Montana" },
|
||||
{ value: "NE", text: "Nebraska" },
|
||||
{ value: "NV", text: "Nevada" },
|
||||
{ value: "NH", text: "New Hampshire" },
|
||||
{ value: "NJ", text: "New Jersey" },
|
||||
{ value: "NM", text: "New Mexico" },
|
||||
{ value: "NY", text: "New York" },
|
||||
{ value: "NC", text: "North Carolina" },
|
||||
{ value: "ND", text: "North Dakota" },
|
||||
{ value: "OH", text: "Ohio" },
|
||||
{ value: "OK", text: "Oklahoma" },
|
||||
{ value: "OR", text: "Oregon" },
|
||||
{ value: "PA", text: "Pennsylvania" },
|
||||
{ value: "RI", text: "Rhode Island" },
|
||||
{ value: "SC", text: "South Carolina" },
|
||||
{ value: "SD", text: "South Dakota" },
|
||||
{ value: "TN", text: "Tennessee" },
|
||||
{ value: "TX", text: "Texas" },
|
||||
{ value: "UT", text: "Utah" },
|
||||
{ value: "VT", text: "Vermont" },
|
||||
{ value: "VA", text: "Virginia" },
|
||||
{ value: "WA", text: "Washington" },
|
||||
{ value: "WV", text: "West Virginia" },
|
||||
{ value: "WI", text: "Wisconsin" },
|
||||
{ value: "WY", text: "Wyoming" }
|
||||
];
|
||||
if (
|
||||
this.state.checkInputMessages.length ||
|
||||
this.props.requestMessage.length
|
||||
) {
|
||||
var counter = 0;
|
||||
requestMessage = (
|
||||
<Message compact warning icon>
|
||||
<Icon name="lightning" />
|
||||
<Message.Content>
|
||||
<Message.Header>Problems...</Message.Header>
|
||||
<ul>
|
||||
{this.state.checkInputMessages.map(function (listValue) {
|
||||
return <li key={`ListItem_${counter++}`}>{listValue}</li>;
|
||||
})}
|
||||
{this.props.requestMessage.length > 0 && (
|
||||
<li key="req-mess">{this.props.requestMessage}</li>
|
||||
)}
|
||||
</ul>
|
||||
</Message.Content>
|
||||
</Message>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<Form className="raised padding segment" onSubmit={this.handleSubmit}>
|
||||
<Form.Group widths="equal">
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
type="text"
|
||||
name="name"
|
||||
onChange={this.handleInputChange}
|
||||
error={this.state.nameError}
|
||||
value={this.state.name}
|
||||
label="System name"
|
||||
placeholder="System Name..."
|
||||
/>
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
type="text"
|
||||
name="shortName"
|
||||
onChange={this.handleInputChange}
|
||||
error={this.state.shortNameError}
|
||||
value={this.state.shortName}
|
||||
disabled={isEditing}
|
||||
label="System Short Name (4-10 characters)"
|
||||
placeholder="Short Name..."
|
||||
/>
|
||||
</Form.Field>
|
||||
</Form.Group>
|
||||
<Divider horizontal />
|
||||
<Form.Field>
|
||||
<Checkbox
|
||||
onChange={this.handleScreenNameCheckboxChange}
|
||||
checked={this.state.showScreenName}
|
||||
label="Display Screen Name in System Listing" />
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<Checkbox
|
||||
onChange={this.handleTalkgroupCheckboxChange}
|
||||
checked={this.state.ignoreUnknownTalkgroup}
|
||||
label="Ignore Unknown Talkgroups" />
|
||||
</Form.Field>
|
||||
<Divider horizontal />
|
||||
<Form.TextArea
|
||||
label="Description"
|
||||
name="description"
|
||||
onChange={this.handleInputChange}
|
||||
error={this.state.descriptionError}
|
||||
value={this.state.description}
|
||||
rows={2}
|
||||
placeholder="Description of system..."
|
||||
/>
|
||||
var requestMessage = "";
|
||||
var floatStyle = {
|
||||
overflow: "auto"
|
||||
};
|
||||
|
||||
<Divider horizontal><Icon name="marker" />Location</Divider>
|
||||
<Form.Group inline>
|
||||
<label>System Type</label>
|
||||
<Form.Radio
|
||||
label="State"
|
||||
name="systemType"
|
||||
value="state"
|
||||
checked={this.state.systemType === "state"}
|
||||
onChange={this.handleInputChange}
|
||||
/>
|
||||
<Form.Radio
|
||||
label="County"
|
||||
name="systemType"
|
||||
value="county"
|
||||
checked={this.state.systemType === "county"}
|
||||
onChange={this.handleInputChange}
|
||||
/>
|
||||
<Form.Radio
|
||||
label="City"
|
||||
name="systemType"
|
||||
value="city"
|
||||
checked={this.state.systemType === "city"}
|
||||
onChange={this.handleInputChange}
|
||||
/>
|
||||
<Form.Radio
|
||||
label="International"
|
||||
name="systemType"
|
||||
value="international"
|
||||
checked={this.state.systemType === "international"}
|
||||
onChange={this.handleInputChange}
|
||||
/>
|
||||
</Form.Group>
|
||||
<Form.Group widths="equal">
|
||||
|
||||
{this.state.systemType === "city" && (
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
type="text"
|
||||
name="city"
|
||||
onChange={this.handleInputChange}
|
||||
error={this.state.cityError}
|
||||
value={this.state.city}
|
||||
label="City"
|
||||
placeholder="City..."
|
||||
/>
|
||||
</Form.Field>
|
||||
const stateOptions = [
|
||||
{ value: "AL", text: "Alabama" },
|
||||
{ value: "AK", text: "Alaska" },
|
||||
{ value: "AZ", text: "Arizona" },
|
||||
{ value: "AR", text: "Arkansas" },
|
||||
{ value: "CA", text: "California" },
|
||||
{ value: "CO", text: "Colorado" },
|
||||
{ value: "CT", text: "Connecticut" },
|
||||
{ value: "DE", text: "Delaware" },
|
||||
{ value: "DC", text: "District Of Columbia" },
|
||||
{ value: "FL", text: "Florida" },
|
||||
{ value: "GA", text: "Georgia" },
|
||||
{ value: "HI", text: "Hawaii" },
|
||||
{ value: "ID", text: "Idaho" },
|
||||
{ value: "IL", text: "Illinois" },
|
||||
{ value: "IN", text: "Indiana" },
|
||||
{ value: "IA", text: "Iowa" },
|
||||
{ value: "KS", text: "Kansas" },
|
||||
{ value: "KY", text: "Kentucky" },
|
||||
{ value: "LA", text: "Louisiana" },
|
||||
{ value: "ME", text: "Maine" },
|
||||
{ value: "MD", text: "Maryland" },
|
||||
{ value: "MA", text: "Massachusetts" },
|
||||
{ value: "MI", text: "Michigan" },
|
||||
{ value: "MN", text: "Minnesota" },
|
||||
{ value: "MS", text: "Mississippi" },
|
||||
{ value: "MO", text: "Missouri" },
|
||||
{ value: "MT", text: "Montana" },
|
||||
{ value: "NE", text: "Nebraska" },
|
||||
{ value: "NV", text: "Nevada" },
|
||||
{ value: "NH", text: "New Hampshire" },
|
||||
{ value: "NJ", text: "New Jersey" },
|
||||
{ value: "NM", text: "New Mexico" },
|
||||
{ value: "NY", text: "New York" },
|
||||
{ value: "NC", text: "North Carolina" },
|
||||
{ value: "ND", text: "North Dakota" },
|
||||
{ value: "OH", text: "Ohio" },
|
||||
{ value: "OK", text: "Oklahoma" },
|
||||
{ value: "OR", text: "Oregon" },
|
||||
{ value: "PA", text: "Pennsylvania" },
|
||||
{ value: "RI", text: "Rhode Island" },
|
||||
{ value: "SC", text: "South Carolina" },
|
||||
{ value: "SD", text: "South Dakota" },
|
||||
{ value: "TN", text: "Tennessee" },
|
||||
{ value: "TX", text: "Texas" },
|
||||
{ value: "UT", text: "Utah" },
|
||||
{ value: "VT", text: "Vermont" },
|
||||
{ value: "VA", text: "Virginia" },
|
||||
{ value: "WA", text: "Washington" },
|
||||
{ value: "WV", text: "West Virginia" },
|
||||
{ value: "WI", text: "Wisconsin" },
|
||||
{ value: "WY", text: "Wyoming" }
|
||||
];
|
||||
if (
|
||||
checkInputMessages.length ||
|
||||
props.requestMessage.length
|
||||
) {
|
||||
var counter = 0;
|
||||
requestMessage = (
|
||||
<Message compact warning icon>
|
||||
<Icon name="lightning" />
|
||||
<Message.Content>
|
||||
<Message.Header>Problems...</Message.Header>
|
||||
<ul>
|
||||
{checkInputMessages.map(function (listValue) {
|
||||
return <li key={`ListItem_${counter++}`}>{listValue}</li>;
|
||||
})}
|
||||
{props.requestMessage.length > 0 && (
|
||||
<li key="req-mess">{props.requestMessage}</li>
|
||||
)}
|
||||
{this.state.systemType === "county" && (
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
type="text"
|
||||
name="county"
|
||||
onChange={this.handleInputChange}
|
||||
error={this.state.countyError}
|
||||
value={this.state.county}
|
||||
label="County"
|
||||
placeholder="County..."
|
||||
/>
|
||||
</Form.Field>
|
||||
)}
|
||||
{this.state.systemType === "international" ? (
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
type="text"
|
||||
name="country"
|
||||
onChange={this.handleInputChange}
|
||||
error={this.state.countryError}
|
||||
value={this.state.country}
|
||||
label="Country"
|
||||
placeholder="Country..."
|
||||
/>
|
||||
</Form.Field>
|
||||
) : (
|
||||
<Form.Field>
|
||||
<Form.Dropdown
|
||||
name="state"
|
||||
onChange={this.handleInputChange}
|
||||
error={this.state.stateError}
|
||||
value={this.state.state}
|
||||
options={stateOptions}
|
||||
scrolling
|
||||
label="State"
|
||||
placeholder="Select State..."
|
||||
/>
|
||||
</Form.Field>
|
||||
)}
|
||||
|
||||
</Form.Group>
|
||||
|
||||
<div style={floatStyle}>
|
||||
<Button type="submit" size="large" floated="right" value="Login">
|
||||
{isEditing !== true ? "Create" : "Update"}
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
{requestMessage}
|
||||
</div>
|
||||
</ul>
|
||||
</Message.Content>
|
||||
</Message>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<Form className="raised padding segment" onSubmit={handleSubmit}>
|
||||
<Form.Group widths="equal">
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
type="text"
|
||||
name="name"
|
||||
onChange={e => setName(e.target.value)}
|
||||
error={nameError}
|
||||
value={name}
|
||||
label="System name"
|
||||
placeholder="System Name..."
|
||||
/>
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
type="text"
|
||||
name="shortName"
|
||||
onChange={e => setShortName(e.target.value)}
|
||||
error={shortNameError}
|
||||
value={shortName}
|
||||
disabled={isEditing}
|
||||
label="System Short Name (4-10 characters)"
|
||||
placeholder="Short Name..."
|
||||
/>
|
||||
</Form.Field>
|
||||
</Form.Group>
|
||||
<Divider horizontal />
|
||||
<Form.Field>
|
||||
<Checkbox
|
||||
onChange={handleScreenNameCheckboxChange}
|
||||
checked={showScreenName}
|
||||
label="Display Screen Name in System Listing" />
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<Checkbox
|
||||
onChange={handleTalkgroupCheckboxChange}
|
||||
checked={ignoreUnknownTalkgroup}
|
||||
label="Ignore Unknown Talkgroups" />
|
||||
</Form.Field>
|
||||
<Divider horizontal />
|
||||
<Form.TextArea
|
||||
label="Description"
|
||||
name="description"
|
||||
onChange={e => setDescription(e.target.value)}
|
||||
error={descriptionError}
|
||||
value={description}
|
||||
rows={2}
|
||||
placeholder="Description of system..."
|
||||
/>
|
||||
|
||||
<Divider horizontal><Icon name="marker" />Location</Divider>
|
||||
<Form.Group inline>
|
||||
<label>System Type</label>
|
||||
<Form.Radio
|
||||
label="State"
|
||||
name="systemType"
|
||||
value="state"
|
||||
checked={systemType === "state"}
|
||||
onChange={e => setSystemType("state")}
|
||||
/>
|
||||
<Form.Radio
|
||||
label="County"
|
||||
name="systemType"
|
||||
value="county"
|
||||
checked={systemType === "county"}
|
||||
onChange={e => setSystemType("county")}
|
||||
/>
|
||||
<Form.Radio
|
||||
label="City"
|
||||
name="systemType"
|
||||
value="city"
|
||||
checked={systemType === "city"}
|
||||
onChange={e => setSystemType("city")}
|
||||
/>
|
||||
<Form.Radio
|
||||
label="International"
|
||||
name="systemType"
|
||||
value="international"
|
||||
checked={systemType === "international"}
|
||||
onChange={e => setSystemType("international")}
|
||||
/>
|
||||
</Form.Group>
|
||||
<Form.Group widths="equal">
|
||||
|
||||
{systemType === "city" && (
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
type="text"
|
||||
name="city"
|
||||
onChange={e => setCity(e.target.value)}
|
||||
error={cityError}
|
||||
value={city}
|
||||
label="City"
|
||||
placeholder="City..."
|
||||
/>
|
||||
</Form.Field>
|
||||
)}
|
||||
{systemType === "county" && (
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
type="text"
|
||||
name="county"
|
||||
onChange={e => setCounty(e.target.value)}
|
||||
error={countyError}
|
||||
value={county}
|
||||
label="County"
|
||||
placeholder="County..."
|
||||
/>
|
||||
</Form.Field>
|
||||
)}
|
||||
{systemType === "international" ? (
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
type="text"
|
||||
name="country"
|
||||
onChange={e => setCountry(e.target.value)}
|
||||
error={countryError}
|
||||
value={country}
|
||||
label="Country"
|
||||
placeholder="Country..."
|
||||
/>
|
||||
</Form.Field>
|
||||
) : (
|
||||
<Form.Field>
|
||||
<Form.Dropdown
|
||||
name="state"
|
||||
onChange={(e, data ) => {setSystemState(data.value); console.log(data.value)}}
|
||||
error={systemStateError}
|
||||
value={systemState}
|
||||
options={stateOptions}
|
||||
scrolling
|
||||
label="State"
|
||||
placeholder="Select State..."
|
||||
/>
|
||||
</Form.Field>
|
||||
)}
|
||||
|
||||
</Form.Group>
|
||||
|
||||
<div style={floatStyle}>
|
||||
<Button type="submit" size="large" floated="right" value="Login">
|
||||
{isEditing !== true ? "Create" : "Update"}
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
{requestMessage}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default SystemForm;
|
||||
|
||||
@@ -2,6 +2,23 @@
|
||||
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
|
||||
import { createSelector } from '@reduxjs/toolkit'
|
||||
|
||||
/*
|
||||
const axiosBaseQuery =
|
||||
({ baseUrl } = { baseUrl: '' }) =>
|
||||
async ({ url, method, data, params }) => {
|
||||
try {
|
||||
const result = await axios({ url: baseUrl + url, method, data, params })
|
||||
return { data: result.data }
|
||||
} catch (axiosError) {
|
||||
let err = axiosError
|
||||
return {
|
||||
error: {
|
||||
status: err.response?.status,
|
||||
data: err.response?.data || err.message,
|
||||
},
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
// Define our single API slice object
|
||||
export const apiSlice = createApi({
|
||||
@@ -109,10 +126,28 @@ export const apiSlice = createApi({
|
||||
getSystems: builder.query({
|
||||
// The URL for the request is '/fakeApi/posts'
|
||||
query: () => ({ url: `/systems`, credentials: "include" })
|
||||
})
|
||||
}),
|
||||
createSystem: builder.mutation({
|
||||
query: (system) => ({
|
||||
url: `/systems`,
|
||||
method: 'POST',
|
||||
credentials: "include",
|
||||
body: system,
|
||||
}),
|
||||
async onQueryStarted(system, { dispatch, queryFulfilled }) {
|
||||
try {
|
||||
const { data: newSystem } = await queryFulfilled
|
||||
const patchResult = dispatch(
|
||||
apiSlice.util.updateQueryData('getSystems', system.shortName, (systems) => {
|
||||
systems.push(newSystem);
|
||||
})
|
||||
)
|
||||
} catch {}
|
||||
},
|
||||
}),
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
// Export the auto-generated hook for the `getPosts` query endpoint
|
||||
export const { useGetGroupsQuery, useGetSystemsQuery, useGetTalkgroupsQuery, useGetErrorsQuery, useDeleteGroupMutation, useCreateGroupMutation, useSaveGroupOrderMutation, useUpdateGroupMutation, useImportTalkgroupsMutation } = apiSlice
|
||||
export const { useGetGroupsQuery, useGetSystemsQuery, useGetTalkgroupsQuery, useGetErrorsQuery, useDeleteGroupMutation, useCreateGroupMutation, useCreateSystemMutation, useSaveGroupOrderMutation, useUpdateGroupMutation, useImportTalkgroupsMutation } = apiSlice
|
||||
|
||||
Reference in New Issue
Block a user