Mercurial > lbo > hg > analyrics

<!DOCTYPE html>
<html>
    <head>
        <title>Analyrics Login</title>
        <script src="static/chart.min.js" type="application/javascript"></script>

        <style>
            #logo { color: #22bb22; font-size: 20pt; font-style: bold; }
            #header { color: #bb2222; }
            .useraction { float: right;  padding: 3pt; }
            .userdomain { float: right;  padding: 3pt; }
            #logout { float: right; padding: 3pt; }
            #flashtext {  }
            #flash { text-align: center; border-style: solid; border-color: #22aa22; margin-left: 30%; margin-right: 30%; }
            #errortext {  }
            #error { text-align: center; border-style: solid; border-color: #aa2222; margin-left: 30%; margin-right: 30%; }

            .plottitle { text-align: center; }
            .plotrow { border-style: solid; border-color: blue; text-align: center; }
            .plotframe { border-style: solid; border-color: green; display: inline-block; margin: 5pt; }

            .fullwidth { width: 95%; }
            .halfwidth { width: 47%; }
        </style>

    </head>
    <body>

    <!-- Header -->
    <div id="header">
        <span id="logo">AnaLyrics</span>
{{#if loggedin}}
        <form id="logout" action="/logout" method="POST">
            <input type="submit" value="Log out" />
        </form>
        <div class="useraction">Logged in as <b>{{username}}</b>.</div>
        <div class="userdomain">{{#if domain}}Domain: <b>{{domain}}</b>{{else}}<i>(all domains)</i>{{/if}}</div>
{{else}}
        <a class="useraction" href="login">Log in</a>
{{/if}}
    </div>
    {{#if flash}}<div id="flash"><span id="flashtext">{{flash}}<span></div>{{/if}}
    {{#if error}}<div id="error"><span id="errortext">{{error}}</span></div>{{/if}}

    <!-- Plots -- only shown when logged in. -->
    {{#if loggedin}}
    <div class="plotrow row1">
        <div class="plottitle">Visits and Sessions</div>
        <div class="plotframe fullwidth">
            <canvas id="visitsAndSessions" height="100"></canvas>
        </div>
    </div>
    <div class="plotrow row2">
        <div class="plotframe halfwidth"> </div>
        <div class="plotframe halfwidth"> </div>
    </div>

    <script>
        let plots = {"visitsAndSessions": {{{ chartconfig.visitsAndSessions }}} };

        Object.keys(plots).forEach((cv) => {
                    const ctx = document.getElementById(cv).getContext('2d');
                    const myChart = new Chart(ctx, plots[cv]);
                });
    </script>
    {{/if}}

    </body>
</html>
author	Lewin Bormann <lbo@spheniscida.de>
date	Mon, 11 Jul 2022 20:25:46 -0700
parents	ab4b3012fde3
children	af328a6c7d9f