Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Jun 11, 2019. It is now read-only.

Commit b83350e

Browse files
committed
fix msgs
1 parent a30a748 commit b83350e

File tree

8 files changed

+188
-52
lines changed

8 files changed

+188
-52
lines changed

‎build/assets/index.js‎

Lines changed: 8 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/actions/controller.js‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import store from "../store";
2-
import DijkstraSearch from "~/models/DijkstraSearch";
32
import { setGraph, setActiveItem, setAnswers } from "./index";
43

54
export const addNode = node => {
@@ -65,17 +64,15 @@ export const changeGraph = graph => {
6564
store.dispatch(setGraph(graph));
6665
};
6766

68-
export const searchGraph = selectedNodes => {
67+
export const searchGraph = (selectedNodes=[]) => {
6968
const state = store.getState();
70-
const { graph } = state;
69+
const { graph, distanceType } = state;
70+
71+
if (selectedNodes.length <= 1) return;
7172

7273
const answers = selectedNodes.slice(1).map((node, index) => {
7374
const prev = selectedNodes[index];
74-
const a = graph.search(
75-
prev.name,
76-
node.name,
77-
DijkstraSearch.BY_COORDINATES,
78-
);
75+
const a = graph.search(prev.name, node.name, distanceType);
7976
return a;
8077
});
8178

@@ -86,3 +83,11 @@ export const searchGraph = selectedNodes => {
8683
export const clearAnswers = () => {
8784
store.dispatch(setAnswers(null));
8885
};
86+
87+
export const udpateAnswers = selectedNodes => {
88+
const state = store.getState();
89+
const { answers } = state;
90+
91+
if (answers && selectedNodes.length > 1) searchGraph(selectedNodes);
92+
else clearAnswers();
93+
};

‎src/actions/index.js‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import {
22
SET_GRAPH,
33
SET_DISTANCE_TYPE,
4-
SET_START,
5-
SET_FINISH,
64
SET_ACTIVE_ITEM,
75
SET_SHOW_LINK_DOTS,
86
SET_SHOW_PROPERTIES,
@@ -18,10 +16,6 @@ export const oneFieldDispatch = (type, payload) => async dispatch => {
1816

1917
export const setGraph = payload => oneFieldDispatch(SET_GRAPH, payload);
2018

21-
export const setStart = payload => oneFieldDispatch(SET_START, payload);
22-
23-
export const setFinish = payload => oneFieldDispatch(SET_FINISH, payload);
24-
2519
export const setDistanceType = payload =>
2620
oneFieldDispatch(SET_DISTANCE_TYPE, payload);
2721

‎src/actions/types.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
export const SET_GRAPH = "SET_GRAPH";
22
export const SET_DISTANCE_TYPE = "SET_DISTANCE_TYPE";
3-
export const SET_START = "SET_START";
4-
export const SET_FINISH = "SET_FINISH";
53
export const SET_ACTIVE_ITEM = "SET_ACTIVE_ITEM";
64
export const SET_SHOW_LINK_DOTS = "SET_SHOW_LINK_DOTS";
75
export const SET_SHOW_PROPERTIES = "SET_SHOW_PROPERTIES";
Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import uuidv4 from "uuid/v4";
4+
import { connect } from "react-redux";
5+
6+
import DijkstraSearch from "~/models/DijkstraSearch";
7+
import { setDistanceType } from "~/actions";
8+
9+
const OPTIONS = [
10+
{ key: DijkstraSearch.BY_COORDINATES, value: "Use coordinates" },
11+
{ key: DijkstraSearch.BY_LINK_LENGTH, value: "Use link length" },
12+
{ key: DijkstraSearch.BY_WEIGHT, value: "Use weight" },
13+
];
14+
15+
class DistanceType extends React.Component {
16+
constructor(props) {
17+
super(props);
18+
this.toggleId = `toggle-${uuidv4()}`;
19+
}
20+
21+
isChecked(value) {
22+
return this.props.distanceType === value;
23+
}
24+
25+
renderOptions() {
26+
return OPTIONS.map(option => (
27+
<div key={option.key} className="custom-control custom-radio">
28+
<input
29+
className="custom-control-input"
30+
type="radio"
31+
name={this.toggleId}
32+
id={option.key}
33+
value={option.key}
34+
onChange={input => {
35+
this.props.setDistanceType(input.target.value);
36+
this.props.onChange();
37+
}}
38+
checked={this.isChecked(option.key)}
39+
/>
40+
<label className="custom-control-label" htmlFor={option.key}>
41+
{option.value}
42+
</label>
43+
</div>
44+
));
45+
}
46+
47+
render() {
48+
return <div className="my-4">{this.renderOptions()}</div>;
49+
}
50+
}
51+
52+
DistanceType.propTypes = {
53+
distanceType: PropTypes.string.isRequired,
54+
setDistanceType: PropTypes.func.isRequired,
55+
onChange: PropTypes.func.isRequired,
56+
};
57+
58+
const mapStateToProps = state => ({
59+
distanceType: state.distanceType,
60+
});
61+
62+
const mapDispatchToProps = dispatch => ({
63+
setDistanceType: value => {
64+
dispatch(setDistanceType(value));
65+
},
66+
});
67+
68+
export default connect(mapStateToProps, mapDispatchToProps)(DistanceType);

‎src/components/Searchbar/Searchbar.jsx‎

Lines changed: 98 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ import { connect } from "react-redux";
44

55
import NodeSelect from "./NodeSelect";
66
import Graph from "~/models/Graph";
7-
import { searchGraph, clearAnswers } from "~/actions/controller";
7+
import DistanceType from "./DistanceType";
8+
import { searchGraph, clearAnswers, udpateAnswers } from "~/actions/controller";
9+
import { COLORS, DANGER_COLOR } from "~/constants";
810

911
import styles from "./Searchbar.less";
1012

@@ -16,6 +18,59 @@ class Searchbar extends React.Component {
1618
return { ...state, selectedNodes };
1719
}
1820

21+
static getTransparentColor(color) {
22+
return `${color}0D`;
23+
}
24+
25+
static renderNoFound(answer, index) {
26+
const color = COLORS[index];
27+
return (
28+
<div
29+
key={index}
30+
className="alert"
31+
style={{
32+
borderLeft: `5px solid ${DANGER_COLOR}`,
33+
backgroundColor: Searchbar.getTransparentColor(color),
34+
}}
35+
>
36+
No path from {answer.start} to {answer.end}{" "}
37+
<i
38+
className="fas fa-exclamation-circle"
39+
style={{ color: DANGER_COLOR }}
40+
/>
41+
</div>
42+
);
43+
}
44+
45+
static renderFound(answer, index) {
46+
const color = COLORS[index];
47+
const pathInfo = answer.path.reduce((pthinf, node) => {
48+
const arr = pthinf;
49+
if (arr.length) {
50+
arr.push(
51+
<i
52+
className="fas fa-arrow-circle-right"
53+
style={{ color: "#9E9E9E" }}
54+
/>,
55+
);
56+
}
57+
arr.push(<span> {node.name} </span>);
58+
return arr;
59+
}, []);
60+
return (
61+
<div
62+
key={index}
63+
className="alert"
64+
style={{
65+
borderLeft: `5px solid ${color}`,
66+
backgroundColor: Searchbar.getTransparentColor(color),
67+
}}
68+
>
69+
{pathInfo}
70+
</div>
71+
);
72+
}
73+
1974
constructor(props) {
2075
super(props);
2176
this.state = this.getInitialState();
@@ -29,7 +84,7 @@ class Searchbar extends React.Component {
2984

3085
setSelectedNodes(selectedNodes) {
3186
this.setState({ selectedNodes });
32-
clearAnswers();
87+
udpateAnswers(selectedNodes);
3388
}
3489

3590
renderNodeSelect() {
@@ -59,6 +114,20 @@ class Searchbar extends React.Component {
59114
);
60115
}
61116

117+
renderClearNodeSelectButton() {
118+
if (this.props.answers) return null;
119+
return (
120+
<button
121+
className="btn ml-2"
122+
onClick={() => {
123+
this.setSelectedNodes([]);
124+
}}
125+
>
126+
Clear All
127+
</button>
128+
);
129+
}
130+
62131
renderClearAnswersButton() {
63132
if (!this.props.answers) return null;
64133
return (
@@ -75,35 +144,42 @@ class Searchbar extends React.Component {
75144

76145
renderAnswers() {
77146
if (!this.props.answers) return null;
78-
return this.props.answers.map((answer, index) => {
147+
constanswersDOM= this.props.answers.map((answer, index) => {
79148
if (!answer.path) {
80-
return (
81-
<div key={index} className="alert alert-warning">
82-
No path from {answer.start} to {answer.end}
83-
</div>
84-
);
149+
return Searchbar.renderNoFound(answer, index);
85150
}
86-
const pathInfo = answer.path.reduce((pthinf, node) => {
87-
if (!pthinf) return node.name;
88-
return `${pthinf} > ${node.name}`;
89-
}, null);
90-
return (
91-
<div key={index} className="alert alert-info">
92-
{pathInfo}
93-
</div>
94-
);
151+
return Searchbar.renderFound(answer, index);
95152
});
153+
return <div className="mt-4">{answersDOM}</div>;
154+
}
155+
156+
renderDistanceType() {
157+
return (
158+
<DistanceType
159+
onChange={() => {
160+
udpateAnswers(this.state.selectedNodes);
161+
}}
162+
/>
163+
);
164+
}
165+
166+
renderButtons() {
167+
return (
168+
<div className="mt-4">
169+
{this.renderSearchButton()}
170+
{this.renderClearNodeSelectButton()}
171+
{this.renderClearAnswersButton()}
172+
</div>
173+
);
96174
}
97175

98176
render() {
99177
return (
100178
<nav id="searchbar" className={styles.searchbar}>
101179
{this.renderNodeSelect()}
102-
<div className="mt-4">
103-
{this.renderSearchButton()}
104-
{this.renderClearAnswersButton()}
105-
</div>
106-
<div className="mt-4">{this.renderAnswers()}</div>
180+
{this.renderDistanceType()}
181+
{this.renderButtons()}
182+
{this.renderAnswers()}
107183
</nav>
108184
);
109185
}

‎src/constants.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@ export const NODE_COLOR = "#212121";
77
export const LINK_COLOR = "#424242";
88
export const ACTIVE_COLOR = "#1976D2";
99
export const FADE_COLOR = "#eeeeee";
10+
export const DANGER_COLOR = "#dc3545";
1011
export const COLORS = getRandomColors();

‎src/reducers/reducerUtils.js‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ import DijkstraSearch from "~/models/DijkstraSearch";
44
import {
55
SET_GRAPH,
66
SET_DISTANCE_TYPE,
7-
SET_FINISH,
8-
SET_START,
97
SET_ACTIVE_ITEM,
108
SET_SHOW_LINK_DOTS,
119
SET_SHOW_PROPERTIES,
@@ -15,8 +13,6 @@ import {
1513
export const ONE_FIELD_SETTERS = {
1614
[SET_GRAPH]: "graph",
1715
[SET_DISTANCE_TYPE]: "distanceType",
18-
[SET_START]: "start",
19-
[SET_FINISH]: "finish",
2016
[SET_ACTIVE_ITEM]: "activeItem",
2117
[SET_SHOW_LINK_DOTS]: "showLinkDots",
2218
[SET_SHOW_PROPERTIES]: "showProperties",
@@ -80,8 +76,6 @@ export const getInitialState = () => {
8076
return {
8177
graph,
8278
distanceType: DijkstraSearch.BY_LINK_LENGTH,
83-
start: null,
84-
finish: null,
8579
showLinkDots: true,
8680
showProperties: false,
8781
activeItem: null,

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /