{{#Name=Multi Feature}}
{{#Description=Displays features from multiple devices}}
{{#Version=1.0}}
{{#Author=HomeSeer}}

{{dbs=dashboards_ref}}

{{widget_id=queries['widget_id']}}
{{if widget_id==null}}
	{{widget_id=var1}}
{{end}}

{{w=widget_by_id widget_id}}

{{id_unique=string.replace w.id '-' ''}}

{{# check if this is the first time this card has been run. If not items have been saved, its the first time }}
{{if (array.size (get_saved_values w.id))==0
	first_run=true
else
	first_run=false
end}}

{{#get all the reference ID's used on this card}}
{{ values=get_saved_values widget_id }}
{{refs=''}}
{{for key in values
	if key.key | string.starts_with 'save_feature'
		refs=refs | string.append key.value | string.append ','
	end
end}}

<style>    
    .item {
      padding: 4px;
      margin: 4px;
      border: 1px solid #ccc;
    }
    .drag-over {
      border: 2px dashed #000;
    }
	.feature_move {
		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
		border: 0;
	}	
	.display_title {
		font-weight: bold;
		border-bottom: 1px solid #ccc;
		margin-bottom: 10px;
	}
}
</style>
    
<div class="p-2">
	
	{{#See if all the controls are ON}}
	{{#key.value is device ref}}
	{{#key.key is the name of the saved variable, always starts with "save_"}}

	{{all_on_checked='checked'}}	{{#assume all are on}}
	{{for key in values
		if key.key | string.starts_with 'save_feature'
			if is_off key.value
				all_on_checked=''
			end
		end
	end}}
	
	{{#get all saved values for easy reference}}
	
	{{# arrays that hold settings for the autogenerated settings dialog. These are filled by calling get_value }}
	{{current_values=[]}}
	{{save_names=[]}}
	{{titles=[]}}
	{{control_types=[]}}

	{{# function to get a saved value and return the value or the default value}}
	{{# function parameters: $0=save name, $1=default value, $2=control name for settings dialog, $3=control type }}
	{{index=0}}
	{{func get_value
		v=get_saved_value $0 widget_id
		if first_run
			v=$1
		end
		current_values[index]=v
		save_names[index]=$0
		titles[index]=$2
		control_types[index]=$3
		index=index+1
		ret v
	end}}
	
	{{title=get_value 'save_title' 'Change Me' 'Title' 'text'}}
	{{title_size=get_value 'save_title_size' '18' 'Title Size' 'text'}}
	{{title_color=get_value 'save_title_color' 'black' 'Title Color' 'color'}}
	{{feature_size=get_value 'save_feature_size' '14' 'Feature Size' 'text'}}
	{{feature_color=get_value 'save_feature_color' 'black' 'Feature Color' 'color'}}
	{{on_off_only_val=get_value 'save_display_on_off_only' 'on' 'On/Off Only' 'toggle'}}
	{{use_switch_val=get_value 'save_use_switch' 'on' 'Use Switch' 'toggle'}}
	{{include_location_val=get_value 'save_include_location' '' 'Include Location' 'toggle'}}
	{{if on_off_only_val=='on'
		on_off_only=true
	else
		on_off_only=false
	end}}
	{{if use_switch_val=='on'
		use_switch=true
	else
		use_switch=false
	end}}
	{{if include_location_val=='on'
		include_location=true
	else
		include_location=false
	end}}
	
	
	
	
	<div class="row no-gutters display_title">
		<div style="color: {{title_color}};font-size: {{title_size}}px;" class="col-8 justify-content-center align-content-center text-left">
			<b>{{title}}</b>                       
		</div>
		<div class="col-4 justify-content-center align-content-center text-right">
			<span class="switch">
			  <label>		
					<input type="checkbox" id="allonoff{{id_unique}}" name="allonoff" refs="{{refs}}" {{all_on_checked}}>
					<span class="lever"></span>
			  </label>
			</span>	                      
		</div>
	</div>
	
    	
	{{for key in values}}
		{{#the saved feature refs are saved under the name 'save_feature_itemREF}}
		{{if key.key | string.starts_with 'save_feature_item'}}							
			{{dev=device_by_ref key.value}}		
			{{dev_primary=device_by_ref dev.primary_ref}}
			{{primary_name=dev_primary.name}}			
			
			{{if include_location}}
				{{if location1_display_first}}
					{{loc=dev.location | string.append '-' | string.append dev.location2}}
				{{else}}
					{{loc=dev.location2 | string.append '-' | string.append dev.location}}
				{{end}}
				{{loc=loc | string.append "-"}}
			{{else}}
				{{loc=''}}
			{{end}}
			
			{{pairs=sort_vspairs 3415}}
			{{for pair in pairs
				if pair.control_use=='_On'
					onval=pair.value
				end
				if pair.control_use=='_Off'
					offval=pair.value
				end
			end}}			
			
			<div class="row no-gutters" id="{{key.value}}">			
				{{if use_switch}}
					<div style="color: {{feature_color}};font-size: {{feature_size}}px;" class="col-8 justify-content-center align-content-center">
					{{loc}}{{dev.name}}
					</div>
					<div class="col-4 justify-content-center align-content-center text-right">
						 <span class="switch">
						  <label>									
								<input type="checkbox" id="onoff{{id_unique}}" name="onoff" ref="{{key.value}}" {{if is_on key.value}}checked{{end}}>
								<span class="lever"></span>
						  </label>
						</span>	
					</div>
				{{else}}
					<div style="color: {{feature_color}};font-size: {{feature_size}}px;" class="col-12 justify-content-center align-content-center">
					{{loc}}{{dev.name}}
					</div>			
				{{end}}
			</div>
			{{if on_off_only}}
			{{else}}
				{{row1 = controls_row key.value 1 use_switch }}   
				{{if row1 != ''}}
					<div id='controls_row1_{{key.value}}' class="row no-gutters justify-content-end align-items-center">
						{{row1}}
					</div>
				{{end}}
				
				{{row2 = controls_row key.value 2 use_switch}}
				{{if row2 != ''}}
					<div id='controls_row2_{{key.value}}' class="row no-gutters justify-content-end align-items-center">
						{{row2}}
					</div>
				{{end}}

				{{row3 = controls_row key.value 3 use_switch}}
				{{if row3 != ''}}                        
					<div id='controls_row3_{{key.value}}' class="row no-gutters justify-content-end align-items-center">
						{{row3}}
					</div>                        
				{{end}}   
			{{end}}
		{{end}}
	{{end}}
 </div>
	
{{#if we are not in edit mode, don't bother including the edit mode content}}
{{if dbs.edit_mode}}

{{# card settings dialog}}
{{#this dialog has 2 tabs, one for formatting the card, the other for card content}}
{{# w=widget class, dashboard=dashboard name}}


{{# w=widget class, dashboard=dashboard name, d=device}}
<div class="modal fade pg-show-modal" id="edit_custom_card{{w.id}}" tabindex="-1" role="dialog" aria-hidden="true"> 
   <div class="modal-dialog cascading-modal"> 
	   <div class="modal-content">   
            <form id="add_to_dashboard">
            <div class="modal-c-tabs">
                <ul class="nav md-tabs tabs-2 light-blue darken-3" role="tablist">
                  <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#panel{{w.id}}1" role="tab"><i class="fas fa-border-all mr-1"></i>
                      Format</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#panel{{w.id}}2" role="tab"><i class="fas fa-edit mr-1"></i>
                      Display</a>
                  </li>
                </ul>
                <div class="tab-content mt-n4">
                    <div class="tab-pane fade in show active" id="panel{{w.id}}1" role="tabpanel">
                        <div class="modal-body">
                            {{includefileraw Dashboards/Cards/Internal/card_appearance_settings.html}}
                        </div>
                    </div>
		                    
                    <div class="tab-pane fade" id="panel{{w.id}}2" role="tabpanel">      
                        <div class="modal-body">                     
			                <input type="hidden" id="edit_camera_card_widget_id_{{w.id}}" name="edit_camera_card_widget_id_{{w.id}}" value="{{w.id}}">
			                <p>
				               {{# Second tab which contains settings for this card only}}
							   {{# This section autogenerates settings, do not modify }}
                                {{index=0}}
                                {{for sn in save_names}}
                                <div class="row no-gutters">                                    
                                    {{if control_types[index] == 'color'}}
									<div class="col-md justify-content-center align-content-center">
										{{titles[index]}}                        
									</div>
									<div class="md-form input-group col-md justify-content-center text-center"> 
										<input type="text" id="{{sn}}_{{w.id}}" class="form-control" name="{{sn}}" value="{{current_values[index]}}">
									</div>
                                    <div class="md-form input-group col-md-2 justify-content-center text-center"> 
                                        <button onclick="ShowColorPickerDialog('#{{sn}}-{{w.id}}','{{current_values[index]}}','#{{sn}}_{{w.id}}');" type="button" id="{{sn}}-{{w.id}}" class="btn btn-default">Color</button>
                                    </div>									
                                    {{else if control_types[index] == 'toggle'}}									
										<div class="col-md-9">
											{{titles[index]}}                    
										</div>
										<div class="col-md-3">
											<span class="switch">
											  <label>	
													<input type="checkbox" name="{{sn}}" {{if current_values[index]=="on"}}checked{{end}}>
													<span class="lever"></span>
											  </label>
											</span>						
										</div>			
									{{else if control_types[index] == 'text'}}
                                    <div class="col-md justify-content-center align-content-center">
                                        {{titles[index]}}               
                                    </div>
                                    <div class="col-md md-form input-group justify-content-center text-center"> 
                                        <input type="text" id="{{sn}}_{{w.id}}" class="form-control" name="{{sn}}" value="{{current_values[index]}}">
                                    </div>
                                    {{end}}                                   					
                                </div>
                                {{index=index+1}}
                                {{end}}
								
								{{# Starting here, add custom settings HTML for this card }}
								<div class="row">
									<div class="col-12 justify-content-center align-content-center text-center">
										<b>Features</b>
									</div>
								</div>
								<div class="row mb-1">						
									<div class="col-12 justify-content-center align-content-center text-center">
										<button type="button" class="btn btn-default"  data-toggle="modal" data-target="#feature_picker{{w.id}}">Add Feature</button>                       
									</div>						
								</div>
								<div id="feature_list{{w.id}}" class="ui-sortable">	
								{{for key in values}}
									{{if key.key | string.starts_with 'save_feature_item'}}
									<div draggable="true" class="item hs-bg-blue-l4 row no-gutters {{if !is_mobile_browser}}fa-grabbing{{end}}" id="feature_list_item{{key.value}}">
										<div class="col-9 justify-content-center align-content-center">
										<input type="hidden" name="save_feature_item{{key.value}}" value="{{key.value}}"></input>{{device_name_full key.value true}}
										</div>
										<div class="col-3 controls justify-content-center align-content-center text-right">
											<i class="fas fa-trash-alt fa-point mr-1" style="font-size:14px" onclick="removeFeature{{id_unique}}('feature_list_item{{key.value}}');" ></i>
											<i class="fas fa-grabbing fa-fw fa-grip-vertical mr-4"></i>
										</div>
									</div>
									{{end}}
								{{end}}
								</div>	                                
                            </p>
				        </div>
                    </div>
			        
			   
                    <div class="modal-footer"> 
			            <button type="button" class="btn btn-cancel" data-dismiss="modal">Cancel</button>
			            <button type="submit" class="btn btn-success" data-dismiss="modal" action="save_custom_card_edits" wid="{{w.id}}">Save</button>                	                             
                    </div>
                </div>			   
			                         
			</div>	 
            </form>                                 
        </div>                 
    </div>
</div>

{{#pop-up dialog to select an HS device feature}}
<div class="modal fade pg-show-modal second-modal" id="feature_picker{{w.id}}" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
			<form id="add_to_dashboard">
            <div class="modal-header">
                <h4 class="modal-title">Select Feature</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
            </div>
            <div class="modal-body">                
                <p>
                    <select class="mdb-select md-form mx-2" id="feature_select{{w.id}}" name="feature_add" searchable="Search for a device here...">
						{{roots=root_devices_by_location}}
						<option selected name="test" value="0">Select Feature</option>
						{{ for dev in (roots) }}   
							{{hascontrols=false}}
							{{if dev.has_controls}}{{hascontrols=true}}{{end}}
							{{for child in dev.features}}
								{{if child.has_controls}}{{hascontrols=true}}{{end}}
							{{end}}
							{{if !hascontrols}}{{continue}}{{end}}													
							
							{{if location1_display_first}}
								<option disabled value="{{dev.ref}}">{{dev.location}}-{{dev.location2}}-{{dev.name}}</option>
							{{else}}
								<option disabled value="{{dev.ref}}">{{dev.location2}}-{{dev.location}}-{{dev.name}}</option>
							{{end}}
							
							{{if dev.has_controls}}
								{{if location1_display_first}}
									<option name="feature_device" value="{{dev.ref}}">&nbsp;&nbsp;&nbsp;{{dev.location}}-{{dev.location2}}-{{dev.name}}</option>
								{{else}}
									<option name="feature_device" value="{{dev.ref}}">&nbsp;&nbsp;&nbsp;{{dev.location2}}-{{dev.location}}-{{dev.name}}</option>
								{{end}}   
							{{end}}                        
							{{for child in dev.features}}
								{{selected=''}}
								{{if child.has_controls}}
									{{#if child.ref==item.value.dv_ref}}
										{{#selected='selected'}}
									{{#end}}	
									{{if location1_display_first}}
										<option name="feature" value="{{child.ref}}">&nbsp;&nbsp;&nbsp;{{child.location}}-{{child.location2}}-{{dev.name}}-{{child.name}}</option>
									{{else}}
										<option name="feature" value="{{child.ref}}">&nbsp;&nbsp;&nbsp;{{child.location2}}-{{child.location}}-{{dev.name}}-{{child.name}}</option>
									{{end}}	
								{{end}}
							{{end}}  
						{{end}}
					</select>
					<label class="mdb-main-label">Device</label>
                </p>
            </div>
			<div class="modal-footer"> 
				<button type="button" class="btn btn-cancel" data-dismiss="modal">Cancel</button>
				<button type="button" class="btn btn-success" data-dismiss="modal" onclick="addFeature{{id_unique}}();" >Add</button>                	                             
			</div>
			</form>
        </div>
    </div>
</div>

<script>

// add a feature to the HTML so it is included when the dialog is saved
function addFeature{{id_unique}}() {
	var ref = +$('#feature_select{{w.id}}').find(':selected').val();
	var txt = $('#feature_select{{w.id}}').find(':selected').text().trim();

	if(ref != 0) {
		var div = document.getElementById("feature_list{{w.id}}");
		div.innerHTML += '<div draggable="true"class="item hs-bg-blue-l4 row no-gutters fa-grabbing" id="feature_list_item'+ref+'">' +
		'<div class="col-9 justify-content-center align-content-center">'+
		'<input type="hidden" name="save_feature_item'+ref+'" value="'+ref+'"></input>'+txt+
		'</div>'+
		'<div class="col-3 controls justify-content-center align-content-center text-right">'+
		'<i class="fas fa-trash-alt fa-point mr-1" style="font-size:14px" onclick="removeFeature{{id_unique}}(\'feature_list_item'+ref+'\');" ></i>'+
		'<i class="fas fa-grabbing fa-fw fa-grip-vertical mr-4"></i>'+
		'</div>'+
		'</div>';		
	}
}

// remove a feature from the HTML, ref is the device reference number
function removeFeature{{id_unique}}(ref) {
	document.getElementById(ref).remove();
}

$(document).ready(function () {
    $('#feature_select{{w.id}}').materialSelect();
	setSort{{id_unique}}();
}); 


function setSort{{id_unique}}()
{
	var el = document.getElementById('feature_list{{w.id}}');
	var sortable = new Sortable(el, {
		draggable: ".item",	
		onStart: function (evt) {
			evt.oldIndex;  // element index within parent
			var itemEl = evt.item;
			$("#"+itemEl.id).addClass("feature_move");
			$(".controls.").hide();
		},
		onEnd: function (evt) {
			var itemEl = evt.item;
			$("#"+itemEl.id).removeClass("feature_move");
		}
	});
}

</script>

{{else}}
{{# non edit mode script}}
<script>

function updateCard{{id_unique}}() { 
	// update the card with new status
	// note that is reloads this entire card, including this script code so any local vars are reset
	AjaxPost("action=update_custom_card&forcelayout=false&widget_id={{widget_id}}","dashboard.html");
}

$('#onoff{{id_unique}}').change(function() {	
	var ref=$(this).attr('ref');

	if(this.checked) {
		AjaxPost("action=control_device_by_controluse&ref="+ref+"&controluse=_On","dashboard.html");
	}
	else {
		AjaxPost("action=control_device_by_controluse&ref="+ref+"&controluse=_Off","dashboard.html");
	}	 
	// update the card to set the "all on/off" toggle
	setTimeout(updateCard{{id_unique}}, 2000);
});

$('#allonoff{{id_unique}}').change(function() {
	var refs=$(this).attr('refs');
	var parts=refs.split(',');
	
	parts.forEach(item => {
		if(item != null && item != '') {
			if(this.checked) {
				AjaxPost("action=control_device_by_controluse&ref="+item+"&controluse=_On","dashboard.html");
			}
			else {
				AjaxPost("action=control_device_by_controluse&ref="+item+"&controluse=_Off","dashboard.html");
			}
		}
	});
	// update the card with new status
	setTimeout(updateCard{{id_unique}}, 2000);
	       
});





</script>


{{end}}