Skip to content

Commit aa00d2a

Browse files
eran-pinhaseran-pinhas
committed
added layers server
removed unesed css refactor: loading indicator some warning removal
1 parent 37ae21f commit aa00d2a

File tree

13 files changed

+179
-58
lines changed

13 files changed

+179
-58
lines changed

‎src/App.css‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,6 @@
22
text-align: center;
33
}
44

5-
.App-logo {
6-
animation: App-logo-spin infinite 20s linear;
7-
height: 80px;
8-
}
9-
105
.App-header {
116
background-color: #222;
127
height: 150px;
@@ -22,15 +17,6 @@
2217
font-size: large;
2318
}
2419

25-
@keyframes App-logo-spin {
26-
from {
27-
transform: rotate(0deg);
28-
}
29-
to {
30-
transform: rotate(360deg);
31-
}
32-
}
33-
3420
.screen-left,
3521
.screen-right {
3622
position: relative;

‎src/components/Icons/Icons.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,37 @@ export function TextIcon({ className }) {
3535
</svg>
3636
);
3737
}
38+
39+
export function UploadIcon({ className }) {
40+
return (
41+
<svg
42+
className={className}
43+
xmlns="http://www.w3.org/2000/svg"
44+
version="1.1"
45+
viewBox="0 0 466.008 466.008"
46+
>
47+
<g>
48+
<g>
49+
<path d="M397.763,68.245C353.754,24.236,295.241,0,233.004,0S112.254,24.236,68.245,68.245C24.236,112.254,0,170.767,0,233.004 s24.236,120.75,68.245,164.759c44.009,44.009,102.521,68.245,164.759,68.245s120.75-24.236,164.759-68.245 c44.009-44.009,68.245-102.521,68.245-164.759S441.772,112.254,397.763,68.245z M335.984,212.008 c-2.322,5.605-7.791,9.26-13.858,9.26h-38.473v127.596c0,8.284-6.716,15-15,15h-71.298c-8.284,0-15-6.716-15-15V221.268h-38.474 c-6.067,0-11.536-3.654-13.858-9.26c-2.321-5.605-1.038-12.057,3.252-16.347l89.122-89.123c2.813-2.813,6.628-4.394,10.606-4.394 c3.978,0,7.794,1.58,10.606,4.394l89.122,89.123C337.022,199.951,338.306,206.402,335.984,212.008z" />
50+
</g>
51+
</g>
52+
</svg>
53+
);
54+
}
55+
56+
export function ConfirmIcon({ className }) {
57+
return (
58+
<svg
59+
className={className}
60+
xmlns="http://www.w3.org/2000/svg"
61+
version="1.1"
62+
viewBox="0 0 493.464 493.464"
63+
>
64+
<g>
65+
<g>
66+
<path d="M246.736,0C110.692,0,0.004,110.68,0.004,246.732c0,136.06,110.688,246.732,246.732,246.732 c136.048,0,246.724-110.672,246.724-246.732C493.456,110.68,382.78,0,246.736,0z M360.524,208.716L230.98,338.268 c-2.82,2.824-7.816,2.824-10.64,0l-86.908-86.912c-1.412-1.416-2.192-3.3-2.192-5.324c0.004-2.016,0.784-3.912,2.192-5.336 l11.108-11.104c1.412-1.408,3.3-2.18,5.328-2.18c2.016,0,3.908,0.772,5.316,2.18l67.752,67.752c1.5,1.516,3.94,1.516,5.444,0 l110.392-110.392c2.824-2.824,7.828-2.824,10.644,0l11.108,11.124c1.412,1.4,2.208,3.304,2.208,5.308 C362.732,205.412,361.936,207.3,360.524,208.716z" />
67+
</g>
68+
</g>
69+
</svg>
70+
);
71+
}

‎src/components/Layers/Layers.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
.layers {
2+
color: white;
23
position: fixed;
34
background-color: #888;
45
width: 300px;
@@ -7,3 +8,19 @@
78
bottom: 17px;
89
left: 17px;
910
}
11+
12+
.layers .svg-button {
13+
height: 40px;
14+
background-color: #3b5998;
15+
width: 90%;
16+
margin: 6px 5%;
17+
padding: 4px 0;
18+
border-radius: 3px;
19+
}
20+
21+
.layers .svg-button svg {
22+
fill: white;
23+
height: 100%;
24+
margin: 0 auto;
25+
display: block;
26+
}

‎src/components/Layers/Layers.js‎

Lines changed: 63 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import React, { Component } from "react";
22

33
import "./Layers.css";
4+
import { UploadFromFiles, UploadFromUrl } from "./RemoteStorage";
5+
import { ConfirmIcon, UploadIcon } from "../Icons/Icons";
6+
import LoadingIndicator from "../LoadingIndicator";
47

58
export default class Layers extends Component {
69
constructor(props) {
@@ -10,8 +13,8 @@ export default class Layers extends Component {
1013
layersList: []
1114
};
1215

13-
this.fetchLayersList = this.fetchLayersList.bind(this);
14-
this.addLayer = this.addLayer.bind(this);
16+
this.uploadFiles = this.uploadFiles.bind(this);
17+
this.chooseFiles = this.chooseFiles.bind(this);
1518
}
1619

1720
componentDidMount() {
@@ -31,28 +34,74 @@ export default class Layers extends Component {
3134
} catch (err) {
3235
layersList = [];
3336
}
34-
// console.log(localStorage.getItem('LayersList'));
3537
this.setState({ layersList: layersList });
3638
}
3739

38-
addLayer(id, url, name) {
39-
this.fetchLayersList();
40-
this.setState({
41-
layersList: this.state.layersList.concat({
42-
id: "404",
43-
url: "http://www.google.com",
44-
name: "saranga"
45-
})
40+
updateLayersList(layersList) {
41+
this.setState({ layersList });
42+
localStorage.setItem("LayersList", JSON.stringify(layersList));
43+
}
44+
45+
// addLayer(id, url, name) {
46+
// const layersList = this.state.layersList.concat({
47+
// id: "404",
48+
// url: "http://www.google.com",
49+
// name: "saranga"
50+
// });
51+
52+
// this.setState({
53+
// layersList
54+
// });
55+
// localStorage.setItem("LayersList", JSON.stringify(this.state.layersList));
56+
// }
57+
58+
addLayerFromUrl(url, name) {
59+
UploadFromUrl(url).then(id => {
60+
this.updateLayersList(this.state.layersList.concat({ id, name }));
4661
});
47-
localStorage.setItem("LayersList", JSON.stringify(this.state.layersList));
4862
}
4963

50-
getLayerData() {}
64+
chooseFiles() {
65+
this.setState({ isChoosingFiles: true });
66+
}
67+
68+
uploadFiles() {
69+
this.setState({ isChoosingFiles: false, isUploading: true });
70+
71+
const fileInputElement = document.getElementById("layersUpload");
72+
73+
UploadFromFiles(fileInputElement).then(layers => {
74+
this.updateLayersList(this.state.layersList.concat(layers));
75+
this.setState({isUploading: false});
76+
});
77+
}
5178

5279
render() {
80+
const { isChoosingFiles, isUploading } = this.state;
81+
82+
let UploadComponent;
83+
if (isUploading) {
84+
UploadComponent = <LoadingIndicator />;
85+
} else if (isChoosingFiles) {
86+
UploadComponent = (
87+
<div>
88+
<input id="layersUpload" type="file" name="files" multiple />
89+
<div className="svg-button" onClick={this.uploadFiles}>
90+
<ConfirmIcon />
91+
</div>
92+
</div>
93+
);
94+
} else {
95+
UploadComponent = (
96+
<div className="svg-button" onClick={this.chooseFiles}>
97+
<UploadIcon />
98+
</div>
99+
);
100+
}
101+
53102
return (
54103
<div className="layers">
55-
<button onClick={this.addLayer}>add layer</button>
104+
{UploadComponent}
56105
{this.state.layersList.map(layer => (
57106
<p>{layer.id}</p>
58107
))}

‎src/components/Layers/RemoteStorage.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import axios from "axios";
2+
import { layerServerPath } from "../../config";
3+
4+
export function GetLayerData(id) {
5+
return axios.get(`${layerServerPath}/layer/${id}`);
6+
}
7+
8+
export function UploadFromUrl(url) {
9+
return axios
10+
.post(`${layerServerPath}/api/urlUpload`, { url })
11+
.then(res => res.data.id);
12+
}
13+
14+
export function UploadFromFiles(element) {
15+
const formData = new FormData();
16+
17+
for (let i = 0; i < element.files.length; i += 1) {
18+
formData.append("files", element.files[i]);
19+
}
20+
21+
return axios
22+
.post(`${layerServerPath}/api/convertUpload`, formData, {
23+
headers: {
24+
"Content-Type": "multipart/form-data"
25+
}
26+
})
27+
.then(res => res.data.ids);
28+
}

‎src/components/LoadingIndicator/LoadingIndicator.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from "react";
2+
3+
import './style.css'
4+
5+
export default function({className}){
6+
return <div className="loading-indicator" />
7+
}

‎src/components/LoadingIndicator/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export {default} from './LoadingIndicator';

‎src/components/LoadingIndicator/style.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.loading-indicator {
2+
border: 6px solid #f3f3f3;
3+
border-top: 6px solid #3498db;
4+
border-radius: 50%;
5+
width: 50px;
6+
height: 50px;
7+
animation: spin 1.2s linear infinite;
8+
margin: 10px auto;
9+
}
10+
11+
@keyframes spin {
12+
0% {
13+
transform: rotate(0deg);
14+
}
15+
100% {
16+
transform: rotate(360deg);
17+
}
18+
}

‎src/components/ProcessForm/ProcessForm.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from "react";
22
import PropTypes from "prop-types";
3-
import _ from "lodash";
43
import Input from "./Input";
54
import { InputTypes } from "./ProcessFormUtils";
65

@@ -21,8 +20,6 @@ class ProcessForm extends React.Component {
2120
}
2221

2322
handleAddComplexData(layerId, i) {
24-
const values = layerId !== undefined ? [layerId] : [];
25-
2623
const identifier = this.props.inputs[i].id;
2724
let inputs = this.props.inputs.map(
2825
input =>
@@ -37,7 +34,7 @@ class ProcessForm extends React.Component {
3734
handleAddLiteralData(event) {
3835
const i = parseInt(event.currentTarget.id.replace("form-input-", ""));
3936
const identifier = this.props.inputs[i].id;
40-
const value = event.target.value;
37+
const { value } = event.target;
4138

4239
const values = value ? [value] : [];
4340
let inputs = this.props.inputs.map(

‎src/components/ToolsScreen/ToolsScreen.css‎

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,3 @@
11
.wps-tools {
22
margin: 2.5%;
3-
}
4-
5-
.wps-tools .loader {
6-
border: 6px solid #f3f3f3;
7-
border-top: 6px solid #3498db;
8-
border-radius: 50%;
9-
width: 50px;
10-
height: 50px;
11-
animation: spin 1.2s linear infinite;
12-
margin: 10px auto;
13-
}
14-
15-
@keyframes spin {
16-
0% {
17-
transform: rotate(0deg);
18-
}
19-
100% {
20-
transform: rotate(360deg);
21-
}
223
}

0 commit comments

Comments
 (0)