extend layout

block content

    .intro
        p
            //-
                | Hier siehst du den aktuellen Status von uns. Die Daten werden vom Router und unserem Flukso
                | eingesammelt. Die Anzahl der Geräte und der Status selber werden Minütlich abgefragt. Unseren
                | Energieverbrauch bekommst du alle fünf Sekunden neu. Den Status "geöffnet" oder "geschlossen"
                | bestimmt das Programm mit einem ping auf den Switch im Raum. Mit dem Knopf unter dem Stromverbrauch
                | kannst du einschalten, dass du eine Benachrichtigung bei einer Änderung bekommst. Der Tab muss dafür offen bleiben.
            | Hier siehst du den aktuellen Status von uns. Die Daten werden von unserem Flukso
            | eingesammelt. Der Status selber wird Minütlich abgefragt. Unseren
            | Energieverbrauch bekommst du alle fünf Sekunden neu. Den Status "geöffnet" oder "geschlossen"
            | bestimmt das Programm mit einem ping auf den Switch im Raum. Mit dem Knopf unter dem Stromverbrauch
            | kannst du einschalten, dass du eine Benachrichtigung bei einer Änderung bekommst. Der Tab muss dafür offen bleiben.

    .ink-grid(ng-controller='StatusCtrl')
        .column-group.gutters
            .large-20.medium-20.small-100


                div(class="status-icon status-icon-{{simple.state}}")

                dl
                    dt aktueller Status:
                    dd {{simple.state | statustostring}}

                    dt letzte Abfrage:
                    dd {{simple.lastchange | date:'dd.MM.yyyy HH:mm:ss'}}

                    //-
                        dt aktive Ger&auml;te:
                        dd {{simple.count}}



            //-
                .large-50.medium-80.small-100
                    h2 Anzahl Geräte im LAN:

                    #graph



                    h2 Personen anwesend:

                    span(ng-repeat="name in simple.names")
                        | {{name}}

                        span(ng-show=" ! $last ")
                            | , <!-- -->

            .large-30.medium-100.small-100
                h2 Energieverbrauch

                #gauge.power
                button(type="button", onclick="toggle();", class="btn btn-block btn-danger", id="notificationButton") Statusbenachrichtigungen aus


block scripts
    script(type="text/javascript",src="/js/vendor/d3.min.js")
    script(type="text/javascript",src="/js/vendor/d3.layout.min.js")
    script(type="text/javascript",src="/js/vendor/rickshaw.min.js")
    script(type="text/javascript",src="/js/vendor/moment.min.js")
    script(type="text/javascript",src="/js/graph.js")
    script(type="text/javascript",src="/js/vendor/raphael.2.1.0.min.js")
    script(type="text/javascript",src="/js/vendor/justgage.1.0.1.min.js")

