Merge branch 'master' into aureplop/kfet_cms

kfet/open/static/kfetopen/kfet-open.css

@@ -0,0 +1,50 @@
+.kfetopen-st-opened  .bullet { background: #73C252; }
+.kfetopen-st-closed  .bullet { background: #B42B26; }
+.kfetopen-st-unknown .bullet { background: #D4BE4C; }
+.kfetopen-st-fake_closed .bullet {
+    background: repeating-linear-gradient(
+        45deg,
+        #73C252, #73C252 5px, #B42B26 5px, #B42B26 10px
+    );
+}
+
+.kfetopen {
+    float: left;
+}
+
+.kfetopen .base {
+    height: 50px;
+    padding: 15px;
+
+    display: inline-flex;
+    align-items: center;
+}
+
+.kfetopen .details {
+    margin: 0;
+    padding: 10px !important;
+    min-width: 200px;
+    font-family: "Roboto Slab";
+    font-size: 16px;
+    color: black;
+}
+
+.kfetopen .bullet {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    transition: background 0.15s;
+}
+
+.kfetopen .warning {
+    margin-left: 15px;
+}
+
+.kfetopen .status-text {
+    text-transform: uppercase;
+}
+
+.kfetopen .force-close-btn {
+    width: 100%;
+    margin-top: 5px;
+}

kfet/open/static/kfetopen/kfet-open.js

@@ -0,0 +1,113 @@
+var OpenWS = new KfetWebsocket({
+    relative_url: "open/"
+});
+
+var OpenKfet = function(force_close_url, admin) {
+    this.force_close_url = force_close_url;
+    this.admin = admin;
+
+    this.status = this.UNKNOWN;
+    this.dom = {
+        status_text: $('.kfetopen .status-text'),
+        force_close_btn: $('.kfetopen .force-close-btn'),
+        warning: $('.kfetopen .warning')
+    },
+
+    this.dom.force_close_btn.click( () => this.toggle_force_close() );
+    setInterval( () => this.refresh(), this.refresh_interval * 1000);
+    OpenWS.add_handler( data => this.refresh(data) );
+
+};
+
+OpenKfet.prototype = {
+    // Status is unknown after . minutes without update.
+    time_unknown: 15,
+    // Maximum interval (seconds) between two UI refresh.
+    refresh_interval: 20,
+
+    // Prefix for classes describing place status.
+    class_prefix: 'kfetopen-st-',
+    // Set status-classes on this dom element.
+    target: 'body',
+
+    // Status
+    OPENED: "opened",
+    CLOSED: "closed",
+    UNKNOWN: "unknown",
+
+    // Admin status
+    FAKE_CLOSED: "fake_closed",
+
+    // Display values
+    status_text: {
+        opened: "ouverte",
+        closed: "fermée",
+        unknown: "_____"
+    },
+    force_text: {
+        activate: "Fermer manuellement",
+        deactivate: "Réouvrir la K-Fêt"
+    },
+
+    get is_recent() {
+        return this.last_update && moment().diff(this.last_update, 'minute') <= this.time_unknown;
+    },
+
+    refresh: function(data) {
+        if (data) {
+            $.extend(this, data);
+            this.last_update = moment();
+        }
+        if (!this.is_recent)
+            this.status = this.UNKNOWN;
+        this.refresh_dom();
+    },
+
+    refresh_dom: function() {
+        let status = this.status;
+        this.clear_class();
+
+        this.add_class(status);
+        this.dom.status_text.html(this.status_text[status]);
+
+        // admin specific
+        if (this.admin) {
+            this.add_class(this.admin_status);
+            if (this.force_close) {
+                this.dom.warning.addClass('in');
+                this.dom.force_close_btn.html(this.force_text['deactivate']);
+            } else {
+                this.dom.warning.removeClass('in');
+                this.dom.force_close_btn.html(this.force_text['activate']);
+            }
+        }
+    },
+
+    toggle_force_close: function(password) {
+        $.post({
+            url: this.force_close_url,
+            data: {force_close: !this.force_close},
+            beforeSend: function ($xhr) {
+                $xhr.setRequestHeader("X-CSRFToken", csrftoken);
+                if (password !== undefined)
+                    $xhr.setRequestHeader("KFetPassword", password);
+            }
+        })
+        .fail(function($xhr) {
+            switch ($xhr.status) {
+            case 403:
+                requestAuth({'errors': {}}, this.toggle_force_close);
+                break;
+            }
+        });
+    },
+
+    clear_class: function() {
+        let re = new RegExp('(^|\\s)' + this.class_prefix + '\\S+', 'g');
+        $(this.target).attr('class', (i, c) => c ? c.replace(re, '') : '');
+    },
+
+    add_class: function(status) {
+        $(this.target).addClass(this.class_prefix + status);
+    }
+};