<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script src="https://raw.githubusercontent.com/fooplugins/FooTable/V2/dist/footable.min.js" type="text/javascript"></script>
<table class="footable table table-hover">
<thead>
<tr>
<th>Wall #</th>
<th data-hide="phone">Wall objects </th>
<th data-hide="phone,tablet">Appliences</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="badge">1</span>
<a id="add_wall_measurements"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add wall measurements: </a>
</td>
<td>
<a href="#" id="add_wall_objects"><span class="glyphicon glyphicon-plus"></span> Add wall objects: </a>
<div id="wall_objects"></div>
</td>
<td>
<a href="#" id="add_apliences"><span class="glyphicon glyphicon-plus"></span> Add Appliences: </a>
<div id="applience_list"></div>
</td>
</tr>
<tr><td><span class="badge">2</span> <span id="w2_t">w:120; h:96; a:90</span></td><td>door(w:36;h:86;)</td><td>dishwasher, sink</td></tr>
<tr><td><span class="badge">3</span> <span id="w3_t">w:120; h:96; a:90</span></td><td>soffit(w:12;h:12;d:12 along the wall)</td><td>refrigerator(standard w: 36" h:71"</td></tr>
</tbody>
</table>
//turn to inline mode
$(document).ready(function() {
$.fn.editable.defaults.mode = 'inline';
$('#username').editable();
$('#username').editable({
type: 'text',
pk: 1,
url: '/post',
title: 'measurements'
});
//tooltips
$("#add_wall_measurements, #w2_t, #w3_t").attr("title",'Click to edit: Width = 120" Height = 96" Angle b/n wall 1 and 2 = 90"').tooltip().editable();
// ===== Communication with server=======//
//ajax call simulation
// ===== Wall Objects =======//
$('#add_wall_objects').editable({
type: 'checklist',
source: [
{value: 0, text: 'Window'},
{value: 1, text: 'Door'},
{value: 2, text: 'Obsticle/Soffit'}
],
pk: 1,
title: 'Select wall objects',
placement: 'right',
display: function(value, sourceData) {
var $el = $('#wall_objects'),
checked, html = '';
if(!value) {
$el.empty();
return;
}
checked = $.grep(sourceData, function(o){
return $.grep(value, function(v){
return v == o.value;
}).length;
});
$.each(checked, function(i, v) {
html+= '<li>'+$.fn.editableutils.escape(v.text)+'</li>';
});
if(html) html = '<ul>'+html+'</ul>';
$el.html(html);
}
});
// ===== Wall Objects =======//
// ===== Appliences =======//
$('#add_apliences').editable({
type: 'checklist',
source: [
{value: 0, text: 'Sink'},
{value: 1, text: 'Dishwasher'},
{value: 2, text: 'Range'},
{value: 3, text: 'Cooktop'},
{value: 4, text: 'Hood'},
{value: 5, text: 'Microwave'},
{value: 5, text: 'Refrigerator'},
],
pk: 1,
title: 'Select wall objects',
placement: 'right',
display: function(value, sourceData) {
var $el = $('#applience_list'), checked, html = '';
if(!value) { $el.empty();return;}
checked = $.grep(sourceData, function(o){
return $.grep(value, function(v){
return v == o.value;
}).length;
});
$.each(checked, function(i, v) {
html+= '<li>'+$.fn.editableutils.escape(v.text)+'</li><div id="'+$.fn.editableutils.escape(v.text)+'"></div>';
});
if(html) html = '<ul>'+html+'</ul>';
$el.html(html);
}
});
function make_appliences_editable(applience){
//alert("applinece = " + applience);
switch (applience) {
case "Range":
var html;
$("#Range").html('<ul><li>Type: <a href="#" data-type="select" id="range_type"></a></li><li>Size: <a href="#" data-type="select" id="range_size"></a></li></ul>');
var sources = {
1: [{value: 24, text: 24}, {value: 30, text: "30 standard"},{ value:33, text:33},{value:36, text:36},{value:"sustom",text:"custom"}],
2: [{value: 24, text: 24}, {value: 30, text: "30 standard"},{ value:33, text:33},{value:36, text:36},{value:"sustom",text:"custom"}]
};
$('#range_type').editable({
url: '/post',
pk: 1,
source: [{value: 1, text: 'Gas'}, {value: 2, text: 'electric'}],
title: 'Select type of range',
success: function(response, newValue) {
$('#range_size').editable('option', 'source', sources[newValue]);
$('#range_size').editable('setValue', null);
}
});
$('#range_size').editable({
url: '/post',
pk: 1,
title: 'Select Range Size',
sourceError: 'Please, select range type first'
});
break;
case 1:
day = "Monday";
break;
}
};
// ===== appliences =======//
$('.footable').footable();
}); //end doc ready
