var view = { addWall: function(identifier, height, width, count) { var content = document.getElementById('wall-template').content; var inputHeight = content.querySelector('input.wall-height'); var inputWidth = content.querySelector('input.wall-width'); var inputCount = content.querySelector('input.wall-count'); var button = content.querySelector('button'); button.id = 'delete-wall-' + identifier; inputHeight.id = 'wall-height-' + identifier; inputHeight.value = height; inputWidth.id = 'wall-width-' + identifier; inputWidth.value = width; inputCount.id = 'wall-count-' + identifier; inputCount.value = count; var walls = document.getElementById('walls'); walls.insertBefore(document.importNode(content, true), walls.querySelector('#add-wall-button')); }, addWindow: function(identifier, height, width, count) { var content = document.getElementById('window-template').content; var inputHeight = content.querySelector('input.window-height'); var inputWidth = content.querySelector('input.window-width'); var inputCount = content.querySelector('input.window-count'); var button = content.querySelector('button'); button.id = 'delete-window-' + identifier; inputHeight.id = 'window-height-' + identifier; inputHeight.value = height; inputWidth.id = 'window-width-' + identifier; inputWidth.value = width; inputCount.id = 'window-count-' + identifier; inputCount.value = count; var walls = document.getElementById('windows'); walls.insertBefore(document.importNode(content, true), walls.querySelector('#add-window-button')); }, addDoor: function(identifier, height, width, count) { var content = document.getElementById('door-template').content; var inputHeight = content.querySelector('input.door-height'); var inputWidth = content.querySelector('input.door-width'); var inputCount = content.querySelector('input.door-count'); var button = content.querySelector('button'); button.id = 'delete-door-' + identifier; inputHeight.id = 'door-height-' + identifier; inputHeight.value = height; inputWidth.id = 'door-width-' + identifier; inputWidth.value = width; inputCount.id = 'door-count-' + identifier; inputCount.value = count; var walls = document.getElementById('doors'); walls.insertBefore(document.importNode(content, true), walls.querySelector('#add-door-button')); }, addOuterCorner: function(identifier, height, count) { var content = document.getElementById('outer-corner-template').content; var inputHeight = content.querySelector('input.outer-corner-height'); var inputCount = content.querySelector('input.outer-corner-count'); var button = content.querySelector('button'); button.id = 'delete-outer-corner-' + identifier; inputHeight.id = 'outer-corner-height-' + identifier; inputHeight.value = height; inputCount.id = 'outer-corner-count-' + identifier; inputCount.value = count; var walls = document.getElementById('outer-corners'); walls.insertBefore(document.importNode(content, true), walls.querySelector('#add-outer-corner-button')); }, addInnerCorner: function(identifier, height, count) { var content = document.getElementById('inner-corner-template').content; var inputHeight = content.querySelector('input.inner-corner-height'); var inputCount = content.querySelector('input.inner-corner-count'); var button = content.querySelector('button'); button.id = 'delete-inner-corner-' + identifier; inputHeight.id = 'inner-corner-height-' + identifier; inputHeight.value = height; inputCount.id = 'inner-corner-count-' + identifier; inputCount.value = count; var walls = document.getElementById('inner-corners'); walls.insertBefore(document.importNode(content, true), walls.querySelector('#add-inner-corner-button')); }, addPediment: function(identifier, height, width, count) { var content = document.getElementById('pediment-template').content; var inputHeight = content.querySelector('input.pediment-height'); var inputWidth = content.querySelector('input.pediment-width'); var inputCount = content.querySelector('input.pediment-count'); var button = content.querySelector('button'); button.id = 'delete-pediment-' + identifier; inputHeight.id = 'pediment-height-' + identifier; inputHeight.value = height; inputWidth.id = 'pediment-width-' + identifier; inputWidth.value = width; inputCount.id = 'pediment-count-' + identifier; inputCount.value = count; var walls = document.getElementById('pediments'); walls.insertBefore(document.importNode(content, true), walls.querySelector('#add-pediment-button')); }, addCornice: function(identifier, width, length, count) { var content = document.getElementById('cornice-template').content; var inputLength = content.querySelector('input.cornice-length'); var inputWidth = content.querySelector('input.cornice-width'); var inputCount = content.querySelector('input.cornice-count'); var button = content.querySelector('button'); button.id = 'delete-cornice-' + identifier; inputWidth.id = 'cornice-width-' + identifier; inputWidth.value = width; inputLength.id = 'cornice-length-' + identifier; inputLength.value = length; inputCount.id = 'cornice-count-' + identifier; inputCount.value = count; var walls = document.getElementById('cornices'); walls.insertBefore(document.importNode(content, true), walls.querySelector('#add-cornice-button')); }, updateAperturesSquare: function() { document.getElementById('apertures-square').value = model.getAperturesSquare(); }, updateCornicesFinishPlanksCount: function() { document.getElementById('finish-cornice-count').value = model.getCornicesFinishPlanksCount(); }, updateCornicesJProfilesCount: function() { document.getElementById('j-cornice-count').value = model.getCornicesJProfilesCount(); }, updateCornicesSquare: function() { document.getElementById('cornices-square').value = model.getCornicesSquare(); }, updateHProfilesCount: function() { document.getElementById('h-count').value = model.getHProfilesCount(); }, updateJFacetCount: function() { document.getElementById('j-count').value = model.getJFacetCount(); }, updateInnerCornersCount: function() { document.getElementById('inner-count').value = model.getInnerCornersCount(); }, updateOuterCornersCount: function() { document.getElementById('outer-count').value = model.getOuterCornersCount(); }, updatePanelsFinishPlanksCount: function() { document.getElementById('finish-panel-count').value = model.getPanelsFinishPlanksCount(); }, updatePedimentsJProfilesCount: function() { document.getElementById('j-pediment-count').value = model.getPedimentsJProfilesCount(); }, updatePedimentsSquare: function() { document.getElementById('pediments-square').value = model.getPedimentsSquare(); }, updateSiberianVinylPanelsCount: function() { document.getElementById('siberian-count').value = model.getSiberianVinylPanelsCount(); }, updateSoffitsCount: function() { document.getElementById('soffit-count').value = model.getSoffitsCount(); }, updateStartPlanksCount: function() { document.getElementById('start-count').value = model.getStartPlanksCount(); }, updateTotalSquare: function() { document.getElementById('total-square').value = model.getTotalSquare(); }, updateTotalSquareWithoutApertures: function() { document.getElementById('without-apertures-square').value = model.getTotalSquareWithoutApertures(); }, updateVinylPanelsCount: function() { document.getElementById('vinyl-count').value = model.getVinylPanelsCount(); }, updateWallsSquare: function() { document.getElementById('walls-square').value = model.getWallsSquare(); }, updateWideJProfilesCount: function() { document.getElementById('j-wide-count').value = model.getWideJProfilesCount(); }, updateWindowsFinishPlanksCount: function() { document.getElementById('finish-window-count').value = model.getWindowsFinishPlanksCount(); }, updateWindowsPlanksCount: function() { document.getElementById('window-count').value = model.getWindowsPlanksCount(); } };