c80_map 0.1.0.2 → 0.1.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +19 -1
  3. data/app/assets/javascripts/buttons/admin_buttons/button_area_link.js +88 -0
  4. data/app/assets/javascripts/buttons/admin_buttons/button_back_to_map.js +2 -4
  5. data/app/assets/javascripts/buttons/admin_buttons/button_cancel_remove.js +23 -0
  6. data/app/assets/javascripts/buttons/admin_buttons/button_edit.js +16 -0
  7. data/app/assets/javascripts/buttons/admin_buttons/button_remove.js +23 -0
  8. data/app/assets/javascripts/buttons/admin_buttons/button_save.js +32 -4
  9. data/app/assets/javascripts/c80_map.js.coffee +4 -1
  10. data/app/assets/javascripts/map_objects/area.js +20 -9
  11. data/app/assets/javascripts/map_objects/building.js +2 -3
  12. data/app/assets/javascripts/src/main.js +74 -10
  13. data/app/assets/javascripts/src/state_controller.js +97 -23
  14. data/app/assets/javascripts/src/utils/map_utils.js +23 -0
  15. data/app/assets/javascripts/src/utils/opacity_buttons_utils.js +15 -0
  16. data/app/assets/javascripts/src/{utils.js → utils/utils.js} +13 -0
  17. data/app/assets/javascripts/svg_elements/area_label.js +25 -0
  18. data/app/assets/javascripts/svg_elements/polygon.js +3 -1
  19. data/app/assets/stylesheets/map.scss +148 -66
  20. data/app/assets/stylesheets/view/modal_window.scss +13 -0
  21. data/app/controllers/c80_map/map_ajax_controller.rb +5 -1
  22. data/app/models/c80_map/area.rb +1 -0
  23. data/app/models/c80_map/area_representator.rb +75 -0
  24. data/app/models/c80_map/map_json.rb +28 -14
  25. data/app/views/c80_map/_map_row_index.html.erb +1 -0
  26. data/app/views/c80_map/shared/_modal_window.html.erb +28 -0
  27. data/db/migrate/{20160620040202_create_c80_map_areas.rb → 20160620040225_create_c80_map_areas.rb} +4 -1
  28. data/lib/c80_map/version.rb +1 -1
  29. metadata +14 -5
  30. /data/db/migrate/{20160620040206_create_c80_map_buildings.rb → 20160620040217_create_c80_map_buildings.rb} +0 -0
@@ -7,14 +7,17 @@ function StateController() {
7
7
 
8
8
  _this.left_side = $("#left_side");
9
9
  _this.right_side = $("#right_side");
10
+ _this.remove_button = $('.mapplic-remove-button');
10
11
  _this.new_button = $('.mapplic-new-button');
11
12
  _this.mzoom_buttons = $('.mzoom_buttons');
12
13
  _this.map_creating = $('#map_creating');
13
14
  _this.map_editing = $('#map_editing');
15
+ _this.map_removing = $('#map_removing');
14
16
  _this.main_map = $('.main_map');
15
17
  _this.svg_overlay = $('#svg_overlay');
16
18
  _this.building_info = $('.building_info');
17
19
  _this.area_order_button = $('.area_order_button');
20
+ _this.edit_button = $('.mapplic-edit-button');
18
21
  _this.masked = $('#masked');
19
22
 
20
23
  _this.setMode = function (mode) {
@@ -36,6 +39,7 @@ function StateController() {
36
39
  _map.container.removeClass("viewing");
37
40
  _map.container.removeClass("editing");
38
41
  _map.container.removeClass("creating");
42
+ _map.container.removeClass("removing");
39
43
  _map.container.removeClass("view_building");
40
44
  _map.container.removeClass("edit_building");
41
45
  _map.container.removeClass("view_area");
@@ -48,11 +52,14 @@ function StateController() {
48
52
  _this.checkMode = function () {
49
53
 
50
54
  if (_this.new_button.length == 0) _this.new_button = $('.mapplic-new-button');
55
+ if (_this.remove_button.length == 0) _this.remove_button = $('.mapplic-remove-button');
56
+ if (_this.edit_button.length == 0) _this.edit_button = $('.mapplic-edit-button');
51
57
  if (_this.right_side.length == 0) _this.right_side = $('#right_side');
52
58
  if (_this.left_side.length == 0) _this.left_side = $('#left_side');
53
59
  if (_this.mzoom_buttons.length == 0) _this.mzoom_buttons = $('.mzoom_buttons');
54
60
  if (_this.map_creating.length == 0) _this.map_creating = $('#map_creating');
55
61
  if (_this.map_editing.length == 0) _this.map_editing = $('#map_editing');
62
+ if (_this.map_removing.length == 0) _this.map_removing = $('#map_removing');
56
63
  if (_this.main_map.length == 0) _this.main_map = $('.main_map');
57
64
  if (_this.svg_overlay.length == 0) _this.svg_overlay = $('#svg_overlay');
58
65
  if (_this.building_info.length == 0) _this.building_info = $('.building_info');
@@ -70,13 +77,16 @@ function StateController() {
70
77
  _this.right_side.css("top", -300);
71
78
 
72
79
  // покажем кнопку "добавить фигуру"
73
- _this.new_button.css('opacity', '1');
74
- _this.new_button.removeClass('mapplic-disabled');
80
+ OpacityButtonsUtils.show(_this.new_button);
75
81
  _map.new_button_klass.resetState();
76
82
 
83
+ // покажем кнопку "удалить фигуру"
84
+ OpacityButtonsUtils.show(_this.remove_button);
85
+
77
86
  // спрячем статусную область
78
87
  _this.map_creating.css('display', 'none');
79
88
  _this.map_editing.css('display', 'block');
89
+ _this.map_removing.css('display', 'none');
80
90
 
81
91
  // покажем кнопки, присущие этому режиму
82
92
  _this.mzoom_buttons.css('opacity', '1');
@@ -103,12 +113,14 @@ function StateController() {
103
113
  _this.left_side.css("top", _this.left_side.data('init'));
104
114
  _this.right_side.css("top", _this.right_side.data('init'));
105
115
 
106
- _this.new_button.css('opacity', '0');
107
- _this.new_button.addClass('mapplic-disabled');
116
+ OpacityButtonsUtils.hide(_this.new_button);
117
+ OpacityButtonsUtils.hide(_this.remove_button);
118
+
108
119
  _this.mzoom_buttons.css('opacity', '1');
109
120
 
110
121
  _this.map_creating.css('display', 'none');
111
122
  _this.map_editing.css('display', 'none');
123
+ _this.map_removing.css('display', 'none');
112
124
 
113
125
  _this.main_map.css('opacity', '1');
114
126
  _this.svg_overlay.css('display', 'none');
@@ -139,10 +151,29 @@ function StateController() {
139
151
  //_this.mzoom_buttons.css('opacity', '0');
140
152
  _this.map_creating.css('display', 'block');
141
153
  _this.map_editing.css('display', 'none');
154
+ _this.map_removing.css('display', 'none');
142
155
 
143
156
  _this.main_map.css('opacity', '1');
144
157
 
145
- break;
158
+ break;
159
+
160
+ // перешли в состояние удаления полигона
161
+ case "removing":
162
+ //_this.mzoom_buttons.css('opacity', '0');
163
+ _this.map_creating.css('display', 'none');
164
+ _this.map_editing.css('display', 'none');
165
+ _this.map_removing.css('display', 'block');
166
+
167
+ _this.main_map.css('opacity', '1');
168
+
169
+ _map.save_button_klass.hide();
170
+
171
+ // прячем кнопку "создать полигон"
172
+ OpacityButtonsUtils.hide(_this.new_button);
173
+ OpacityButtonsUtils.hide(_this.remove_button);
174
+ OpacityButtonsUtils.hide(_this.edit_button);
175
+
176
+ break;
146
177
 
147
178
  // вошли в здание
148
179
  case "view_building":
@@ -159,28 +190,20 @@ function StateController() {
159
190
 
160
191
  _this.area_order_button.css('display', 'none');
161
192
  _map.edit_button_klass.setState('view_building', true); // [a1x7]
162
- _map.current_building.resetOverlayZindex();
193
+ if (_map.current_building != undefined) _map.current_building.resetOverlayZindex();
163
194
  _map.save_button_klass.hide();
164
195
 
165
- break;
196
+ OpacityButtonsUtils.hide(_this.new_button);
197
+ OpacityButtonsUtils.hide(_this.remove_button);
198
+
199
+ _this.mzoom_buttons.css('opacity', '1');
166
200
 
167
- // вошли в площадь
168
- case "view_area":
169
- _map.back_to_map_button_klass.show();
170
- _this.masked.removeClass('hiddn');
171
- var t = _this.building_info.height() + _this.building_info.offset().top;
172
- var tt = _this.building_info.css("left");
173
- var tq = (_this.building_info.width() + 40) + "px";
174
- _this.area_order_button.css("top", t + "px");
175
- // _this.area_order_button.css("bottom","400px");
176
- _this.area_order_button.css("left", tt);
177
- _this.area_order_button.css("width", tq);
178
- _this.area_order_button.css('display', 'block');
179
- _map.edit_button_klass.setState('view_area', true); // [a1x7]
180
201
  break;
181
202
 
182
203
  // редактируем, находясь в здании
183
204
  case "edit_building":
205
+
206
+ // спрячем кнопку "обратно на карту"
184
207
  _map.back_to_map_button_klass.hide();
185
208
 
186
209
  // т.к. этот слой используется испключительно в помощь при рисовании обводки площадей
@@ -190,18 +213,24 @@ function StateController() {
190
213
  // заодно поменяем z-index слоёв с колоннами и слоя с svg
191
214
  // полигонами площадей, чтобы можно было добраться мышкой
192
215
  // до этих полигонов и редактировать их
193
- _map.current_building.changeOverlayZindex();
216
+ if (_map.current_building != undefined) _map.current_building.changeOverlayZindex();
194
217
 
195
218
  // покажем кнопку "добавить фигуру"
196
- _this.new_button.css('opacity', '1');
197
- _this.new_button.removeClass('mapplic-disabled');
219
+ OpacityButtonsUtils.show(_this.new_button);
198
220
  _map.new_button_klass.resetState();
199
221
 
222
+ // покажем кнопку "удалить фигуру"
223
+ OpacityButtonsUtils.show(_this.remove_button);
224
+
225
+ // покажем кнопку "ред"
226
+ OpacityButtonsUtils.show(_this.edit_button);
227
+
200
228
  // спрячем инфу о здании
201
229
  _this.building_info.css("top", -300);
202
230
 
203
231
  // спрячем статус строку "вы создаёте полигон"
204
232
  _this.map_creating.css('display', 'none');
233
+ _this.map_removing.css('display', 'none');
205
234
 
206
235
  // покажем, возможно спрятанные, zoom кнопки
207
236
  _this.mzoom_buttons.css('opacity', '1');
@@ -210,6 +239,51 @@ function StateController() {
210
239
  _map.save_button_klass.check_and_enable();
211
240
 
212
241
  break;
242
+
243
+ // вошли в площадь
244
+ case "view_area":
245
+ _map.back_to_map_button_klass.show();
246
+ _this.masked.removeClass('hiddn');
247
+ var t = _this.building_info.height() + _this.building_info.offset().top;
248
+ var tt = _this.building_info.css("left");
249
+ var tq = (_this.building_info.width() + 40) + "px";
250
+ _this.area_order_button.css("top", t + "px");
251
+ // _this.area_order_button.css("bottom","400px");
252
+ _this.area_order_button.css("left", tt);
253
+ _this.area_order_button.css("width", tq);
254
+ _this.area_order_button.css('display', 'block');
255
+ _map.edit_button_klass.setState('view_area', true); // [a1x7]
256
+
257
+ _map.area_link_button_klass.hide();
258
+
259
+ OpacityButtonsUtils.hide(_this.new_button);
260
+ OpacityButtonsUtils.hide(_this.remove_button);
261
+
262
+ _this.mzoom_buttons.css('opacity', '1');
263
+
264
+ break;
265
+
266
+ // начали редактировать площадь
267
+ case 'edit_area':
268
+
269
+ // спрячем кнопку "обратно на карту"
270
+ _map.back_to_map_button_klass.hide();
271
+
272
+ // покажем кнопку "связать площадь с полигоном"
273
+ _map.area_link_button_klass.show();
274
+
275
+ // покажем кнопку "сохранить изменения"
276
+ _map.save_button_klass.show();
277
+
278
+ // спрячем кнопку "создать полигон"
279
+ OpacityButtonsUtils.hide(_this.new_button);
280
+
281
+ // покажем кнопку "ред"
282
+ OpacityButtonsUtils.show(_this.edit_button);
283
+
284
+ _map.edit_button_klass.setState('edit_area', true); // [a1x7]
285
+
286
+ break;
213
287
  }
214
288
  };
215
289
 
@@ -0,0 +1,23 @@
1
+ var MapUtils = {
2
+
3
+ svgOverlayHideAllExcept: function ($g) {
4
+ if ($g != null) {
5
+ console.log("<MapUtils.svgOverlayHideAllExcept>");
6
+
7
+ // убираем у всех g из svg_overlay класс viewing_area
8
+ $g.parent().find('g').css('display','none');
9
+
10
+ // а редактируемому полигону добавим класс viewing_area
11
+ $g.css('display','block');
12
+ }
13
+
14
+ },
15
+
16
+ svgOverlayRestore: function ($g) {
17
+ if ($g != null) {
18
+ console.log("<MapUtils.svgOverlayRestore>");
19
+ $g.parent().find('g').css('display','block');
20
+ }
21
+ }
22
+
23
+ };
@@ -0,0 +1,15 @@
1
+ var OpacityButtonsUtils = {
2
+
3
+ hide: function ($button) {
4
+ $button.css('opacity', '0');
5
+ setTimeout(function () { $button.css('display', 'none'); }, 200); // see map.scss: %ebutton
6
+ $button.addClass('mapplic-disabled');
7
+ },
8
+
9
+ show: function ($button) {
10
+ $button.css('display', 'block');
11
+ $button.css('opacity', '1');
12
+ $button.removeClass('mapplic-disabled');
13
+ }
14
+
15
+ };
@@ -1,6 +1,19 @@
1
1
 
2
2
  var utils = {
3
3
 
4
+ // выдать из массива arr элемент с указанным id
5
+ getById: function (id,arr) {
6
+ var i;
7
+ var iel;
8
+ for (i=0; i<arr.length; i++) {
9
+ iel = arr[i];
10
+ if (iel.hasOwnProperty('id') && iel['id'] == id) {
11
+ return iel;
12
+ }
13
+ }
14
+ return null;
15
+ },
16
+
4
17
  offsetX: function (node) {
5
18
  var box = node.getBoundingClientRect(),
6
19
  scroll = window.pageXOffset;
@@ -0,0 +1,25 @@
1
+ var AreaLabel = function (options, link_to_map) {
2
+
3
+ if (options.area_hash != undefined && typeof options.area_hash.id != 'undefined') {
4
+
5
+ this._x = options.coords[0];
6
+ this._y = options.coords[1];
7
+ this._map = link_to_map;
8
+
9
+ // создадим узел, который будет помещён в дерево и будет виден пользователю
10
+ this._g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
11
+ this._text_element_ns = document.createElementNS('http://www.w3.org/2000/svg', 'text');
12
+ this._text_element_ns.setAttribute('x', this._x);
13
+ this._text_element_ns.setAttribute('y', this._y);
14
+ this._text_element_ns.setAttribute('fill', '#000000');
15
+ this._text_element_ns.setAttribute('style', 'font-size:12px;font-weight:bold;');
16
+ this._text_element_ns.textContent = "id="+options.area_hash.id + "; " + options.area_hash.title;
17
+
18
+ //
19
+ this._map.addNodeToSvg(this._g, true);
20
+ this._g.appendChild(this._text_element_ns);
21
+
22
+ }
23
+
24
+
25
+ };
@@ -156,12 +156,14 @@ Polygon.prototype.remove = function () {
156
156
  };
157
157
 
158
158
  Polygon.prototype.select = function () {
159
+ //console.log("<POLYGON.SELECT>");
159
160
  utils.addClass(this.polygon, 'selected');
160
161
 
161
162
  return this;
162
163
  };
163
164
 
164
165
  Polygon.prototype.deselect = function () {
166
+ //console.log("<POLYGON.DE-SELECT>");
165
167
  utils.removeClass(this.polygon, 'selected');
166
168
 
167
169
  return this;
@@ -169,7 +171,7 @@ Polygon.prototype.deselect = function () {
169
171
 
170
172
  Polygon.createFromSaved = function (params, is_overlay, self) {
171
173
  //console.log("<Polygon.createFromSaved>");
172
- console.log("<Polygon.createFromSaved> is_overlay = " + is_overlay);
174
+ //console.log("<Polygon.createFromSaved> is_overlay = " + is_overlay);
173
175
 
174
176
  var coords = params.coords,
175
177
  area = new Polygon(coords[0], coords[1], is_overlay, self);
@@ -101,13 +101,13 @@
101
101
  .overlay_layers img {
102
102
  z-index: 3;
103
103
  }
104
-
104
+
105
105
  #masked {
106
106
  position: absolute;
107
- top:0;
108
- left:0;
109
- right:0;
110
- bottom:0;
107
+ top: 0;
108
+ left: 0;
109
+ right: 0;
110
+ bottom: 0;
111
111
  background: transparent url(image_path('anim_lines.gif')) repeat 0 0;
112
112
  font-size: 300px;
113
113
  opacity: 0.4;
@@ -120,7 +120,7 @@
120
120
  display: none;
121
121
  }
122
122
  }
123
-
123
+
124
124
  }
125
125
 
126
126
  :-webkit-full-screen .mcontainer {
@@ -452,6 +452,7 @@
452
452
  border-top: none;
453
453
  background-color: #a10000;
454
454
  opacity: 0;
455
+ display: none;
455
456
 
456
457
  &:after {
457
458
  content: '+';
@@ -459,6 +460,19 @@
459
460
 
460
461
  }
461
462
 
463
+ &.mapplic-remove-button {
464
+ border-radius: 0 0 1px 1px;
465
+ border-top: none;
466
+ background-color: #a10000;
467
+ // opacity: 0;
468
+ display: none;
469
+
470
+ &:after {
471
+ content: '-';
472
+ }
473
+
474
+ }
475
+
462
476
  &.mapplic-save-button {
463
477
  border-radius: 0 0 1px 1px;
464
478
  border-top: none;
@@ -485,6 +499,32 @@
485
499
 
486
500
  }
487
501
 
502
+ &.mapplic-area-link-button {
503
+ border-radius: 0 0 1px 1px;
504
+ border-top: none;
505
+ background-color: #a10000;
506
+ border-bottom: 1px solid #14233C;
507
+ display: none;
508
+
509
+ &:after {
510
+ content: '\f044';
511
+ font-family: 'FontAwesome';
512
+ font-size: 21px;
513
+ font-weight: normal;
514
+ }
515
+
516
+ &:active, &:focus, &:hover {
517
+ background-color: #ba0000;
518
+ }
519
+
520
+ &.mapplic-disabled {
521
+ &:active, &:focus, &:hover {
522
+ background-color: #8f8f8f;
523
+ }
524
+ }
525
+
526
+ }
527
+
488
528
  &.mapplic-disabled {
489
529
  background-color: #8f8f8f;
490
530
  cursor: default;
@@ -1116,21 +1156,20 @@ g.mapplic-clickable:hover > * {
1116
1156
  cursor: pointer;
1117
1157
  }
1118
1158
 
1119
-
1120
1159
  .building_info {
1121
1160
  position: absolute;
1122
1161
  z-index: 5;
1123
- top:10px;
1162
+ top: 10px;
1124
1163
  padding: 20px;
1125
1164
  background-color: #ededed;
1126
1165
  display: none;
1127
1166
  font-size: 14px;
1128
1167
 
1129
- -webkit-transition: all 0.8s cubic-bezier(.25,.8,.25,1);
1130
- -moz-transition: all 0.8s cubic-bezier(.25,.8,.25,1);
1131
- transition: all 0.8s cubic-bezier(.25,.8,.25,1);
1168
+ -webkit-transition: all 0.8s cubic-bezier(.25, .8, .25, 1);
1169
+ -moz-transition: all 0.8s cubic-bezier(.25, .8, .25, 1);
1170
+ transition: all 0.8s cubic-bezier(.25, .8, .25, 1);
1132
1171
 
1133
- box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
1172
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1134
1173
 
1135
1174
  h2 {
1136
1175
  @include frankRegular(21px);
@@ -1168,8 +1207,6 @@ g.mapplic-clickable:hover > * {
1168
1207
  @include frankRegular(21px);
1169
1208
  }
1170
1209
 
1171
-
1172
-
1173
1210
  }
1174
1211
 
1175
1212
  .area_order_button {
@@ -1180,14 +1217,13 @@ g.mapplic-clickable:hover > * {
1180
1217
  display: none;
1181
1218
  font-size: 14px;
1182
1219
 
1183
-
1184
- -webkit-transition: all 0.8s cubic-bezier(.25,.8,.25,1);
1185
- -moz-transition: all 0.8s cubic-bezier(.25,.8,.25,1);
1186
- transition: all 0.8s cubic-bezier(.25,.8,.25,1);
1187
- box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
1220
+ -webkit-transition: all 0.8s cubic-bezier(.25, .8, .25, 1);
1221
+ -moz-transition: all 0.8s cubic-bezier(.25, .8, .25, 1);
1222
+ transition: all 0.8s cubic-bezier(.25, .8, .25, 1);
1223
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1188
1224
 
1189
1225
  > * {
1190
- float:left;
1226
+ float: left;
1191
1227
  }
1192
1228
 
1193
1229
  h5 {
@@ -1196,14 +1232,14 @@ g.mapplic-clickable:hover > * {
1196
1232
 
1197
1233
  ul {
1198
1234
  list-style: none;
1199
- margin:0;
1200
- padding:0;
1235
+ margin: 0;
1236
+ padding: 0;
1201
1237
  li {
1202
1238
  float: left;
1203
1239
  margin-right: 5px;
1204
1240
 
1205
1241
  div.checkbox:after {
1206
- top:8px;
1242
+ top: 8px;
1207
1243
  }
1208
1244
  }
1209
1245
  }
@@ -1239,67 +1275,101 @@ div#map_wrapper {
1239
1275
  display: none;
1240
1276
  cursor: pointer;
1241
1277
  &:hover {
1242
- fill:blue;
1278
+ fill: blue;
1243
1279
  stroke: red;
1244
1280
  }
1245
1281
  }
1246
1282
 
1247
1283
  polygon, polyline {
1248
- fill: rgba(255,255,255,0);
1249
- stroke: rgba(255,255,255,0);
1284
+ fill: rgba(255, 255, 255, 0);
1285
+ stroke: rgba(255, 255, 255, 0);
1250
1286
  cursor: pointer;
1251
1287
 
1252
1288
  &:hover, &.hover {
1253
- fill: rgba(255,255,255,0.5);
1254
- stroke: rgba(255,255,255,0.1);
1289
+ fill: rgba(255, 255, 255, 0.5);
1290
+ stroke: rgba(255, 255, 255, 0.1);
1255
1291
  }
1256
1292
 
1257
- -webkit-transition: stroke 0.6s, fill 0.4s;
1258
- -moz-transition: stroke 0.6s, fill 0.4s;
1259
- transition: stroke 0.6s, fill 0.4s;
1293
+ -webkit-transition: stroke 0.6s, fill 0.4s, opacity .8s ease-in;
1294
+ -moz-transition: stroke 0.6s, fill 0.4s, opacity .8s ease-in;
1295
+ transition: stroke 0.6s, fill 0.4s, opacity .8s ease-in;
1260
1296
 
1261
1297
  }
1262
1298
 
1263
- g.free {
1264
- polygon, polyline {
1265
- fill: rgba(0, 255, 19, 0.30);
1266
- stroke: rgba(51, 51, 51, 0.36);
1267
- cursor: pointer;
1299
+ g {
1300
+
1301
+ &.free {
1302
+ polygon, polyline {
1303
+ fill: rgba(0, 255, 19, 0.30);
1304
+ stroke: rgba(51, 51, 51, 0.36);
1305
+ cursor: pointer;
1306
+
1307
+ &:hover, &.hover {
1308
+ fill: rgba(0, 255, 19, 0.50);
1309
+ stroke: rgba(251, 251, 251, 0.86);
1310
+ }
1268
1311
 
1269
- &:hover, &.hover {
1270
- fill: rgba(0, 255, 19, 0.50);
1271
- stroke: rgba(251, 251, 251, 0.86);
1272
1312
  }
1313
+ }
1273
1314
 
1315
+ &.busy {
1316
+ polygon, polyline {
1317
+ fill: rgba(255, 4, 0, 0.30);
1318
+ stroke: rgba(255, 4, 0, 0.30);
1319
+ cursor: pointer;
1320
+
1321
+ &:hover, &.hover {
1322
+ fill: rgba(255, 4, 0, 0.40);
1323
+ stroke: rgba(251, 251, 251, 0.86);
1324
+ }
1325
+
1326
+ }
1274
1327
  }
1275
- }
1276
1328
 
1277
- g.busy {
1278
- polygon, polyline {
1279
- fill: rgba(255, 4, 0, 0.30);
1280
- stroke: rgba(255, 4, 0, 0.30);
1281
- cursor: pointer;
1329
+ &.unassigned {
1282
1330
 
1283
- &:hover, &.hover {
1284
- fill: rgba(255, 4, 0, 0.40);
1285
- stroke: rgba(251, 251, 251, 0.86);
1331
+ polygon, polyline {
1332
+ fill: rgba(131, 131, 131, 0.30);
1333
+ stroke: rgba(131, 131, 131, 0.40);
1334
+ cursor: pointer;
1335
+
1336
+ &:hover, &.hover {
1337
+ fill: rgba(131, 131, 131, 0.40);
1338
+ stroke: rgba(251, 251, 251, 0.86);
1339
+ }
1340
+ }
1341
+
1342
+ &.viewing_area {
1343
+ polygon, polyline {
1344
+ /*background: transparent url(image_path('loader_button.gif')) no-repeat 0 0;*/
1345
+ fill: rgba(131, 131, 131, 0.50);
1346
+ stroke: rgba(131, 131, 131, 0.60);
1347
+ stroke-width: 2px;
1348
+ stroke-dasharray: 10;
1349
+ animation: dash 555s linear;
1350
+
1351
+ &:hover, &.hover {
1352
+ fill: rgba(131, 131, 131, 0.70);
1353
+ stroke: rgba(251, 251, 251, 0.86);
1354
+ }
1355
+ }
1286
1356
  }
1287
1357
 
1288
1358
  }
1289
- }
1290
-
1291
- g.viewing_area {
1292
- polygon, polyline {
1293
- /*background: transparent url(image_path('loader_button.gif')) no-repeat 0 0;*/
1294
- fill: rgba(0, 255, 19, 0.10);
1295
- stroke: rgba(255, 246, 242, 0.59);
1296
- stroke-width: 2px;
1297
- stroke-dasharray: 10;
1298
- animation: dash 555s linear;
1299
-
1300
- &:hover,&.hover {
1301
- fill: rgba(0, 255, 19, 0.50);
1302
- stroke: rgba(255, 246, 242, 0.79);
1359
+
1360
+ &.viewing_area {
1361
+ polygon, polyline {
1362
+ /*background: transparent url(image_path('loader_button.gif')) no-repeat 0 0;*/
1363
+ fill: rgba(0, 255, 19, 0.10);
1364
+ stroke: rgba(255, 246, 242, 0.59);
1365
+ stroke-width: 2px;
1366
+ stroke-dasharray: 10;
1367
+ animation: dash 555s linear;
1368
+
1369
+ &:hover, &.hover {
1370
+ fill: rgba(0, 255, 19, 0.50);
1371
+ stroke: rgba(255, 246, 242, 0.79);
1372
+ }
1303
1373
  }
1304
1374
  }
1305
1375
  }
@@ -1320,8 +1390,8 @@ div#map_wrapper {
1320
1390
  }
1321
1391
 
1322
1392
  polygon, polyline {
1323
- fill: rgba(255,255,255,0);
1324
- stroke: rgba(255,255,255,0);
1393
+ fill: rgba(255, 255, 255, 0);
1394
+ stroke: rgba(255, 255, 255, 0);
1325
1395
  cursor: pointer;
1326
1396
  }
1327
1397
 
@@ -1376,6 +1446,18 @@ div#map_wrapper {
1376
1446
  }
1377
1447
  }
1378
1448
 
1449
+ // спрячем все полигоны, кроме редактируемого полигона
1450
+ &.edit_area {
1451
+ #svg {
1452
+ g {
1453
+ opacity: 0;
1454
+ &.viewing_area {
1455
+ opacity: 1.0;
1456
+ }
1457
+ }
1458
+ }
1459
+ }
1460
+
1379
1461
  &.creating {
1380
1462
  #svg {
1381
1463
 
@@ -1385,10 +1467,10 @@ div#map_wrapper {
1385
1467
 
1386
1468
  polygon, polyline {
1387
1469
  fill: rgba(255, 61, 0, 0.50);
1388
- stroke: rgba(255,255,255,0.8);
1470
+ stroke: rgba(255, 255, 255, 0.8);
1389
1471
  &:hover {
1390
1472
  fill: rgba(255, 4, 0, 0.70);
1391
- stroke: rgba(255,255,255,0.9);
1473
+ stroke: rgba(255, 255, 255, 0.9);
1392
1474
  }
1393
1475
  }
1394
1476