{{#Name=Gauge}}
{{#Description=Displays a gauge with a pointer}}
{{#Version=1.0}}
{{#Author=HomeSeer}}
{{#CanBeDeleted=False}}
{{#SaveList=save_name_size,save_text_color,save_text_bold,save_stroke_width,save_value_font_size,save_value_font_color,save_value_font_bold}}

{{# gauge display courtesy of https://www.cssscript.com/animated-svg-gauge/}}

{{includefileraw Dashboards/Cards/Custom/Common/CommonHeader.html}}

{{#get settings that will also be used in the autogenerate settings dialog. This fills the arrays above}}
{{sections[index]="Title"}}
{{display_text=get_value 'save_display_text' 'Change Me' 'Name' 'text'}}
{{text_size=get_value 'save_name_size' '16' 'Size' 'text'}}
{{text_color=get_value 'save_text_color' '#000000' 'Color' 'color'}}
{{text_bold=get_value 'save_text_bold' 'on' 'Bold' 'toggle'}}
{{sections[index]="Gauge Min/Max"}}
{{min_value=get_value 'save_min_value' '0' 'Min Value' 'text'}}
{{max_value=get_value 'save_max_value' '100' 'Max Value' 'text'}}
{{sections[index]="Appearance"}}
{{stroke_width=get_value 'save_stroke_width' '10' 'Stroke Width' 'text'}}
{{sections[index]="Value Text"}}
{{value_suffix=get_value 'save_value_suffix' '' 'Suffix' 'text'}}
{{value_font_size=get_value 'save_value_font_size' '16' 'Size' 'text'}}
{{value_font_color=get_value 'save_value_font_color' '#000000' 'Color' 'color'}}
{{value_font_bold=get_value 'save_value_font_bold' '' 'Bold' 'toggle'}}
{{value_dec_places=get_value 'save_dec_places' '0' 'Dec Places' 'text'}}
{{sections[index]="Range Colors"}}
{{color_1=get_value 'save_color_1' '#808080' '0-25%' 'color'}}
{{color_2=get_value 'save_color_2' '#FFA500' '25%-50%' 'color'}}
{{color_3=get_value 'save_color_3' '#FF8C00' '50%-75%' 'color'}}
{{color_4=get_value 'save_color_4' '#FFFF00' '75%-100%' 'color'}}

{{#get settings that will not be configured with the settings dialog}}
{{# these are values that may or may not be displayed in the setings dialog but need to be displayed with custom HTML that the autogen code cannot handle }}
{{feature_item_ref=get_saved_value 'save_feature_item' widget_id}}
{{if feature_item_ref==''
	feature_item_ref='0'
end}}

{{# normal display HTML is here. This is what is displayed when viewing the card in non-edit mode}}

<script src="bootstrap/js/gauge.js"></script>

<style>
.title{{w.id}} {
	display: flex;
    color: {{text_color}};
	font-size: {{text_size}}px;
    align-items: center;
    justify-content: center;
	padding: 4px;
	{{if text_bold=='on'}}
	font-weight: bold;
	{{end}}
    }
	
.gauge-container{{w.id}} > .gauge > .dial {
  stroke: #334455;
  stroke-width: {{stroke_width}};
}
.gauge-container{{w.id}} > .gauge > .value {
  stroke: rgb(47, 227, 255);
  stroke-width: {{stroke_width}};
}
.gauge-container{{w.id}} > .gauge > .value-text {
  fill: {{value_font_color}};
  font-family: roboto;
  {{if value_font_bold=='on'}}
	font-weight: bold;
  {{end}}
  font-size: {{value_font_size}}px;
  padding-bottom:20px;
}

</style>

{{# get the value of the device }}
{{device_val = device_value feature_item_ref}}
{{device_status = status_text feature_item_ref}}

<div class="row no-gutters">
	<div class="col-12 title{{w.id}}">
	{{display_text}}
	</div>				
</div>
<div>
<div id="gauge2{{w.id}}" class="gauge-container{{w.id}} two"></div>
</div>

{{#if we are not in edit mode, don't bother including the edit mode content}}
{{if dbs.edit_mode}}
{{# card settings dialog, the second tab autogenerates settings based on values added to the settings arrays. Custom settings HTML can be added}}

{{#this dialog has 2 tabs, one for formatting the card, the other for card content}}

{{# w=widget class, dashboard=dashboard name, d=device}}
<div id="dialogs{{w.id}}">
<div class="modal 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}}2" role="tab"><i class="fas fa-edit mr-1"></i>
						Display</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-toggle="tab" href="#panel{{w.id}}1" role="tab"><i class="fas fa-border-all mr-1"></i>
						Format</a>
					</li>                  
                </ul>
                <div class="tab-content mt-n4">
                    <div class="tab-pane fade" 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 in show active" id="panel{{w.id}}2" role="tabpanel">      
                        <div class="modal-body">                     
			                <p>
				               {{# Second tab which contains settings for this card only}}
							   {{# Starting here, add custom settings HTML for this card }}
								<div style="width:100%" class="streakhs grey lighten-2">
									Feature
								</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}}">Set Feature</button>                       
									</div>						
								</div>	
								
								<div class="row no-gutters">
									<div class="col-md md-form justify-content-center align-content-center">
                                        <b>Selected Feature</b>               
                                    </div>
								</div>
								<div class="row no-gutters">
									<div class="col-md justify-content-center align-content-center" id="#selected_feature{{w.id}}">
									<input type="hidden" name="save_feature_item" value="{{feature_item_ref}}"></input>
												{{if feature_item_ref != ''}}
												{{device_name_full feature_item_ref true}}
												{{end}}
                                    </div>
								</div>
							   {{# This section autogenerates settings, do not modify }}
                                {{index=0}}
                                {{for sn in save_names}}
								{{if sections[index] != null}}
									<div style="width:100%" class="streakhs grey lighten-2">
										{{sections[index]}}
									</div> 
								{{end}}
                                <div class="row no-gutters">                                    
                                    {{if control_types[index] == 'color'}}
									<div class="col-md-3 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 justify-content-center text-center"> 
                                        <button onclick="ShowColorPickerDialog('#{{sn}}-{{w.id}}','{{current_values[index]}}','#{{sn}}_{{w.id}}');" type="button" id="{{sn}}-{{w.id}}" class="color-square-btn" style="background-color:{{current_values[index]}};"></button>
                                    </div>									
                                    {{else if control_types[index] == 'toggle'}}									
									<div class="col-md-9 justify-content-center align-content-center">
										{{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-3 justify-content-center align-content-center">
                                        {{titles[index]}}               
                                    </div>
                                    <div class="col-md-9 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}}
								
																						
                            </p>
				        </div>
                    </div>
			        			   
                    {{save_action='save_custom_card_edits'}}
					{{includefileraw includes/dashboard_dialogs_footer.html}}
                </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>
					{{roots=root_devices_by_location}}
                    <select class="mdb-select md-form mx-2" id="feature_select{{w.id}}" name="feature_add" searchable="Search for a device here...">
						<option selected name="test" value="0">Select Feature</option>
						{{ for dev in roots }}
							{{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 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}}   
							                      
							{{for child in dev.features}}
								{{selected=''}}	
								{{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}}
					</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>
</div>

{{includefileraw Dashboards/Cards/Custom/Common/CommonScript.html}}

<script>

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

// When the feature picker dialog is closed it removes the class "model-open" from the body and therefore the settings modal loses focus
// So we detect when the feature dialog closes and then restore the "model-open" class to the body
$('#feature_picker{{w.id}}').on('hidden.bs.modal', function (e) {
	$("body").addClass("modal-open");
})


function addFeature{{id_unique}}() {
	var ref = +$('#feature_select{{w.id}}').find(':selected').val();
	var txt = $('#feature_select{{w.id}}').find(':selected').text().trim();
	//console.log("add feature ref,txt:" + ref + txt);

	if(ref != 0) {
		var div = document.getElementById("#selected_feature{{w.id}}");
		div.innerHTML = '<input type="hidden" name="save_feature_item" value="'+ref+'"></input>' + txt
	}
}

</script>
{{else}}
<script>
//script for non edit mode





</script>
{{end}}
<script>

{{if dbs.edit_mode}}
$(document).ready(function () {
	updateGauge{{id_unique}}({{max_value}});
});

{{else}}

var curr_value{{id_unique}}=0;
var new_value{{id_unique}}=0;

$(document).ready(function () {
	const unregisterCallback = registerDeviceCallback({{feature_item_ref}}, function(values, deviceRef) {
		var status=values.status;
		var value=values.value;
		var last_change=values.last_change;
		var last_change_dt=values.last_change_dt;
		var image_file = values.image_file;
		updateGauge{{id_unique}}(value);
	});
}); 

{{end}}


function updateGauge{{id_unique}}(value) {
    gauge2{{id_unique}}.setValueAnimated(value,.8);
}

var gauge2{{id_unique}} = Gauge(
    document.getElementById("gauge2{{w.id}}"),
    {
      min: {{min_value}},
      max: {{max_value}},
      dialStartAngle: 180,
      dialEndAngle: 0,
      value: {{device_val}},
	  suffix: '{{value_suffix}}',
      viewBox: "0 0 100 57",
	  decplaces: "{{value_dec_places}}",
	  locale: "{{system_locale}}",
      color: function(value) {
		var range={{max_value}}-({{min_value}});
		var pcnt=(value/range)*100;
        if(pcnt < 25) {
          return "{{color_1}}";
        }else if(pcnt < 50) {
          return "{{color_2}}";
        }else if(pcnt < 75) {
          return "{{color_3}}";
        }else {
          return "{{color_4}}";
        }
      }
    }
  );

</script>