JSFiddle - React, Tailwind, and code Playground

by eurica

HTML

<script src="http://visjs.org/dist/vis.js"></script>
<link rel="stylesheet" href="http://visjs.org/dist/vis.css">
<script src="http://eurica.github.io/pdjs/js/pdjs.js"></script>
<h2>Time spent on Webdemo incidents 2014-09-15</h2>
This takes a while to load, be patient

<table border="1">
    <tr>
        <td colspan="2" id="summary"></td>
    </tr>
    <tr>
        <td>
            <div id="users"></div>
        </td>
        <td>
            <div id="incidents"></div>
        </td>
    </tr>
</table>

CSS

* {
    vertical-align:top;
}

JavaScript

var users = []
var timespent = /^\W*[0-9.]+\W?[mhd]\W*$/mgi //Regex to extract things that look like time spent

// Part of my Hacky UI
e2i = function (email) {
    s = email.trim().replace(/[@.+]/g, "")
    console.log("EMAIL " + email + " => " + s)
    return s
}


PDJS = new PDJSobj({ //Read-only key for my sample account
    subdomain: "webdemo",
    token: "pkTGpzBoak9fAaPcuWN9",
})

parse_notes = function (id, json) {
    $.each(json.notes, function (n, note) {
        ts = note.content.match(timespent)
        if (ts) {
            ts_n = eval(ts[0].toLowerCase().replace("m", "/60").replace("d", "*24").replace("h", ""))
            console.log("There's a note with Time for " + note.user.email + ": " + ts_n)
            if (users[note.user.email]) {
                users[note.user.email] += "+" + ts_n
            } else {
                users[note.user.email] = ts_n
            }
            $("#users").append("<div>" + note.user.email + " spent " + ts_n + " hours<br><pre>" + note.content + "</pre></div>")
            u = $("#" + e2i(note.user.email))
            console.log(u)
            console.log(u.length)
            if (u.length == 0) {
                $("#summary").append("<div id='" + e2i(note.user.email) + "'>" + note.user.email + ": <span> " + ts_n + "</span> hours</div>")
            } else {
                $("#" + e2i(note.user.email) + " span").text(eval(users[note.user.email]))
            }
            console.log(users)
        }
    })
}


PDJS.api({ // https://github.com/eurica/pdjs
    res: "incidents",
    data: {
        limit: 100,
        sort_by: "created_on:desc",
        since: "2014-09-15T12:00:00-07:00", //Actually it's just the afternoon, it's just a demo
        until: "2014-09-15T23:59:59-07:00",
    },
    success: function (json) {
        $.each(json.incidents, function (n, i) {
            $("#incidents").append("<div id ='" + i.id + "'>" + i.id + " " + (i.trigger_summary_data.description ||...