<!-- template for setting up graphical GUI -->


[% UNLESS user_info.cert -%]
<h1>You are not authorised to configure the GUI for rig [% nav.rig %]</h1>
[% RETURN %]
[% END -%]

[% IF data.template_name -%]
[% nav.x = data.x -%]
[% nav.y = data.y -%]
[% ELSE -%]
[% UNLESS nav.x %][% nav.x = 10 %][% END -%]
[% UNLESS nav.y %][% nav.y = 10 %][% END -%]
[% END -%]
<div style="float:right;margin-right:20px;margin-top:10px; border:1px solid;padding:5px;">
<form method=post name=setup>
[% INCLUDE print_hidden.tt %]
[% IF data.template_name %]
Edit layout [% data.template_name %]
<input type=hidden name=template_name value="[% data.template_name %]" autocomplete=off id=template_name>
[% ELSE %]
New layout:
<input type=text style="width:100px;" id=template_name name=template_name value="[% nav.template_name %]" autocomplete=off placeholder="Layout name"><br>
[% END %]
<div style="vertical-align:middle;display:inline-block;padding-top:5px;padding-bottom:5px;">
<input type=text name=x value="[% nav.x %]" style="width:50px;">
<input type=text name=y value="[% nav.y %]" style="width:50px;">
<button type=button onclick="save_layout(this.form)">Set x,y</button>
<input type=hidden name=model>
<input type=hidden name=action value="">
<button type=button title="Save layout" onclick="save_layout(this.form)"><i class="fa fa-check"></i></button>
</div><br>
[% IF nav.template_name %]
<button onclick="this.form.action.value='set_default';this.form.submit();">Set as default layout</button>
<button type=button onclick="download_template();">Download</button>
<a href="" style="display:none;" id=dlink></a>
[% END %]
</form>
</div>
[% IF data.templates.size > 0 %]
<div style="float:right;margin-right:20px;margin-top:10px; border:1px solid;padding:5px;">
Load existing layout<br>
<select style="width:100%;" onchange="document.getElementById('template_name').value = this.value;document.setup.action.value= 'load';document.setup.submit();">
<option value="">Select layout</option>
[% FOR i IN data.templates %]
<option value="[% i %]">[% i %]</option>
[% END %]
</select>
<br>
<input type=file id=ulink" onchange="upload_file(this);" placeholder="Upload layout" style="max-width:100px;"></input>
</div>
[% END %]

<h1>Configuration of GUI for rig [% nav.rig %]</h1>
<p>
[% INCLUDE dev_select.tt %]


[% x = 0 -%]
[% y = 0 -%]
<div style="float:none;overflow:auto;margin-right:50px;">
<table class=tab  style="width:[% nav.x * 50 + 50 %];">
[% WHILE y < nav.y -%]
<tr>
[% WHILE x < nav.x -%]
<td class=test id="[% x %]_[% y %]" onclick="set_cell(this,[% x %],[% y %])"></td>
[% x = x + 1 -%]
[% END -%]
</tr>
[% x = 0 -%]
[% y = y + 1 -%]
[% END -%]
</table>
</div>


<style>

.tab {
     margin:auto;
}

.test {
      font-size:7pt;
      text-align:center;
      vertical-align:top;
      height:50px;
      width:50px;
      border:0px;
      padding:0px;
      outline:1px #000 solid;
}
.label {
      font-size:7pt;
      width:45px;
      height:15px;
}

</style>


<script>

function upload_file(ff)
{
    let f = ff.files[0];
    let reader = new FileReader();
    reader.onload = (function(theFile) {    		  
         document.getElementById('template_name').value = f.name.replace('.json','');
	 reader.addEventListener("load",() => { parse_upload( reader.result);  },false);
         reader.readAsText(f);
    })(f);   
}


function parse_upload(data)
{
   list = JSON.parse(data);
   if (!confirm('include device names (may cause incorrect configuratjion!)'))
   {  
       for (const key in list)
       {
           delete list[key].name;
       }
   }
   document.setup.model.value=JSON.stringify(list);
   document.setup.submit();
}

function download_template()
{
   var e = document.getElementById('dlink');
   var taBlob = new Blob([JSON.stringify(list)], {type: 'text/plain'});
   e.setAttribute('href', URL.createObjectURL(taBlob));
   e.setAttribute('download',document.getElementById('template_name').value+'.json');
   e.click();
}


function save_layout(f)
{
   f.action.value='save';
   if (Object.keys(list).length == 0)
   {
       alert('You can not save an empty layout');
       return false;
   }
   if (f.template_name.value == '')
   {
       alert('you have to specify a name');
       return false;
   }
   f.submit();
}


var element = null;
var cellid = '';

var list = new Object();

/* Setup reload data */

[% FOR i IN data.model.keys -%]
list['[% i %]'] = new Object();
list['[% i %]'].type = '[% data.model.$i.type %]';
list['[% i %]'].template = '[% data.model.$i.template %]';
list['[% i %]'].label = '[% data.model.$i.label %]';
element = document.getElementById('[% i %]'); 
  [% IF data.model.$i.type == 'device' && data.model.$i.template == 'simple' && data.model.$i.mode == 'pressure' -%]
list['[% i %]'].mode = 'pressure';
list['[% i %]'].name = '[% data.model.$i.name %]';
var str = "<img src='/celltest/dev_png/M5.png'><select class=label onclick='do_nothing();' id=dev_[% i %] onchange='set_dev(this,\"simplechannel\")' autocomplete=off>";
[% UNLESS data.model.$i.name %]str = str +'<option value="" selected=selected>Select</option>';[% END %]
      [%- FOR j IN data.devices.simplechannels -%]
str = str +'<option value="[% j.name %]"[% IF j.name == data.model.$i.name %]selected=selected[% END %]>[% j.name %]</option>';
      [%- END -%]
str = str + '</select>';
element.innerHTML = element.innerHTML + str; 
  [% END %]
  [% IF data.model.$i.type == 'device' && data.model.$i.template == 'simple' && data.model.$i.mode == 'DPS' -%]
list['[% i %]'].mode = 'pressure';
list['[% i %]'].name = '[% data.model.$i.name %]';
var str = "<img src='/celltest/dev_png/M8.png'><select class=label onclick='do_nothing();' id=dev_[% i %] onchange='set_dev(this,\"simplechannel\")' autocomplete=off>";
[% UNLESS data.model.$i.name %]str = str +'<option value="" selected=selected>Select</option>';[% END %]
      [%- FOR j IN data.devices.simplechannels -%]
str = str +'<option value="[% j.name %]"[% IF j.name == data.model.$i.name %]selected=selected[% END %]>[% j.name %]</option>';
      [%- END -%]
str = str + '</select>';
element.innerHTML = element.innerHTML + str; 
  [% END %]
  [% IF data.model.$i.type == 'device' && data.model.$i.template == 'Tlog' -%]
list['[% i %]'].name = '[% data.model.$i.name %]';
list['[% i %]'].mode = '[% data.model.$i.mode %]';
var str = "Tlog<br><select class=label onclick='do_nothing();' id=dev_[% i %] onchange='set_dev(this,\"Templog\")' autocomplete=off>";
[% UNLESS data.model.$i.name %]str = str +'<option value="" selected=selected>Select</option>';[% END %]
      [% FOR j IN data.devices.Tlogs -%]
str = str +'<option value="[% j.name %]"[% IF j.name == data.model.$i.name %]selected=selected[% END %]>[% j.name %]</option>';
      [% END -%]
str = str + '</select> &deg;[% IF data.model.$i.mode == 'readonly_K' %]K[% ELSE %]C[% END %]';
element.innerHTML = element.innerHTML + str; 
  [%- END -%]
  [% IF data.model.$i.type == 'complex' && data.model.$i.template == 'Tempcontrol' -%]
list['[% i %]'].name = '[% data.model.$i.name %]';
list['[% i %]'].mode = '[% data.model.$i.mode %]';
var str = "Tempcont<br><select class=label onclick='do_nothing();' id=dev_[% i %] onchange='set_dev(this,\"Tempcontrol\")' autocomplete=off>";
[% UNLESS data.model.$i.name %]str = str +'<option value="" selected=selected>Select</option>';[% END %]
      [% FOR j IN data.devices.Tcontrols -%]
str = str +'<option value="[% j.name %]"[% IF j.name == data.model.$i.name %]selected=selected[% END %]>[% j.name %] - [% j.gasses.join(', ')%]</option>';
      [% END -%]
str = str + '</select>';
element.innerHTML = element.innerHTML + str + '<br>[% data.model.$i.mode %]'; 
  [%- END -%]
  [% IF data.model.$i.type == 'pcontrol' -%]
list['[% i %]'].name = '[% data.model.$i.name %]';
list['[% i %]'].mode = '[% data.model.$i.mode %]';
var str = "<img src='/celltest/dev_png/[% data.model.$i.template %].png' title='[% data.model.$i.mode %]'><select class=label onclick='do_nothing();' id=dev_[% i %] onchange='set_dev(this,\"pcontrol\")' autocomplete=off>";
[% UNLESS data.model.$i.name %]str = str +'<option value="" selected=selected>Select</option>';[% END %]
[% IF data.model.$i.mode == 'auto' %]
      [% FOR j IN data.devices.Pcontrols -%]
str = str +'<option value="[% j.name %]"[% IF j.name == data.model.$i.name %]selected=selected[% END %]>[% j.name %]</option>';
      [% END -%]
[% ELSE %]
      [% FOR j IN data.devices.gasses -%]
str = str +'<option value="[% j.name %]"[% IF j.name == data.model.$i.name %]selected=selected[% END %]>[% j.name %]</option>';
      [% END -%]
[% END %]
str = str + '</select>';
element.innerHTML = element.innerHTML + str; 
  [%- END -%]

  [% IF data.model.$i.type == 'complex' && data.model.$i.template == 'PSU' -%]
list['[% i %]'].name = '[% data.model.$i.name %]';
list['[% i %]'].mode = '[% data.model.$i.mode %]';
var str = "PSU<br><select class=label onclick='do_nothing();' id=dev_[% i %] onchange='set_dev(this,\"PSU\")' autocomplete=off>";
[% UNLESS data.model.$i.name %]str = str +'<option value="" selected=selected>Select</option>';[% END %]
      [% FOR j IN data.devices.PSUs -%]
str = str +'<option value="[% j.name %]"[% IF j.name == data.model.$i.name %]selected=selected[% END %]>[% j.name %] - [% j.gasses.join(', ')%]</option>';
      [% END -%]
str = str + '</select>';
element.innerHTML = element.innerHTML + str + '<br>[% data.model.$i.mode %]'; 
  [%- END -%]

  [% IF data.model.$i.type == 'complex' && data.model.$i.template == 'PID' -%]
list['[% i %]'].name = '[% data.model.$i.name %]';
list['[% i %]'].mode = '[% data.model.$i.mode %]';
var str = "PID<br><select class=label onclick='do_nothing();' id=dev_[% i %] onchange='set_dev(this,\"PID\")' autocomplete=off>";
[% UNLESS data.model.$i.name %]str = str +'<option value="" selected=selected>Select</option>';[% END %]
      [% FOR j IN data.devices.PIDs -%]
str = str +'<option value="[% j.name %]"[% IF j.name == data.model.$i.name %]selected=selected[% END %]>[% j.name %] - [% j.gasses.join(', ')%]</option>';
      [% END -%]
str = str + '</select>';
element.innerHTML = element.innerHTML + str + '<br>[% data.model.$i.mode %]'; 
  [%- END -%]

  [% IF data.model.$i.type == 'complex' && data.model.$i.template == 'Multiplex' -%]
list['[% i %]'].name = '[% data.model.$i.name %]';
list['[% i %]'].mode = '[% data.model.$i.mode %]';
var str = "<img src='/celltest/dev_png/m4.png'><br><select class=label onclick='do_nothing();' id=dev_[% i %] onchange='set_dev(this,\"multiplex\")' autocomplete=off>";
[% UNLESS data.model.$i.name %]str = str +'<option value="" selected=selected>Select</option>';[% END %]
      [% FOR j IN data.devices.Multiplexs -%]
str = str +'<option value="[% j.name %]"[% IF j.name == data.model.$i.name %]selected=selected[% END %]>[% j.name %] - [% j.gasses.join(', ')%]</option>';
      [% END -%]
str = str + '</select>';
element.innerHTML = element.innerHTML + str; 
  [%- END -%]
  [% IF data.model.$i.type == 'device' && data.model.$i.template == 'simple' && (data.model.$i.mode != 'pressure' && data.model.$i.mode != 'DPS') -%]
list['[% i %]'].name = '[% data.model.$i.name %]';
list['[% i %]'].mode = '[% data.model.$i.mode %]';
var str = "Simple<br><select class=label onclick='do_nothing();' id=dev_[% i %] onchange='set_dev(this,\"simplechannel\")' autocomplete=off>";
[% UNLESS data.model.$i.name %]str = str +'<option value="" selected=selected>Select</option>';[% END %]
      [%- FOR j IN data.devices.simplechannels -%]
str = str +'<option value="[% j.name %]"[% IF j.name == data.model.$i.name %]selected=selected[% END %]>[% j.name %]</option>';
      [%- END -%]
str = str + '</select>';
str = str + '[%  data.model.$i.mode %]';
element.innerHTML = element.innerHTML + str; 
  [%- END -%]
  [%- IF data.model.$i.type == 'tube' -%]
    [% IF data.model.$i.template == 'R1' -%]
element.innerHTML = '<img style="margin-bottom:-15px;;overflow: hidden;" src="/celltest/dev_png/[% data.model.$i.template %].png"><br><input class=label type=text onclick="do_nothing();" id=dev_'+cellid+' onchange="set_label(this)" value="[% data.model.$i.label %]" autocomplete=off>';
    [% ELSE -%]
element.innerHTML = '<img src="/celltest/dev_png/[% data.model.$i.template %].png">';
    [% END -%]
  [%- END -%]
  [%- IF data.model.$i.type == 'valve' -%]
element.innerHTML = '<img src="/celltest/dev_png/[% data.model.$i.template %].png">';
list['[% i %]'].mode = '[% data.model.$i.mode %]';
element.title = '[% data.model.$i.mode %]';
    [%- IF data.model.$i.mode == 'auto' || data.model.$i.mode  == 'readonly' -%]
list['[% i %]'].class = '[% data.model.$i.class %]';
list['[% i %]'].name = '[% data.model.$i.name %]';
var str = "<br><select class=label onclick='do_nothing();' id=dev_[% i %] onchange='set_dev(this,\"relay\")' autocomplete=off>";
[% UNLESS data.model.$i.name %]str = str +'<option value="" selected=selected>Select</option>';[% END %]
      [%- FOR j IN data.devices.relays -%]
[% IF data.model.$i.mode  == 'readonly' || j.readonly == 0 %]str = str +'<option value="[% j.name %]"[% IF j.name == data.model.$i.name %]selected=selected[% END %]>[% j.name %]</option>';[% END %]
      [%- END -%]
str = str + '</select>';
element.innerHTML = element.innerHTML + str; 
    [%- ELSE -%]
list['[% i %]'].label = '[% data.model.$i.label %]';
element.innerHTML = element.innerHTML + '<br><input class=label type=text onclick="do_nothing();" id=dev_'+cellid+' onchange="set_label(this)" value="[% data.model.$i.label %]" autocomplete=off>';
    [%- END -%]
  [%- END -%]
  [%- IF data.model.$i.type == 'mfc' -%]
element.innerHTML = '<img src="/celltest/dev_png/[% data.model.$i.template %].png" title="[% data.model.$i.mode %]">';
list['[% i %]'].mode = '[% data.model.$i.mode %]';
element.title = '[% data.model.$i.mode %]';
list['[% i %]'].class = '[% data.model.$i.class %]';
list['[% i %]'].name = '[% data.model.$i.name %]';
    [%- IF data.model.$i.mode == 'multiplex' -%]
var str = "<br><select class=label onclick='do_nothing();' id=dev_[% i %] onchange='set_dev(this,\"mfc\")' autocomplete=off>";
[% UNLESS data.model.$i.name %]str = str +'<option value="" selected=selected>Select</option>';[% END %]
      [%- FOR j IN data.devices.MFCs -%]
[% IF data.model.$i.mode  == 'multiplex' %]str = str +'<option value="[% j.name %]"[% IF j.name == data.model.$i.name %]selected=selected[% END %]>[% j.name %] - [% j.gasses.join(', ') %]</option>';[% END %]
      [%- END -%]
str = str + '</select>';
    [%- ELSE -%]
var str = "<br><select class=label onclick='do_nothing();' id=dev_[% i %] onchange='set_dev(this,\"gas\")' autocomplete=off>";
[% UNLESS data.model.$i.name %]str = str +'<option value="" selected=selected>Select</option>';[% END %]
      [%- FOR j IN data.devices.gasses -%]
[% IF data.model.$i.mode  == 'readonly' || j.readonly == 0 %]str = str +'<option value="[% j.name %]"[% IF j.name == data.model.$i.name %]selected=selected[% END %]>[% j.name %]</option>';[% END %]
      [%- END -%]
str = str + '</select>';
    [%- END -%]
element.innerHTML = element.innerHTML + str; 
  [%- END -%]
[%- END -%]

/* End setup reload data */

var relays = new Object();
[% FOR i IN data.devices.relays -%]
relays['[% i.name %]'] = new Object();
relays['[% i.name %]'].readonly = [% i.readonly %];
[% END -%]

var simples = new Object();
[% FOR i IN data.devices.simplechannels -%]
simples['[% i.name %]'] = new Object();
[% END -%]

var gasses = new Object();
[% FOR i IN data.devices.gasses -%]
gasses['[% i.name %]'] = new Object();
gasses['[% i.name %]'].readonly = [% i.readonly %];
[% END -%]

var mfcs = new Object();
[% FOR i IN data.devices.MFCs -%]
mfcs['[% i.name %]'] = new Object();
mfcs['[% i.name %]'].readonly = [% i.readonly %];
mfcs['[% i.name %]'].gasses = '[% i.gasses.join(', ') %]';
[% END -%]

var waters = new Object();
[% FOR i IN data.devices.waters -%]
waters['[% i.name %]'] = new Object();
waters['[% i.name %]'].readonly = [% i.readonly %];
[% END -%]

var Tlogs = new Object();
[% FOR i IN data.devices.Tlogs -%]
Tlogs['[% i.name %]'] = new Object();
[% END -%]

var tcontrols = new Object();
[% FOR i IN data.devices.Tcontrols -%]
tcontrols['[% i.name %]'] = new Object();
tcontrols['[% i.name %]'].readonly = [% i.readonly %];
[% END -%]

var pcontrols = new Object();
[% FOR i IN data.devices.Pcontrols -%]
pcontrols['[% i.name %]'] = new Object();
pcontrols['[% i.name %]'].readonly = [% i.readonly %];
[% END -%]

var multiplexs = new Object();
[% FOR i IN data.devices.Multiplexs -%]
multiplexs['[% i.name %]'] = new Object();
multiplexs['[% i.name %]'].readonly = [% i.readonly %];
multiplexs['[% i.name %]'].gasses = '[% i.gasses.join(', ') %]';
[% END -%]

var psus = new Object();
[% FOR i IN data.devices.PSUs -%]
psus['[% i.name %]'] = new Object();
psus['[% i.name %]'].readonly = [% i.readonly %];
psus['[% i.name %]'].type = '[% i.type %]';
[% END -%]


var pids = new Object();
[% FOR i IN data.devices.PIDs -%]
pids['[% i.name %]'] = new Object();
pids['[% i.name %]'].readonly = [% i.readonly %];
pids['[% i.name %]'].type = '[% i.type %]';
[% END -%]




function load_select(id,type,mode)
{
    var e = document.getElementById(id);
    e.options.length = 0;
    var option = document.createElement("option");
    option.value = '';
    option.text = 'Select';
    e.appendChild(option);
    if (type == 'Tempcontrol')
    {
        var lst = Object.keys(tcontrols).sort();
	for (var x in lst)
	{
	    var key = lst[x];	
	    var option = document.createElement("option");
	    option.value = key;
    	    option.text = key;
    	    e.appendChild(option);
	}     
    }
    if (type == 'Pcontrol')
    {
        var lst = Object.keys(pcontrols).sort();
	for (var x in lst)
	{
	    var key = lst[x];
	    var option = document.createElement("option");
	    option.value = key;
    	    option.text = key;
    	    e.appendChild(option);
	}     
    }
    if (type == 'PSU')
    {
        var lst = Object.keys(psus).sort();
	for (var x in lst)
	{
	    var key = lst[x];
	    var option = document.createElement("option");
	    option.value = key;
    	    option.text = key;
    	    e.appendChild(option);
	}     
    }
    if (type == 'PID')
    {
        var lst = Object.keys(pids).sort();
	for (var x in lst)
	{
	    var key = lst[x];
	    var option = document.createElement("option");
	    option.value = key;
    	    option.text = key;
    	    e.appendChild(option);
	}     
    }
    if (type == 'Tlog')
    {   
        var lst = Object.keys(Tlogs).sort();
	for (var x in lst)
	{
	    var key = lst[x];
	    var option = document.createElement("option");
	    option.value = key;
    	    option.text = key;
    	    e.appendChild(option);
	}     
    }
    if (type == 'simplechannel')
    {   
        var lst = Object.keys(simples).sort();
	for (var x in lst)
	{
	    var key = lst[x];
	    var option = document.createElement("option");
	    option.value = key;
    	    option.text = key;
    	    e.appendChild(option);
	}     
    }
    if (type == 'multiplex')
    {
        var lst = Object.keys(multiplexs).sort();
	for (var x in lst)
	{
	    var key = lst[x];
	    var option = document.createElement("option");
	    option.value = key;
    	    option.text = key + ' - '+ multiplexs[key].gasses;
    	    e.appendChild(option);
	} 
    }
    if (type == 'relay')
    {
        var lst = Object.keys(relays).sort();
	for (var x in lst)
	{
	    var key = lst[x];
	    if (mode == 'readonly' || relays[key].readonly == 0)
	    {
		var option = document.createElement("option");
	    	option.value = key;
    	    	option.text = key;
    	    	e.appendChild(option);
	    }
	} 
    }
    if (type == 'gas')
    {
        var lst = Object.keys(gasses).sort();
	for (var x in lst)
	{
	    var key = lst[x];
	    if (mode == 'readonly' || gasses[key].readonly == 0)
	    {
		var option = document.createElement("option");
	    	option.value = key;
    	    	option.text = key;
    	    	e.appendChild(option);
	    }
	} 
    }
    if (type == 'mfc')
    {
        var lst = Object.keys(mfcs).sort();
	for (var x in lst)
	{
	    var key = lst[x];
	    var option = document.createElement("option");
	    option.value = key;
    	    option.text = key + ' - '+ mfcs[key].gasses;
    	    e.appendChild(option);
	} 
    }
}

function do_nothing()
{
    event.cancelBubble=true;
}

function set_cell(e,x,y)
{
    element = e;
    cellid = x + '_' + y;
    document.getElementById('dev_select').style.display = 'inline-block';
}

function remove_dev()
{
    delete list[cellid];
    element.innerHTML = '';
    document.getElementById('dev_select').style.display = 'none';
    document.setup.model.value=JSON.stringify(list);
}

function select(t,dev,mode)
{
    delete list[cellid];
    list[cellid] = new Object();	
    list[cellid].template = dev;
    list[cellid].type = t;
    if (t == 'device')
    {
	list[cellid].mode = mode;
	if (mode == 'pressure')
	{
	   var l = new Array();
	   l.push('<img src="/celltest/dev_png/M5.png">')
	   l.push("<select class=label onclick='do_nothing();' id=dev_"+cellid+" onchange='set_dev(this,\"simplechannel\")'></select>");
	   element.innerHTML = l.join('\n');
           load_select('dev_'+cellid,'simplechannel',mode);
	}
	else if (mode == 'DPS')
	{
	   var l = new Array();
	   l.push('<img src="/celltest/dev_png/M8.png">')
	   l.push("<select class=label onclick='do_nothing();' id=dev_"+cellid+" onchange='set_dev(this,\"simplechannel\")'></select>");
	   element.innerHTML = l.join('\n');
           load_select('dev_'+cellid,'simplechannel',mode);
	}
	else if (dev == 'Tlog')
	{
	   var l = new Array();
	   l.push('Templog');
	   l.push('<br>');
	   l.push("<select class=label onclick='do_nothing();' id=dev_"+cellid+" onchange='set_dev(this,\"Templog\")'></select>");
	   l.push('<br>');
	   if (mode == 'readonly_K')
	   {	   
		l.push('&deg;K');
	   }	   
	   else	   
	   {
		l.push('&deg;C');
	   }
	   element.innerHTML = l.join('\n');
           load_select('dev_'+cellid,'Tlog',mode);
	}  
	else
	{
	   var l = new Array();
	   l.push('Simple');
	   l.push('<br>');
	   l.push("<select class=label onclick='do_nothing();' id=dev_"+cellid+" onchange='set_dev(this,\"simplechannel\")'></select>");
	   l.push('<br>');
	   l.push(mode);
	   element.innerHTML = l.join('\n');
           load_select('dev_'+cellid,'simplechannel',mode);
	}
    }
    if (t == 'complex' && dev == 'Multiplex')
    {
        element.innerHTML = '<img src="/celltest/dev_png/m4.png">';
        element.innerHTML = element.innerHTML + "<br><select class=label onclick='do_nothing();' id=dev_"+cellid+" onchange='set_dev(this,\"multiplex\")'></select>";
	list[cellid].mode = mode;
	element.title = mode;
	load_select('dev_'+cellid,'multiplex',mode);       
    }
    if (t == 'complex' && (dev == 'Tempcontrol' || dev == 'PSU' || dev == 'PID'))    
    {
	var l = new Array();
	l.push(dev.substring(0,8));
	l.push('<br>');
	l.push("<select class=label onclick='do_nothing();' id=dev_"+cellid+" onchange='set_dev(this,\"+dev+\")'></select>");
	l.push('<br>');
	l.push(mode);
	list[cellid].mode = mode;
	element.innerHTML = l.join('\n');
        load_select('dev_'+cellid,dev,mode);
    }
    if (t == 'pcontrol')
    {
	element.innerHTML = '<img src="/celltest/dev_png/'+dev+'.png">';
	list[cellid].mode = mode;
	element.title = mode;
	element.innerHTML = element.innerHTML + "<br><select class=label onclick='do_nothing();' id=dev_"+cellid+" onchange='set_dev(this,\"pcontrol\")'></select>";
	if (mode == 'auto')
	{	
	   load_select('dev_'+cellid,'Pcontrol',mode);
	}
	else
	{
	   load_select('dev_'+cellid,'gas',mode);
	}
    }
    if (t == 'tube')
    {
        if (dev == 'R1')
	{
	    element.innerHTML = '<img style="margin-bottom:-15px;;overflow: hidden;" src="/celltest/dev_png/'+dev+'.png"><br><input class=label type=text onclick="do_nothing();" id=dev_'+cellid+' onchange="set_label(this)">';
	}
	else
	{
	    element.innerHTML = '<img src="/celltest/dev_png/'+dev+'.png">';
	}
    }
    if (t == 'valve')
    {
        element.innerHTML = '<img src="/celltest/dev_png/'+dev+'.png">';
	list[cellid].mode = mode;
	element.title = mode;
	if (mode == 'auto' || mode == 'readonly')
	{
	    element.innerHTML = element.innerHTML + "<br><select class=label onclick='do_nothing();' id=dev_"+cellid+" onchange='set_dev(this,\"relay\")'></select>";
	    load_select('dev_'+cellid,'relay',mode);
	}
	else
	{	
	    element.innerHTML = element.innerHTML + '<br><input class=label type=text onclick="do_nothing();" id=dev_'+cellid+' onchange="set_label(this)">';
	}
    }
    if (t == 'mfc')
    {
        element.innerHTML = '<img src="/celltest/dev_png/'+dev+'.png">';
	list[cellid].mode = mode;
	element.title = mode;
	element.innerHTML = element.innerHTML + "<br><select class=label onclick='do_nothing();' id=dev_"+cellid+" onchange='set_dev(this,\"relay\")'></select>";
	if (mode == 'multiplex')
	{
	   load_select('dev_'+cellid,'mfc',mode);
	}	
	else	
	{	
	   load_select('dev_'+cellid,'gas',mode);
	}
    }
    document.getElementById('dev_select').style.display = 'none';
    document.setup.model.value=JSON.stringify(list);
}

function set_devices(res,id)
{
    var arr = res.split(/\n/);
    var e = document.getElementById('dev_'+id);
    e.options.length = 0;
    if (arr[0] == 'OK')
    {
	arr.shift;
	for (var x = 0; x < arr.length; x++)
	{
	    var option = document.createElement("option");
	    option.value = arr[x];
    	    option.text = arr[x];
    	    e.appendChild(option);
	}
	return true;
    }	
    alert(res);
}

function set_dev(e,cl)
{
	console.log(e);
	console.log(cl);
    var id = e.parentNode.id;
    list[id].name = e.value;
    list[id].class = cl;
    document.setup.model.value=JSON.stringify(list);
    console.log(document.setup.model.value);
}

function set_label(e)
{
    var id = e.parentNode.id;
    list[id].label = e.value;
    document.setup.model.value=JSON.stringify(list);
}

[% IF data.model %]
/*console.log(JSON.stringify(list));*/
document.setup.model.value=JSON.stringify(list);
[% END %]


</script>

<!-- End graphical setup templte -->