Компоненты загружают данные асинхронно Добавлен прелоадер компонентам Исправлены ошибки и доработан дизайн компонентовremotes/origin/PR-39
booblegum
9 years ago
parent
8de0f08d0c
commit
9047b08bdf
28 changed files with 885 additions and 586 deletions
@ -1,16 +0,0 @@ |
||||
body { |
||||
font-size: 11pt; |
||||
font-family: Arial-MT-Regular, Arial, sans-serif; |
||||
} |
||||
|
||||
/*input[type="checkbox"] + span, input[type="checkbox"]:checked + span {*/ |
||||
/*all: initial;*/ |
||||
/*font-size: 9pt;*/ |
||||
/*color: #494546;*/ |
||||
/*cursor: pointer;*/ |
||||
/*font-family: Arial-MT-Regular, Arial, sans-serif;*/ |
||||
/*}*/ |
||||
|
||||
/*label {*/ |
||||
/*all: initial;*/ |
||||
/*}*/ |
||||
@ -1,73 +0,0 @@ |
||||
/*DEMO*/ |
||||
.wrapper { |
||||
background-color: #f2f2f2; |
||||
padding: 40px; |
||||
margin: 50px 30px; |
||||
} |
||||
|
||||
.form-container { |
||||
padding: 50px 45px; |
||||
} |
||||
|
||||
.separator { |
||||
margin-top: 35px; |
||||
margin-bottom: 5px; |
||||
} |
||||
|
||||
.custom-check{ |
||||
cursor: pointer; |
||||
display: inline-block |
||||
} |
||||
|
||||
.custom-check .checked{ |
||||
background: url("../img/rect01.png") no-repeat center; |
||||
background-size: 210px 51px; |
||||
width: 210px; |
||||
height: 51px; |
||||
} |
||||
|
||||
.custom-check .not-checked { |
||||
background: url("../img/rect02.png") no-repeat center; |
||||
background-size: 210px 51px; |
||||
width: 210px; |
||||
height: 51px; |
||||
} |
||||
|
||||
.titleResF1, div p.titleResF1 { |
||||
font-size: 12pt; |
||||
} |
||||
|
||||
.border:after { |
||||
background-color: #CFCFCF; |
||||
content: ""; |
||||
display: inline-block; |
||||
height: 1px; |
||||
position: relative; |
||||
vertical-align: middle; |
||||
width: 100%; |
||||
} |
||||
|
||||
.border:after { |
||||
left: 0.5em; |
||||
margin-right: -100%; |
||||
} |
||||
|
||||
#page-preloader { |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
background: #090909; |
||||
z-index: 100500; |
||||
} |
||||
|
||||
#page-preloader .spinner { |
||||
width: 32px; |
||||
height: 32px; |
||||
position: absolute; |
||||
left: 50%; |
||||
top: 50%; |
||||
background: url('../img/ajax-loader.gif') no-repeat 50% 50%; |
||||
margin: -16px 0 0 -16px; |
||||
} |
||||
|
Before Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 183 KiB |
@ -0,0 +1,82 @@ |
||||
// `
|
||||
import DataTree from './data/DataTree' |
||||
const tmpl_selectBoxEditCont = () =>` |
||||
<div class="row"> |
||||
<div class="col-lg-3"> |
||||
<div id="component-preloader"><span class="spinner"></span></div> |
||||
<input disabled class="select-box-search" type="text" placeholder="Выберите/Поиск"> |
||||
</div> |
||||
<div class="col-lg-9"> |
||||
</div> |
||||
</div> |
||||
`;
|
||||
const tmpl_plug = ({header, selectBox}) => |
||||
` |
||||
<div class="select-box-container"> |
||||
<div class="select-box-header"> |
||||
<div class="header">${header}</div> |
||||
<i class="fa fa-question-circle-o" aria-hidden="true" title="bla-bla-bla..."></i> |
||||
</div> |
||||
<div class="select-box-search"> |
||||
${selectBox} |
||||
</div> |
||||
</div> |
||||
`;
|
||||
|
||||
export default class TreeSelectPreload { |
||||
constructor($container, {url}) { |
||||
let template = this.getTemplate(); |
||||
$container.html(template); |
||||
this.$preloader = $container.find('#component-preloader'); |
||||
this.$spinner = this.$preloader.find('.spinner'); |
||||
this.getData(url) |
||||
} |
||||
|
||||
hidePreloader() { |
||||
// console.log("hide preloader ", this.$preloader);
|
||||
this.$spinner.fadeOut(); |
||||
this.$preloader.delay(350).fadeOut('slow'); |
||||
} |
||||
|
||||
getData(url, data = {}) { |
||||
const self = this; |
||||
$.ajax({ |
||||
url: url, |
||||
dataType: 'json', |
||||
data: data, |
||||
success: self._buildComponents.bind(self), |
||||
error: self._onLoadDataError.bind(self), |
||||
}); |
||||
} |
||||
|
||||
getTemplate() { |
||||
let selectBox = tmpl_selectBoxEditCont(); |
||||
return tmpl_plug({header: "TestHeader", selectBox}) |
||||
} |
||||
|
||||
_buildComponents(data) { |
||||
console.log("loading data =", data); |
||||
// console.log("this =", this);
|
||||
this.hidePreloader(); |
||||
// this.$selectBox = $(`#${this.containerId}`);
|
||||
// this.$header = this.$selectBox.find('.select-box-header .header');
|
||||
// this.$resultsBox = this.$selectBox.find('.select-box-results');
|
||||
// this.$optionsBox = this.$selectBox.find('.select-box-options');
|
||||
// this.$searchInput = this.$selectBox.find('input.select-box-search');
|
||||
// this.$editableContainer = this.$selectBox.find('.editable-container');
|
||||
// this._fillOptionsData();
|
||||
// this.$resultsBox.hide();
|
||||
// this.$optionsBox.hide();
|
||||
// this.$buttonAddOptions.hide();
|
||||
} |
||||
|
||||
_fillOptionsData() { |
||||
|
||||
} |
||||
|
||||
_onLoadDataError(error) { |
||||
console.log("Error loading data -->", error); |
||||
} |
||||
|
||||
|
||||
} |
||||
@ -0,0 +1,89 @@ |
||||
// `
|
||||
import SelectedContainer from './SelectedContainer'; |
||||
import NoTreeSelect from './NoTreeSelect'; |
||||
import TreeSelect from './TreeSelect'; |
||||
|
||||
$(function () { |
||||
function createFilterSpecs(url) { |
||||
// SPECIALIZATIONS FILTER
|
||||
let sb_main = new TreeSelect($('#select-box-1'), {url, hasEditableContainer: true}); |
||||
sb_main.setHeader("Специализации"); |
||||
let select_container = new SelectedContainer($('#selected-spec'), {obj: sb_main}); |
||||
sb_main.connectSelectedContainer(select_container); |
||||
let sb_1 = new TreeSelect($('#select-box-2'), {obj: sb_main}); |
||||
let sb_2 = new TreeSelect($('#select-box-3'), {obj: sb_main}); |
||||
let sb_3 = new TreeSelect($('#select-box-4'), {obj: sb_main}); |
||||
let sb_4 = new TreeSelect($('#select-box-5'), {obj: sb_main}); |
||||
// let sb_2 = new TreeSelect({$container: $('#select-box-3'), data: data});
|
||||
// let sb_3 = new TreeSelect({$container: $('#select-box-4'), data: data});
|
||||
// let sb_4 = new TreeSelect({$container: $('#select-box-5'), data: data});
|
||||
|
||||
sb_main.setNearbySelectBox(sb_1); |
||||
sb_1.setNearbySelectBox(sb_2, sb_main); |
||||
sb_2.setNearbySelectBox(sb_3, sb_1); |
||||
sb_3.setNearbySelectBox(sb_4, sb_2); |
||||
sb_4.setNearbySelectBox("", sb_3); |
||||
|
||||
} |
||||
|
||||
function createFilterBuildingClass(url) { |
||||
// BUILDING-CLASSIFICATION FILTER
|
||||
let sb_build_main = new TreeSelect($('#sb-building-classification'), {url, visible:true}); |
||||
sb_build_main.setHeader("Классификация здания"); |
||||
|
||||
let sb_build_1 = new TreeSelect($('#sb-building-sub-classification'), {obj: sb_build_main}); |
||||
|
||||
let select_build_container = new SelectedContainer($('#selected-building-classification'), {obj: sb_build_main}); |
||||
sb_build_main.connectSelectedContainer(select_build_container); |
||||
|
||||
sb_build_main.setNearbySelectBox(sb_build_1); |
||||
sb_build_1.setNearbySelectBox("", sb_build_main); |
||||
} |
||||
|
||||
function createFilterConstructionType(url) { |
||||
let sb_constr_main = new NoTreeSelect($('#sb-construction-type'), {url, visible:true}); |
||||
sb_constr_main.setHeader("Вид строительства"); |
||||
let select_constr_type = new SelectedContainer($('#selected-construction-type'), {obj:sb_constr_main, noTree: true}); |
||||
sb_constr_main.connectSelectedContainer(select_constr_type); |
||||
} |
||||
|
||||
function createFilerLocations(url) { |
||||
let sb_loc_main = new TreeSelect($('#sb-location-1'), {url, visible:true}); |
||||
sb_loc_main.setHeader("Местоположение"); |
||||
let select_loc = new SelectedContainer($('#selected-location'), {obj: sb_loc_main}); |
||||
sb_loc_main.connectSelectedContainer(select_loc); |
||||
let sb_loc_1 = new TreeSelect($('#sb-location-2'), {obj: sb_loc_main}); |
||||
let sb_loc_2 = new TreeSelect($('#sb-location-3'), {obj: sb_loc_main}); |
||||
|
||||
sb_loc_main.setNearbySelectBox(sb_loc_1); |
||||
sb_loc_1.setNearbySelectBox(sb_loc_2, sb_loc_main); |
||||
sb_loc_2.setNearbySelectBox("", sb_loc_1); |
||||
|
||||
} |
||||
|
||||
createFilterSpecs('/api/specializations_flat'); |
||||
createFilterBuildingClass('/api/building_classifications'); |
||||
createFilterConstructionType('/api/construction_type'); |
||||
createFilerLocations('/api/locations_flat'); |
||||
|
||||
// let data = [];
|
||||
|
||||
// function fullData(_data) {
|
||||
// data = data.concat(_data.results.length ? _data.results : []);
|
||||
// let url = _data.next;
|
||||
// if (url) {
|
||||
// $.ajax({
|
||||
// url: url,
|
||||
// dataType: 'json',
|
||||
// data: {},
|
||||
// success: fullData
|
||||
// });
|
||||
// } else {
|
||||
// createFilerLocations(data);
|
||||
// }
|
||||
// return data;
|
||||
// }
|
||||
//
|
||||
// fullData({next: '/api/locations_flat', results: []});
|
||||
|
||||
}); |
||||
@ -0,0 +1,59 @@ |
||||
import SelectedContainer from './SelectedContainer'; |
||||
import NoTreeSelect from './NoTreeSelect'; |
||||
import TreeSelect from './TreeSelect'; |
||||
import TreeSelectPreload from './TreeSelectPreload'; |
||||
|
||||
$(function () { |
||||
const url_root = "http://127.0.0.1:8000"; |
||||
|
||||
let sb_main = new TreeSelect($('#select-box-1'), |
||||
{url: url_root + '/api/specializations_flat/', hasEditableContainer: true}); |
||||
sb_main.setHeader("Специализации"); |
||||
let select_container = new SelectedContainer($('#selected-spec'), {obj: sb_main}); |
||||
//
|
||||
sb_main.connectSelectedContainer(select_container); |
||||
|
||||
let sb_1 = new TreeSelect($('#select-box-2'), {obj: sb_main}); |
||||
let sb_2 = new TreeSelect($('#select-box-3'), {obj: sb_main}); |
||||
let sb_3 = new TreeSelect($('#select-box-4'), {obj: sb_main}); |
||||
let sb_4 = new TreeSelect($('#select-box-5'), {obj: sb_main}); |
||||
// let sb_2 = new TreeSelect({$container: $('#select-box-3'), data: data});
|
||||
// let sb_3 = new TreeSelect({$container: $('#select-box-4'), data: data});
|
||||
// let sb_4 = new TreeSelect({$container: $('#select-box-5'), data: data});
|
||||
|
||||
sb_main.setNearbySelectBox(sb_1); |
||||
sb_1.setNearbySelectBox(sb_2, sb_main); |
||||
sb_2.setNearbySelectBox(sb_3, sb_1); |
||||
sb_3.setNearbySelectBox(sb_4, sb_2); |
||||
sb_4.setNearbySelectBox("", sb_3); |
||||
|
||||
let building_classification = new NoTreeSelect($('#construction-type'), |
||||
{url: url_root + '/api/construction_type/'}); |
||||
building_classification.setHeader('Классификация'); |
||||
let select_ct = new SelectedContainer($('#select-construction-type'), {obj: building_classification, noTree: true}); |
||||
building_classification.connectSelectedContainer(select_ct); |
||||
|
||||
function tuneCheckBoxes($boxes) { |
||||
let currentState = $boxes.find("input").prop("checked") ? 'checked' : 'not-checked'; |
||||
|
||||
$boxes.find("div").hide(); |
||||
$boxes.find("div." + currentState).show(); |
||||
} |
||||
|
||||
//PRELOAD-BOX
|
||||
let pr_1 = new TreeSelect($('#preload-1'), {url: url_root + '/api/locations_flat', visible: true}); |
||||
let pr_2 = new TreeSelect($('#preload-2'), {url: url_root + '/api/locations_flat'}); |
||||
let pr_3 = new TreeSelect($('#preload-3'), {url: url_root + '/api/locations_flat'}); |
||||
|
||||
// CUSTOM CHECK-BOX
|
||||
let $boxes = $('.custom-check'); |
||||
tuneCheckBoxes($boxes); |
||||
$boxes.on("click", function (e) { |
||||
let inside_checkBox = $(e.target).parent().find("input"); |
||||
inside_checkBox.prop("checked", !inside_checkBox.prop("checked")); |
||||
tuneCheckBoxes($boxes); |
||||
e.preventDefault(); |
||||
return false; |
||||
}); |
||||
|
||||
}); |
||||
@ -1,144 +0,0 @@ |
||||
import SelectedContainer from './SelectedContainer'; |
||||
import NoTreeSelect from './NoTreeSelect'; |
||||
import TreeSelect from './TreeSelect'; |
||||
|
||||
// `
|
||||
|
||||
$(function () { |
||||
function createFilterSpecs(_data) { |
||||
// SPECIALIZATIONS FILTER
|
||||
let data = _data.results; |
||||
let sb_main = new TreeSelect({$container: $('#select-box-1'), data: data, hasEditableContainer: true}); |
||||
sb_main.setHeader("Специализации"); |
||||
let select_container = new SelectedContainer($('#selected-spec'), data); |
||||
sb_main.connectSelectedContainer(select_container); |
||||
let sb_1 = new TreeSelect({$container: $('#select-box-2'), data: data}); |
||||
let sb_2 = new TreeSelect({$container: $('#select-box-3'), data: data}); |
||||
let sb_3 = new TreeSelect({$container: $('#select-box-4'), data: data}); |
||||
let sb_4 = new TreeSelect({$container: $('#select-box-5'), data: data}); |
||||
|
||||
sb_main.setNearbySelectBox(sb_1); |
||||
sb_1.setNearbySelectBox(sb_2, sb_main); |
||||
sb_2.setNearbySelectBox(sb_3, sb_1); |
||||
sb_3.setNearbySelectBox(sb_4, sb_2); |
||||
sb_4.setNearbySelectBox("", sb_3); |
||||
|
||||
} |
||||
|
||||
function createFilterBuildingClass(_data) { |
||||
// BUILDING-CLASSIFICATION FILTER
|
||||
let data = _data.results; |
||||
let sb_build_main = new TreeSelect({$container: $('#sb-building-classification'), data: data}); |
||||
sb_build_main.setHeader("Классификация здания"); |
||||
|
||||
let sb_build_1 = new TreeSelect({$container: $('#sb-building-sub-classification'), data: data}); |
||||
|
||||
let select_build_container = new SelectedContainer($('#selected-building-classification'), data); |
||||
sb_build_main.connectSelectedContainer(select_build_container); |
||||
|
||||
sb_build_main.setNearbySelectBox(sb_build_1); |
||||
sb_build_1.setNearbySelectBox("", sb_build_main); |
||||
} |
||||
|
||||
function createFilterConstructionType(_data) { |
||||
let data = _data.results; |
||||
let sb_constr_main = new NoTreeSelect({$container: $('#sb-construction-type'), data: data}); |
||||
sb_constr_main.setHeader("Вид строительства"); |
||||
let select_constr_type = new SelectedContainer($('#selected-construction-type'), data, true); |
||||
sb_constr_main.connectSelectedContainer(select_constr_type); |
||||
} |
||||
|
||||
function createFilerLocations(data) { |
||||
let sb_loc_main = new TreeSelect({$container: $('#sb-location-1'), data: data}); |
||||
sb_loc_main.setHeader("Местоположение"); |
||||
let select_loc = new SelectedContainer($('#selected-location'), data); |
||||
sb_loc_main.connectSelectedContainer(select_loc); |
||||
let sb_loc_1 = new TreeSelect({$container: $('#sb-location-2'), data: data}); |
||||
let sb_loc_2 = new TreeSelect({$container: $('#sb-location-3'), data: data}); |
||||
|
||||
sb_loc_main.setNearbySelectBox(sb_loc_1); |
||||
sb_loc_1.setNearbySelectBox(sb_loc_2, sb_loc_main); |
||||
sb_loc_2.setNearbySelectBox("", sb_loc_1); |
||||
//TODO: Временно прелоадер на самом тяжелом объекте
|
||||
// hidePreloader()
|
||||
|
||||
} |
||||
|
||||
$.ajax({ |
||||
url: '/api/specializations_flat', |
||||
dataType: 'json', |
||||
data: {}, |
||||
success: createFilterSpecs |
||||
}); |
||||
|
||||
$.ajax({ |
||||
url: '/api/building_classifications', |
||||
dataType: 'json', |
||||
data: {}, |
||||
success: createFilterBuildingClass |
||||
}); |
||||
|
||||
$.ajax({ |
||||
url: '/api/construction_type', |
||||
dataType: 'json', |
||||
data: {}, |
||||
success: createFilterConstructionType |
||||
}); |
||||
|
||||
let data = []; |
||||
|
||||
function fullData(_data) { |
||||
data = data.concat(_data.results.length ? _data.results : []); |
||||
let url = _data.next; |
||||
if (url) { |
||||
$.ajax({ |
||||
url: url, |
||||
dataType: 'json', |
||||
data: {}, |
||||
success: fullData |
||||
}); |
||||
} else { |
||||
createFilerLocations(data); |
||||
} |
||||
return data; |
||||
} |
||||
|
||||
fullData({next: '/api/locations_flat', results: []}); |
||||
|
||||
function tuneCheckBoxes($boxes) { |
||||
let currentState = $boxes.find("input").prop("checked") ? 'checked' : 'not-checked'; |
||||
$boxes.find("div").hide(); |
||||
$boxes.find("div." + currentState).show(); |
||||
} |
||||
|
||||
let $boxes = $('.custom-check'); |
||||
tuneCheckBoxes($boxes); |
||||
$boxes.on("click", function (e) { |
||||
let inside_checkBox = $(e.target).parent().find("input"); |
||||
inside_checkBox.prop("checked", !inside_checkBox.prop("checked")); |
||||
tuneCheckBoxes($boxes); |
||||
e.preventDefault(); |
||||
return false; |
||||
}); |
||||
|
||||
// $(window).on('load',
|
||||
// function hidePreloader() {
|
||||
// var $preloader = $('#page-preloader'),
|
||||
// $spinner = $preloader.find('.spinner');
|
||||
// $spinner.fadeOut();
|
||||
// $preloader.delay(350).fadeOut('slow');
|
||||
// }
|
||||
|
||||
|
||||
// $("#myBtn").click(function () {
|
||||
// $('<div class="alert alert-success alert-dismissable">' +
|
||||
// '<button type="button" class="close" ' +
|
||||
// 'data-dismiss="alert" aria-hidden="true">' +
|
||||
// '×' +
|
||||
// '</button>' +
|
||||
// 'modal info...' +
|
||||
// '</div>').appendTo("#alerts");
|
||||
// });
|
||||
|
||||
|
||||
}); |
||||
@ -0,0 +1,95 @@ |
||||
body { |
||||
font-size: 11pt; |
||||
font-family: Arial-MT-Regular, Arial, sans-serif; |
||||
} |
||||
|
||||
.wrapper { |
||||
background-color: #f2f2f2; |
||||
padding: 40px; |
||||
margin: 50px 30px; |
||||
} |
||||
|
||||
.form-container { |
||||
padding: 50px 45px; |
||||
} |
||||
|
||||
.separator { |
||||
margin-top: 35px; |
||||
margin-bottom: 5px; |
||||
} |
||||
|
||||
.vertical-child { |
||||
margin-top: 30px; |
||||
} |
||||
|
||||
.custom-check{ |
||||
cursor: pointer; |
||||
display: inline-block |
||||
} |
||||
|
||||
.custom-check .checked{ |
||||
background: url("../img/checkbox_Check.png.png") no-repeat center; |
||||
background-size: 210px 51px; |
||||
width: 210px; |
||||
height: 51px; |
||||
} |
||||
|
||||
.custom-check .not-checked { |
||||
background: url("../img/checkbox_notCheck.png") no-repeat center; |
||||
background-size: 210px 51px; |
||||
width: 210px; |
||||
height: 51px; |
||||
} |
||||
|
||||
.resButton { |
||||
width: 50px; |
||||
height: 50px; |
||||
background-color: white; |
||||
border: 1px solid #CFCFCF; |
||||
color: #FF0029; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
float: left; |
||||
border-radius: 100%; |
||||
margin: -15px 20px 0 28px; |
||||
-webkit-transition: all 0.3s ease-out; |
||||
-moz-transition: all 0.3s ease-out; |
||||
transition: all 0.3s ease-out; |
||||
} |
||||
|
||||
button.resButton:focus {outline:0;} |
||||
|
||||
.flex { |
||||
display: flex; |
||||
} |
||||
|
||||
.flex .header{ |
||||
font-size: 12pt; |
||||
padding-right: 10px; |
||||
} |
||||
.header .fa { |
||||
padding-left: 3px; |
||||
color: #5e5e5e; |
||||
position: relative; |
||||
top: 0; |
||||
} |
||||
|
||||
.border { |
||||
flex: 1 1 auto; |
||||
float: left; |
||||
margin: 10px 0 0 0; |
||||
border-top: 1px solid #CFCFCF; |
||||
} |
||||
|
||||
.slide { |
||||
display: none; |
||||
} |
||||
|
||||
.slide.active { |
||||
display: block; |
||||
} |
||||
|
||||
.revert { |
||||
margin-left: -15px; |
||||
margin-right: -15px; |
||||
} |
||||
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
Loading…
Reference in new issue