Skip to content

Commit 141fe79

Browse files
FireSpirit171FireSpirit171
committed
Add newRegion method
1 parent c74b011 commit 141fe79

File tree

4 files changed

+97
-29
lines changed

4 files changed

+97
-29
lines changed

‎src/components/JourneyMap/JourneyMap.hbs‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="journey-map">
2-
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny" id="svg2" x="0px" y="0px" width="950px" height="600px" viewBox="0 0 1090 620" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace">
2+
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny" id="svg2" x="0px" y="0px" width="950px" viewBox="0 0 1090 620" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace">
33
<path d="m 130.24729,259.26463 -0.71301,-1.3323 -0.83965,1.13893 -1.20312,0.61639 -0.3652,1.98343 -2.7566,-1.20341 -1.29507,1.2557 -1.79887,-1.96928 -0.51738,2.08913 -1.70104,0.51357 0.48353,2.36036 1.41813,-1.06374 1.07846,1.34199 2.31013,-0.11587 0.63117,-1.4221 0.77636,1.28888 1.63087,-0.86752 1.60105,1.08107 2.52028,-0.21377 0.38854,-1.63667 -0.76508,-2.45949 0.30997,-0.96605 c -0.75062,0.0982 -0.83803,-0.13605 -1.19347,-0.41925 z" stroke="#888888" stroke-width="0.5" id="RU-MOW"></path>
44
<path d="m 136.30673,181.67516 -2.95955,-0.98651 -3.94605,0.98651 -0.98652,3.94606 0.98652,2.95954 3.94605,1.97303 2.95955,-1.97303 1.97302,-2.95954 -1.97302,-3.94606 z" stroke="#888888" stroke-width="0.5" id="RU-SPE"></path>
55
<path d="m 305.00066,165.89094 -4.93257,0 -3.94605,3.94605 0.98651,3.94606 4.93257,0.98651 0.98652,0 0.98651,-0.98651 0.98651,0 0,0 0.98652,-0.98651 0,0.98651 0,0 -0.98652,0.98651 0,0 0.98652,0 0.98651,-0.98651 0,-3.94606 -1.97303,-3.94605 z m 45.37966,22.68982 1.97303,0.98652 0,0.98651 0,0.98652 0,0.98651 2.95954,1.97303 1.97303,-2.95954 -0.98652,-2.95955 -0.98651,-2.95954 0,0 0,-1.97303 -0.98651,-1.97303 -1.97303,0 0,1.97303 -0.98652,0 -0.98651,0 0,4.93257 z m -27.6224,-0.98651 -2.95954,-0.98651 -3.94606,-0.98652 -4.93257,0.98652 0,0 0.98651,0.98651 0,1.97303 -1.97303,0 -0.98651,-0.98652 0,-0.98651 0.98651,-0.98651 -2.95954,-0.98652 -2.95954,0 -0.98651,0 -0.98652,-0.98651 -5.91908,0.98651 -5.91909,-0.98651 -0.98651,-0.98652 0,-0.98651 0,0.98651 0,0 0,0.98652 -0.98652,0 0,0.98651 0,1.97303 0,0 -0.98651,-1.97303 -1.97303,-0.98651 -0.98652,-0.98652 -3.94605,2.95955 -3.94606,3.94605 -4.93257,-1.97303 -3.94606,-2.95954 0.98652,-2.95954 0.98651,-1.97303 -0.98651,-1.97303 -0.98652,-1.97303 3.94606,-1.97303 2.95954,-0.98651 4.93257,2.95954 0.98652,-0.98651 0.98651,-0.98652 0,-0.98651 0.98652,0 0,-2.95954 0,-2.95955 -2.95955,-3.94605 -3.94605,-2.95955 -0.98652,-2.95954 -0.98651,-0.98651 0,2.95954 0,4.93257 -5.91909,4.93257 -4.93257,3.94606 0,2.95954 0,2.95955 -3.94606,2.95954 -1.97302,1.97303 0,0.98651 0,1.97303 3.94605,5.91908 2.95954,5.91909 0.98652,1.97303 0.98651,0.98651 0,0.98652 1.97303,0 0,0 0,-0.98652 1.97303,-0.98651 1.97303,0 1.97303,0.98651 1.97303,1.97303 0,0 6.9056,0 7.89211,0.98652 1.97303,-0.98652 0.98651,-0.98651 0.98652,0.98651 0,0.98652 1.97303,-0.98652 1.97302,0 4.93258,3.94606 5.91908,4.93257 29.59543,17.75726 0.98651,0.98651 0.98652,0.98652 5.91908,-0.98652 6.9056,-1.97303 0,-0.98651 0.98652,-1.97303 0.98651,0.98651 0.98651,0 1.97303,-0.98651 1.97303,-0.98651 1.97303,-0.98652 1.97303,-0.98651 0.98651,-0.98652 0.98652,0 0.98651,0 1.97303,0.98652 1.97303,-2.95955 0,-1.97302 -0.98652,-0.98652 -1.97302,-2.95954 0.98651,-0.98652 0.98651,-0.98651 1.97303,-1.97303 0,-1.97303 -2.95954,-4.93257 -3.94606,-3.94606 -4.93257,-3.94605 -0.98651,-0.98652 -0.98652,-0.98651 -0.98651,0.98651 -0.98652,0.98652 0,0 -0.98651,-0.98652 -0.98651,0 -0.98652,0.98652 0,5.91908 -0.98651,5.91909 0,0 0,0 -0.98652,-0.98652 -0.98651,0 -1.97303,0.98652 -1.97303,-0.98652 -0.98651,0 -0.98652,1.97303 -2.95954,0.98652 -0.98651,-1.97303 0.98651,-1.97303 1.97303,-0.98651 0.98651,0 0,-1.97303 -0.98651,-1.97303 0.98651,0 -6.9056,-0.98652 -5.91908,0.98652 -1.97303,-2.95954 -5.91909,-1.97303 -3.94605,0.98651 0,0.98652 -0.98652,0.98651 -0.98651,-1.97303 -1.97303,0 -0.98651,0.98652 -0.98652,0 0,0 0.98652,-0.98652 0,-0.98651 0,-0.98652 -1.97303,-0.98651 -1.97303,0 0.98651,-0.98652 0,-0.98651 0.98652,0 0.98651,0 1.97303,0.98651 0.98651,-1.97302 0.98652,-1.97303 0.98651,0 0.98652,-0.98652 0,-0.98651 -0.98652,0 1.97303,0 1.97303,0 0,0 z" stroke="#888888" stroke-width="0.5" id="RU-NEN"></path>
@@ -88,24 +88,26 @@
8888
</svg>
8989

9090
<div class="journey-map__action-container">
91-
<div class="journey-map__dates">
91+
<div class="journey-map__date-container">
92+
<label for="visit-date">Начало поездки</label>
9293
<input
9394
id="visit-date"
9495
name="visit-date"
95-
class="journey-map__dates__date"
96+
class="journey-map__date"
9697
type="date"
9798
min="1900-01-01"
9899
/>
100+
</div>
101+
<div class="journey-map__date-container">
102+
<label for="leave-date">Конец поездки</label>
99103
<input
100104
id="leave-date"
101105
name="leave-date"
102-
class="journey-map__dates__date"
106+
class="journey-map__date"
103107
type="date"
104108
min="1900-01-01"
105109
/>
106110
</div>
107-
<div class="journey-map__button">
108-
<button class="journey-map__button__save">Сохранить</button>
109-
</div>
111+
<button class="journey-map__save-button js-add-region">Сохранить</button>
110112
</div>
111113
</div>

‎src/components/JourneyMap/JourneyMap.sass‎

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,47 @@
33
.journey-map
44
height: 100%
55

6+
button
7+
@include mixins.button
8+
69
svg
710
width:100%
811
margin-left: 3%
12+
margin-top: 20px
913

1014
path
1115
fill: rgba(0, 0, 0, 0.2)
16+
cursor: pointer
1217

1318
&__action-container
1419
display: flex
1520
flex-direction: row
16-
justify-content: center
17-
gap: 30px
21+
justify-content: space-evenly
1822

19-
&__dates
20-
display: flex
21-
flex-direction: row
22-
gap: 30px
23-
width: 40%
24-
25-
&__date
26-
width: 50%
27-
min-width: 150px
28-
23+
&__date-container
24+
position: relative
25+
width: 30%
26+
27+
label
28+
position: absolute
29+
top: -10px
30+
left: 10px
31+
background: #fff
32+
font-size: 14px
33+
34+
input
35+
padding-left: 20px
2936

30-
&__button
31-
button
32-
@include mixins.button
33-
34-
&__save
35-
background-color: #4daf7c !important
36-
color: white
37-
37+
&__date
38+
width: 100%
39+
min-width: 150px
40+
41+
&__save-button
42+
background-color: #4daf7c !important
43+
color: white
44+
45+
.region-choose
46+
fill: #f5cb42 !important
3847

3948
.region-hover
4049
fill: #f5cb42 !important

‎src/components/JourneyMap/JourneyMap.ts‎

Lines changed: 48 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
'use strict';
22

3-
import path from "path";
3+
import PopupAlert from "../PopupAlert/PopupAlert";
4+
import ApiClient from "../../modules/ApiClient";
45

56
const idAarr = [
67
"RU-MOW",
@@ -179,20 +180,65 @@ const idAarr2 = {
179180
};
180181

181182
class JourneyMap {
183+
#choosenRegion: SVGPathElement | null;
182184

183-
constructor() {}
185+
constructor() {
186+
this.#choosenRegion = null;
187+
}
188+
189+
#submitEventLIstener() {
190+
const submitButton = (document
191+
.querySelector('.js-add-region') as HTMLButtonElement);
192+
193+
submitButton.onclick = async () => {
194+
if (this.#choosenRegion) {
195+
const startDate = (document
196+
.getElementById('visit-date') as HTMLInputElement)
197+
.value
198+
const finishDate = (document
199+
.getElementById('leave-date') as HTMLInputElement)
200+
.value
201+
202+
await ApiClient.addNewRegion(this.#choosenRegion.id, startDate, finishDate)
203+
} else {
204+
const errorMessage = PopupAlert('Выберите регион');
205+
document
206+
.querySelector('.page-container')
207+
?.appendChild(errorMessage);
208+
}
209+
}
210+
}
184211

185212
#addEventListeners() {
186213
const regions = document.getElementsByTagName('path');
187214
for (let i = 0; i < regions.length; i++) {
188215
const region = regions[i];
216+
217+
// Желтый при наведении
189218
region.addEventListener('mouseover', () => {
190219
region.classList.add('region-hover');
191220
});
192221
region.addEventListener('mouseout', () => {
193222
region.classList.remove('region-hover');
194223
});
224+
225+
// Желтый фиксированно при клике
226+
region.addEventListener('click', () => {
227+
if (region.classList.contains('region-choose')) {
228+
region.classList.remove('region-choose');
229+
this.#choosenRegion = null;
230+
} else {
231+
region.classList.add('region-choose');
232+
if (this.#choosenRegion) {
233+
this.#choosenRegion.classList.remove('region-choose');
234+
}
235+
this.#choosenRegion = region;
236+
console.log(region.id);
237+
}
238+
});
195239
}
240+
241+
this.#submitEventLIstener();
196242
}
197243

198244
render(parent: HTMLDivElement) {

‎src/modules/ApiClient.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -266,6 +266,17 @@ class APIClient {
266266
},
267267
});
268268
}
269+
270+
async addNewRegion(name: string, firstDate: string, secondDate: string) {
271+
const url = this.BASE_URL + `/users/regions`;
272+
const body = {
273+
regionName: name,
274+
startVisitedDate: firstDate,
275+
endVisitedDate: secondDate
276+
}
277+
278+
return Ajax.post({url, body})
279+
}
269280
}
270281

271282
export default new APIClient();

0 commit comments

Comments
 (0)