Webdis を使った 在席表

12683 ワード
Redis webdis Redis テキストリンク

canvas で作る在席表　のデータソースを JSON から、Redis に替えました。
Redis へは、Webdis 経由でアクセスします。

zaiseki_redis.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="zaiseki_redis.js"></script>
<title>在席表</title>
</head>
<body>
<div>
<canvas id="bar_area" width="400" height="600"></canvas>
</div>
<hr />
version Jan/03/2018 PM 17:27<p />
</body>
</html>
zaiseki_redis.js
// -------------------------------------------------------------------------
//  zaiseki_redis.js
//
//                   Jan/03/2018
// -------------------------------------------------------------------------
jQuery  (function ()
{
    const url_keys = "http://localhost:7379/keys/id*"

    jQuery.get (url_keys,function (res)
        {
        var dict_aa = {}
        var icount = 0
        const keys = res.keys

        keys.forEach (function (key,index)
            {
            const url_json = "http://localhost:7379/GET/" + key

            jQuery.get (url_json,function (get_aa)
                {
                const json_str = get_aa.GET
                dict_aa[key] = JSON.parse(json_str)
                icount += 1

                if (icount == keys.length)
                    {
                    display_proc (dict_aa)
                    }
                })
            })
        })
})

// -------------------------------------------------------------------------
// [4]:
function display_proc (dict_aa)
{
    var bar = document.getElementById('bar_area')
    var ctx = bar.getContext('2d')

    ctx.font = "18px 'ＭＳ Ｐゴシック'"
    ctx.strokeStyle = "black" 

    const delt_y = 40

    const xx = 100
    var yy = 30
    ctx.strokeText("在席表",xx + 20,yy)

    yy = 70
    ctx.strokeStyle = "blue" 
    for (var key in dict_aa)
        {
        const unit = dict_aa[key]
        ctx.strokeText(unit.name,xx,yy)
        var color = 'red'
        if (unit.office)
            {
            color = 'green'
            } 

        draw_circle_proc (ctx,xx+100,yy-8,color)
        yy += delt_y
        }
}

// -------------------------------------------------------------------------
// [4-4]:
function  draw_circle_proc (ctx,xx,yy,color)
{
    const radius = 10
    ctx.beginPath()
    ctx.fillStyle = color
    ctx.arc (xx,yy,radius,0,Math.PI*2,false)
    ctx.fill()
    ctx.closePath()
    ctx.stroke()
}

// -------------------------------------------------------------------------

redis と、webdis が動いている必要があります。

$ systemctl status redis
● redis.service - Advanced key-value store
   Loaded: loaded (/usr/lib/systemd/system/redis.service; disabled; vendor prese
   Active: active (running) since Wed 2018-01-03 17:01:39 JST; 32min ago
 Main PID: 907 (redis-server)

$ systemctl status webdis
● webdis.service - REST server for Redis data
   Loaded: loaded (/usr/lib/systemd/system/webdis.service; disabled; vendor pres
   Active: active (running) since Wed 2018-01-03 17:01:54 JST; 33min ago

参考ページ
Webdis の使い方

Python Matplotlib図面例
nodeエクスポートexcel