mirror of
https://github.com/beestat/app.git
synced 2026-02-26 13:10:23 -05:00
Access
This commit is contained in:
Jon Ziebell
parent
7019669ac6
commit
6aa2ece572
@ -189,16 +189,18 @@ beestat.component.card.floor_plan_editor.prototype.decorate_drawing_pane_ = func
|
||||
|
||||
this.floor_plan_.render(parent);
|
||||
|
||||
// Create and render the compass for setting orientation
|
||||
this.compass_ = new beestat.component.compass(
|
||||
beestat.setting('visualize.floor_plan_id')
|
||||
);
|
||||
this.compass_.render(parent);
|
||||
// Create and render the compass for setting orientation (early access only)
|
||||
if (beestat.user.has_early_access() === true) {
|
||||
this.compass_ = new beestat.component.compass(
|
||||
beestat.setting('visualize.floor_plan_id')
|
||||
);
|
||||
this.compass_.render(parent);
|
||||
|
||||
// Update floor plan when rotation changes
|
||||
this.compass_.addEventListener('rotation_change', function() {
|
||||
self.update_floor_plan_();
|
||||
});
|
||||
// Update floor plan when rotation changes
|
||||
this.compass_.addEventListener('rotation_change', function() {
|
||||
self.update_floor_plan_();
|
||||
});
|
||||
}
|
||||
|
||||
setTimeout(function() {
|
||||
if (parent.getBoundingClientRect().width > 0) {
|
||||
|
||||
@ -32,7 +32,6 @@ beestat.component.compass.prototype.render = function(parent) {
|
||||
'cursor': 'grab',
|
||||
'z-index': '10'
|
||||
});
|
||||
this.container_.title = 'Drag to set which direction is North for sun/moon positioning';
|
||||
|
||||
// Create SVG
|
||||
this.svg_ = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
|
||||
@ -47,7 +47,10 @@ beestat.component.modal.update_floor_plan.prototype.decorate_contents_ = functio
|
||||
}
|
||||
|
||||
// Floors
|
||||
(new beestat.component.title('Floors')).render(parent);
|
||||
const floors_title_container = document.createElement('div');
|
||||
floors_title_container.style.marginTop = `${beestat.style.size.gutter}px`;
|
||||
parent.appendChild(floors_title_container);
|
||||
(new beestat.component.title('Floors')).render($(floors_title_container));
|
||||
parent.appendChild($.createElement('p').innerHTML('To add or remove floors, create a new floor plan. Change floor settings like name, elevation, and ceiling height on the editor.'));
|
||||
|
||||
const grid = document.createElement('div');
|
||||
@ -75,153 +78,155 @@ beestat.component.modal.update_floor_plan.prototype.decorate_contents_ = functio
|
||||
.render($(grid));
|
||||
});
|
||||
|
||||
// Appearance
|
||||
(new beestat.component.title('Appearance')).render(parent);
|
||||
parent.appendChild($.createElement('p').innerHTML('Customize how your floor plan looks in 3D view.'));
|
||||
// Appearance (early access only)
|
||||
if (beestat.user.has_early_access() === true) {
|
||||
(new beestat.component.title('Appearance')).render(parent);
|
||||
parent.appendChild($.createElement('p').innerHTML('Customize how your floor plan looks in the visualizer\'s environment mode.'));
|
||||
|
||||
const appearance_grid = document.createElement('div');
|
||||
Object.assign(appearance_grid.style, {
|
||||
'display': 'grid',
|
||||
'grid-template-columns': 'repeat(auto-fit, minmax(200px, 1fr))',
|
||||
'column-gap': `${beestat.style.size.gutter}px`,
|
||||
'row-gap': `${beestat.style.size.gutter}px`,
|
||||
'margin-bottom': `${beestat.style.size.gutter}px`
|
||||
});
|
||||
parent.appendChild(appearance_grid);
|
||||
const appearance_grid = document.createElement('div');
|
||||
Object.assign(appearance_grid.style, {
|
||||
'display': 'grid',
|
||||
'grid-template-columns': 'repeat(auto-fit, minmax(200px, 1fr))',
|
||||
'column-gap': `${beestat.style.size.gutter}px`,
|
||||
'row-gap': `${beestat.style.size.gutter}px`,
|
||||
'margin-bottom': `${beestat.style.size.gutter}px`
|
||||
});
|
||||
parent.appendChild(appearance_grid);
|
||||
|
||||
const add_options_alphabetically = function(select, options) {
|
||||
options
|
||||
.slice()
|
||||
.sort(function(a, b) {
|
||||
return a.label.localeCompare(b.label);
|
||||
})
|
||||
.forEach(function(option) {
|
||||
select.add_option(option);
|
||||
});
|
||||
};
|
||||
const add_options_alphabetically = function(select, options) {
|
||||
options
|
||||
.slice()
|
||||
.sort(function(a, b) {
|
||||
return a.label.localeCompare(b.label);
|
||||
})
|
||||
.forEach(function(option) {
|
||||
select.add_option(option);
|
||||
});
|
||||
};
|
||||
|
||||
// Roof Style dropdown
|
||||
const roof_style_select = new beestat.component.input.select()
|
||||
.set_label('Roof Style')
|
||||
.set_width('100%');
|
||||
// Roof Style dropdown
|
||||
const roof_style_select = new beestat.component.input.select()
|
||||
.set_label('Roof Style')
|
||||
.set_width('100%');
|
||||
|
||||
add_options_alphabetically(roof_style_select, [
|
||||
{'label': 'Hip', 'value': 'hip'},
|
||||
{'label': 'Flat', 'value': 'flat'}
|
||||
]);
|
||||
add_options_alphabetically(roof_style_select, [
|
||||
{'label': 'Hip', 'value': 'hip'},
|
||||
{'label': 'Flat', 'value': 'flat'}
|
||||
]);
|
||||
|
||||
roof_style_select.addEventListener('change', function() {
|
||||
if (self.state_.appearance === undefined) {
|
||||
self.state_.appearance = {};
|
||||
}
|
||||
self.state_.appearance.roof_style = roof_style_select.get_value();
|
||||
});
|
||||
roof_style_select.addEventListener('change', function() {
|
||||
if (self.state_.appearance === undefined) {
|
||||
self.state_.appearance = {};
|
||||
}
|
||||
self.state_.appearance.roof_style = roof_style_select.get_value();
|
||||
});
|
||||
|
||||
roof_style_select.render($(appearance_grid));
|
||||
roof_style_select.render($(appearance_grid));
|
||||
|
||||
const current_roof_style = self.state_.appearance?.roof_style !== undefined
|
||||
? self.state_.appearance.roof_style
|
||||
: (floor_plan.data.appearance?.roof_style || 'hip');
|
||||
roof_style_select.set_value(current_roof_style);
|
||||
const current_roof_style = self.state_.appearance?.roof_style !== undefined
|
||||
? self.state_.appearance.roof_style
|
||||
: (floor_plan.data.appearance?.roof_style || 'hip');
|
||||
roof_style_select.set_value(current_roof_style);
|
||||
|
||||
// Roof Color dropdown
|
||||
const roof_color_select = new beestat.component.input.select()
|
||||
.set_label('Roof Color')
|
||||
.set_width('100%');
|
||||
// Roof Color dropdown
|
||||
const roof_color_select = new beestat.component.input.select()
|
||||
.set_label('Roof Color')
|
||||
.set_width('100%');
|
||||
|
||||
const roof_colors = [
|
||||
{'label': 'Charcoal', 'value': '#3a3a3a'},
|
||||
{'label': 'Black', 'value': '#1a1a1a'},
|
||||
{'label': 'Weathered Gray', 'value': '#6a6a6a'},
|
||||
{'label': 'Driftwood', 'value': '#8b7d6b'},
|
||||
{'label': 'Brown', 'value': '#4a3a2a'},
|
||||
{'label': 'Dark Brown', 'value': '#2a1a0a'},
|
||||
{'label': 'Slate', 'value': '#5a6a7a'},
|
||||
{'label': 'Terracotta', 'value': '#8b4513'},
|
||||
{'label': 'Forest Green', 'value': '#2d4a2e'},
|
||||
{'label': 'Colonial Blue', 'value': '#3a5a6a'}
|
||||
];
|
||||
const roof_colors = [
|
||||
{'label': 'Charcoal', 'value': '#3a3a3a'},
|
||||
{'label': 'Black', 'value': '#1a1a1a'},
|
||||
{'label': 'Weathered Gray', 'value': '#6a6a6a'},
|
||||
{'label': 'Driftwood', 'value': '#8b7d6b'},
|
||||
{'label': 'Brown', 'value': '#4a3a2a'},
|
||||
{'label': 'Dark Brown', 'value': '#2a1a0a'},
|
||||
{'label': 'Slate', 'value': '#5a6a7a'},
|
||||
{'label': 'Terracotta', 'value': '#8b4513'},
|
||||
{'label': 'Forest Green', 'value': '#2d4a2e'},
|
||||
{'label': 'Colonial Blue', 'value': '#3a5a6a'}
|
||||
];
|
||||
|
||||
add_options_alphabetically(roof_color_select, roof_colors);
|
||||
add_options_alphabetically(roof_color_select, roof_colors);
|
||||
|
||||
roof_color_select.addEventListener('change', function() {
|
||||
if (self.state_.appearance === undefined) {
|
||||
self.state_.appearance = {};
|
||||
}
|
||||
self.state_.appearance.roof_color = roof_color_select.get_value();
|
||||
});
|
||||
roof_color_select.addEventListener('change', function() {
|
||||
if (self.state_.appearance === undefined) {
|
||||
self.state_.appearance = {};
|
||||
}
|
||||
self.state_.appearance.roof_color = roof_color_select.get_value();
|
||||
});
|
||||
|
||||
roof_color_select.render($(appearance_grid));
|
||||
roof_color_select.render($(appearance_grid));
|
||||
|
||||
const current_roof_color = self.state_.appearance?.roof_color !== undefined
|
||||
? self.state_.appearance.roof_color
|
||||
: (floor_plan.data.appearance?.roof_color || '#3a3a3a');
|
||||
roof_color_select.set_value(current_roof_color);
|
||||
const current_roof_color = self.state_.appearance?.roof_color !== undefined
|
||||
? self.state_.appearance.roof_color
|
||||
: (floor_plan.data.appearance?.roof_color || '#3a3a3a');
|
||||
roof_color_select.set_value(current_roof_color);
|
||||
|
||||
// Siding Color dropdown
|
||||
const siding_color_select = new beestat.component.input.select()
|
||||
.set_label('Siding Color')
|
||||
.set_width('100%');
|
||||
// Siding Color dropdown
|
||||
const siding_color_select = new beestat.component.input.select()
|
||||
.set_label('Siding Color')
|
||||
.set_width('100%');
|
||||
|
||||
const siding_colors = [
|
||||
{'label': 'White', 'value': '#f5f5f5'},
|
||||
{'label': 'Cream', 'value': '#f0e8d0'},
|
||||
{'label': 'Greige', 'value': '#c9c3b8'},
|
||||
{'label': 'Charcoal', 'value': '#3a3a3a'},
|
||||
{'label': 'Sage', 'value': '#8a9a7a'},
|
||||
{'label': 'Navy', 'value': '#4a5a6a'},
|
||||
{'label': 'Brick Red', 'value': '#9a4a3a'},
|
||||
{'label': 'Sandstone', 'value': '#d4c4a8'},
|
||||
{'label': 'Taupe', 'value': '#8b7d6b'},
|
||||
{'label': 'Terracotta', 'value': '#b85a3a'}
|
||||
];
|
||||
const siding_colors = [
|
||||
{'label': 'White', 'value': '#f5f5f5'},
|
||||
{'label': 'Cream', 'value': '#f0e8d0'},
|
||||
{'label': 'Greige', 'value': '#c9c3b8'},
|
||||
{'label': 'Charcoal', 'value': '#3a3a3a'},
|
||||
{'label': 'Sage', 'value': '#8a9a7a'},
|
||||
{'label': 'Navy', 'value': '#4a5a6a'},
|
||||
{'label': 'Brick Red', 'value': '#9a4a3a'},
|
||||
{'label': 'Sandstone', 'value': '#d4c4a8'},
|
||||
{'label': 'Taupe', 'value': '#8b7d6b'},
|
||||
{'label': 'Terracotta', 'value': '#b85a3a'}
|
||||
];
|
||||
|
||||
add_options_alphabetically(siding_color_select, siding_colors);
|
||||
add_options_alphabetically(siding_color_select, siding_colors);
|
||||
|
||||
siding_color_select.addEventListener('change', function() {
|
||||
if (self.state_.appearance === undefined) {
|
||||
self.state_.appearance = {};
|
||||
}
|
||||
self.state_.appearance.siding_color = siding_color_select.get_value();
|
||||
});
|
||||
siding_color_select.addEventListener('change', function() {
|
||||
if (self.state_.appearance === undefined) {
|
||||
self.state_.appearance = {};
|
||||
}
|
||||
self.state_.appearance.siding_color = siding_color_select.get_value();
|
||||
});
|
||||
|
||||
siding_color_select.render($(appearance_grid));
|
||||
siding_color_select.render($(appearance_grid));
|
||||
|
||||
const current_siding_color = self.state_.appearance?.siding_color !== undefined
|
||||
? self.state_.appearance.siding_color
|
||||
: (floor_plan.data.appearance?.siding_color || '#889aaa');
|
||||
siding_color_select.set_value(current_siding_color);
|
||||
const current_siding_color = self.state_.appearance?.siding_color !== undefined
|
||||
? self.state_.appearance.siding_color
|
||||
: (floor_plan.data.appearance?.siding_color || '#889aaa');
|
||||
siding_color_select.set_value(current_siding_color);
|
||||
|
||||
// Ground Color dropdown
|
||||
const ground_color_select = new beestat.component.input.select()
|
||||
.set_label('Ground Color')
|
||||
.set_width('100%');
|
||||
// Ground Color dropdown
|
||||
const ground_color_select = new beestat.component.input.select()
|
||||
.set_label('Ground Color')
|
||||
.set_width('100%');
|
||||
|
||||
const ground_colors = [
|
||||
{'label': 'Summer Grass', 'value': '#4a7c3f'},
|
||||
{'label': 'Fall Grass', 'value': '#9a8a5a'},
|
||||
{'label': 'Winter Snow', 'value': '#f0f0f0'},
|
||||
{'label': 'Bare Dirt', 'value': '#7a5c3a'},
|
||||
{'label': 'Gravel', 'value': '#999999'},
|
||||
{'label': 'Coastal Sand', 'value': '#e0d5b7'},
|
||||
{'label': 'Desert Landscape', 'value': '#c4a57a'}
|
||||
];
|
||||
const ground_colors = [
|
||||
{'label': 'Summer Grass', 'value': '#4a7c3f'},
|
||||
{'label': 'Fall Grass', 'value': '#9a8a5a'},
|
||||
{'label': 'Winter Snow', 'value': '#f0f0f0'},
|
||||
{'label': 'Bare Dirt', 'value': '#7a5c3a'},
|
||||
{'label': 'Gravel', 'value': '#999999'},
|
||||
{'label': 'Coastal Sand', 'value': '#e0d5b7'},
|
||||
{'label': 'Desert Landscape', 'value': '#c4a57a'}
|
||||
];
|
||||
|
||||
add_options_alphabetically(ground_color_select, ground_colors);
|
||||
add_options_alphabetically(ground_color_select, ground_colors);
|
||||
|
||||
ground_color_select.addEventListener('change', function() {
|
||||
if (self.state_.appearance === undefined) {
|
||||
self.state_.appearance = {};
|
||||
}
|
||||
self.state_.appearance.ground_color = ground_color_select.get_value();
|
||||
});
|
||||
ground_color_select.addEventListener('change', function() {
|
||||
if (self.state_.appearance === undefined) {
|
||||
self.state_.appearance = {};
|
||||
}
|
||||
self.state_.appearance.ground_color = ground_color_select.get_value();
|
||||
});
|
||||
|
||||
ground_color_select.render($(appearance_grid));
|
||||
ground_color_select.render($(appearance_grid));
|
||||
|
||||
const current_ground_color = self.state_.appearance?.ground_color !== undefined
|
||||
? self.state_.appearance.ground_color
|
||||
: (floor_plan.data.appearance?.ground_color || '#4a7c3f');
|
||||
ground_color_select.set_value(current_ground_color);
|
||||
const current_ground_color = self.state_.appearance?.ground_color !== undefined
|
||||
? self.state_.appearance.ground_color
|
||||
: (floor_plan.data.appearance?.ground_color || '#4a7c3f');
|
||||
ground_color_select.set_value(current_ground_color);
|
||||
}
|
||||
|
||||
// Address
|
||||
(new beestat.component.title('What is the address for this home?')).render(parent);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user