<%include file="/pageheader.html"/>

<%!
from kaithem.src import devices,modules_state, devices_interface
import os, gc
from kaithem.src import directories
import urllib.parse

%>
<style>
    main{

    width:  calc(min(60em, 100vw, 100%));
    }

    .device-card{
        overflow: auto;
        max-height: 24rem;
    }

</style>
<script type="module" src="/static/js/widget.mjs?cache_version=c6d0887e-af6b-11ef-af85-5fc2044b2ae0"></script>

<script type="module" src="/static/js/picodash.mjs?cache_version=c6d0887e-af6b-11ef-af85-5fc2044b2ae0"></script>
<script src="/static/js/thirdparty/showdown.min.js"></script>


<script>
    function req(n){
        var xhttp = new XMLHttpRequest();
        xhttp.open("POST",n, true);
        xhttp.send();
    }
</script>
<title>Devices</title>

<h1>Devices</h1>
<section class="window paper">
<div class="tool-bar">
    <a href="/devices/report">Printable Report</a>
</div>
<details class="help"><summary><i class="mdi mdi-help-circle-outline"></i></summary>
    This section provides an easy way to configure devices supported
    by Kaithem's remote device abstraction layer.
</details>


<%def name="device(i,title='', devObj = None)">
<%

devObj = devObj or deviceData[i]()

if devObj.device_type_name == 'UnusedSubdevice':
    greyout  = "opacity: 70%;"
else:
    greyout = ''

%>

%if hasattr(devObj, 'subdevices') and devObj.subdevices:
<hr class="w-full">
%endif
<article class="card margin w-sm-half" style="${greyout} min-width: min-content">
        <header>
        <div class="tool-bar">
        <h3 title="${devObj.device_type_name}">

            <a href="device/${i|h}/manage">${devObj.title|h}

                %if (hasattr(devObj,'errors') and len(devObj.errors)) :
                <span style="color: ${'red' if len(devObj.errors) else 'inherit' };">
                    ${(str(len(devObj.errors))+" errors")}
                </span>
                %endif
            </a>
        </h3>

        %if devObj.device_type_name == 'UnusedSubdevice':
        (Not found)
        %endif




        %if hasattr(devObj, 'tagpoints'):

        %if not hasattr(deviceData[i](),'_kaithem_is_subdevice'):
        <a href="/modules/module/${url(devObj.parent_module)}/deleteresource/${url(devObj.parent_resource)}" class="button" style="flex-grow:0"><i class="mdi mdi-delete"></i></a>
        %endif

        </div>

</header>
        %if 'color' in devObj.tagpoints and devObj.tagpoints['color'].subtype=='color':

        <div class="tool-bar">
            <button  type="button"   style="background-color: #fafafa;" onclick="req('settarget/${url(i)}/color?value=%23fafafa')">Argent</button>
            <button  type="button"   style="background-color: #ffe066;" onclick="req('settarget/${url(i)}/color?value=%23ffe066')">Or</button>
            <button  type="button"   style="background-color: #f0dc82;" onclick="req('settarget/${url(i)}/color?value=%23f0dc82')">Buff</button>
            <button  type="button"   style="background-color: #7c1c05;  color: lightblue;"" onclick="req('settarget/${url(i)}/color?value=%237c1c05')">Copper</button>
        </div>
        <div class="tool-bar">
                <button  type="button"  style="background-color: #d7374a;"  onclick="req('settarget/${url(i)}/color?value=%23d7374a')">Gules</button>
                <button  type="button"  style="background-color: #333333; color: lightblue;"  onclick="req('settarget/${url(i)}/color?value=%23333333')">Sable</button>
                <button  type="button"  style="background-color: #377cd7;"  onclick="req('settarget/${url(i)}/color?value=%23377cd7')">Azure</button>
                <button  type="button"   style="background-color: #26c061;" onclick="req('settarget/${url(i)}/color?value=%2326c061')">Vert</button>
                <button  type="button"   style="background-color: #854296;  color: lightblue;" onclick="req('settarget/${url(i)}/color?value=%23854296')">Purpure</button>
        </div>

        <div class="tool-bar">
            <button  type="button" onclick="req('dimtarget/${url(i)}/color?value=0.1')">10%</button>
            <button  type="button" onclick="req('dimtarget/${url(i)}/color?value=0.2')">20%</button>
            <button  type="button" onclick="req('dimtarget/${url(i)}/color?value=0.5')">50%</button>
            <button  type="button" onclick="req('dimtarget/${url(i)}/color?value=1.0')">100%</button>

        </div>


        %endif
        %endif

        %if devObj.parent_module and modules_state.ActiveModules[devObj.parent_module][devObj.parent_resource].get('resource_label_image'):
        <img alt="thumbnail" style="max-width: 32em; max-height: 8em"
        src="/modules/label_image/${ url(devObj.parent_module) }/${ url(devObj.parent_resource) }">
        %endif %}


    <div class="stacked-form margin-top device-card">
        %if hasattr(devObj, 'alerts') and devObj.alerts:
        %for i in devObj.alerts:
        % if devObj.alerts[i].sm.state!='normal':
        <p class="danger"><i class="mdi mdi-alert"></i>${i}</p>
        %endif
        %endfor
        %endif

        %if hasattr(devObj, 'tagPoints') and devObj.tagPoints:

            %for i in sorted(list(devObj.tagPoints.keys())):
            %if devObj.dashboard_datapoints.get(i,True):
                %if devObj.tagPoints[i].type == 'string':
                <div class="flex-row"><label><ds-span min="0" max="1" source="tag:${devObj.tagPoints[i].name}"></ds-span>${i}</label></div>
                %elif devObj.tagPoints[i].type == 'number':

                    %if devObj.tagPoints[i].subtype in ('bang','trigger'):
                        <label><div class="grow"><b style="font-size: 11pt;">${i}</b></div>
                            <ds-button
                            source="tag:${devObj.tagPoints[i].name}" filter="confirm: Confirm?">
                            trigger(<ds-span source="tag:${devObj.tagPoints[i].name}"></ds-span>)
                        </ds-button>

                        </label>
                    %elif devObj.tagPoints[i].subtype in ('bool', 'boolean'):
                        <label><div class="grow"><b style="font-size: 11pt;">${i}</b></div>
                            <ds-input type="checkbox" class="toggle" source="tag:${devObj.tagPoints[i].name}" filter="confirm: Confirm?"></ds-input>
                        </label>
                    %else:
                        <label><b>${i}</b>
                            <div class="flex-col w-6rem">
                                <ds-input class="w-full" type="number" filter="fixedpoint: 3" source="tag:${devObj.tagPoints[i].name}"  filter="confirm: Confirm?"></ds-input>
                                <ds-meter class="w-full" source="tag:${devObj.tagPoints[i].name}"></ds-meter>
                            </div>
                        </label>
                    %endif
                %endif
            %endif
            %endfor
        %endif


    </div>

    %if devObj.config.get('description',''):
    <p>
        ${devObj.config.get('description')|h}
    </p>
    %endif

    </article>

%if hasattr(devObj, 'subdevices') and devObj.subdevices:
%for j in devObj.subdevices:
${device(devObj.subdevices[j].name, devObj=devObj.subdevices[j])}
%endfor
<hr class="w-full">
%endif



</%def>


<div style="display: flex; flex-wrap: wrap; flex-direction: row;">
%for i in sorted(deviceData.keys()):
%if not hasattr(deviceData[i](),'_kaithem_is_subdevice'):
${device(i)}
%endif

%endfor

%for i in disks:
<article class="card margin w-sm-half" style="min-width: min-content; max-width: 18rem">
    <header>
        <h3>${i}</h3>
    </header>

    <table>
        <tr><td>Size</td><td>${si(disks[i]['total'])}</td></tr>
        <tr><td>Used</td><td>${si(disks[i]['used'])}</td></tr>
    </table>
    %if is_mounted(disks[i]['device']):
    <form method="post" action="/udisks/unmount">
        <input type="hidden" name="partition" value="${disks[i]['device']}">
        <button class="w-full" type="submit">Eject</button>
    </form>
    %else:
    <form method="post" action="/udisks/mount">
        <input type="hidden" name="partition" value="${disks[i]['device']}">
        <button class="w-full" type="submit">Connect</button>
    </form>
    %endif
</article>
%endfor

</div>


<%
d =  devices.getZombies()
%>



%if d:
<details>
<summary>
<h2>Zombie Devices</h2>
</summary>

<div style="width: 90vw; overflow: scroll;">
%for i in sorted(d):
<h3>${i[0]|h}</h3>
<pre>
    ${gc.get_referrers(i[1])|h}
    ${gc.get_referrers(gc.get_referrers(i[1])[0])}
</pre>
<p>

</p>
%endfor
</div>
</details>
%endif

<%
del d
%>


<datalist id="deviceTypes">
    %for i in devices.device_types:
    <option value="${i}" title=${devices.device_types[i].description} >
    %endfor

    %for i in devices.importedDeviceTypes:
    <option value="${i}" title=${i} >
    %endfor
</datalist>

</div>

</section>
<%include file="/pagefooter.html"/>

