EyeLS/stats.html at main · s0hamjain/EyeLS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en" ng-app="eyelsStats">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>EyeLS — Stats</title>
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/pages.css">
  <!-- Angular (AngularJS 1.x) via CDN -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
</head>

<body class="page-shell">
  <div ng-controller="StatsController as vm">
    <header class="topbar">
      <div class="brand">
        <span class="eye-dot"></span><span class="logo-text">EyeLS</span>
      </div>
      <div class="status">Session stats — computed by <code>tools/stats</code> (C++)</div>
      <div class="actions">
        <a class="btn btn-ghost" href="/settings">Settings</a>
        <a class="btn btn-ghost" href="/">Keyboard</a>
      </div>
    </header>

    <main class="page-main">
      <section class="card hero-card">
        <div class="hero-row">
          <div>
            <div class="muted">Total sessions</div>
            <div class="big-number">{{ vm.sessions.length }}</div>
          </div>
          <div>
            <div class="muted">Total characters typed</div>
            <div class="big-number">{{ vm.aggregateChars() }}</div>
          </div>
          <div>
            <div class="muted">Powered by</div>
            <div class="stack-pills">
              <span class="pill pill-angular">Angular</span>
              <span class="pill pill-node">Node.js</span>
              <span class="pill pill-cpp">C++</span>
            </div>
          </div>
        </div>
      </section>

      <section class="card" ng-if="vm.sessions.length === 0">
        <p class="muted">No sessions saved yet. Type something on the keyboard and
          press <strong>Save</strong>, then come back here.</p>
        <a class="btn btn-primary" href="/">Go to keyboard</a>
      </section>

      <section ng-if="vm.sessions.length > 0">
        <div class="card session-card" ng-repeat="session in vm.sessions track by session.id">
          <div class="session-head">
            <div>
              <div class="session-time">{{ vm.formatTime(session.timestamp) }}</div>
              <div class="muted">{{ session.characters }} characters</div>
            </div>
            <div class="session-actions">
              <button class="btn btn-ghost" ng-click="vm.toggle(session)">
                {{ vm.isExpanded(session) ? 'Hide' : 'Analyze' }}
              </button>
              <button class="btn btn-ghost danger" ng-click="vm.remove(session)">Delete</button>
            </div>
          </div>

          <pre class="session-text">{{ session.text }}</pre>

          <div class="session-stats" ng-if="vm.isExpanded(session)">
            <div ng-if="vm.stats[session.id].loading" class="muted">Analyzing…</div>
            <div ng-if="vm.stats[session.id].error" class="error">
              {{ vm.stats[session.id].error }}
            </div>
            <div ng-if="vm.stats[session.id].data" class="stat-grid">
              <div class="stat">
                <div class="muted">Words</div>
                <div class="stat-value">{{ vm.stats[session.id].data.totalWords }}</div>
              </div>
              <div class="stat">
                <div class="muted">Unique words</div>
                <div class="stat-value">{{ vm.stats[session.id].data.uniqueWords }}</div>
              </div>
              <div class="stat">
                <div class="muted">Sentences</div>
                <div class="stat-value">{{ vm.stats[session.id].data.sentences }}</div>
              </div>
              <div class="stat">
                <div class="muted">Avg word len</div>
                <div class="stat-value">{{ vm.stats[session.id].data.averageWordLength | number:1 }}</div>
              </div>
              <div class="stat">
                <div class="muted">Read aloud</div>
                <div class="stat-value">{{ vm.stats[session.id].data.estimatedReadingSeconds | number:1 }}s</div>
              </div>

              <div class="stat top-words" ng-if="vm.stats[session.id].data.topWords.length">
                <div class="muted">Top words</div>
                <ul>
                  <li ng-repeat="w in vm.stats[session.id].data.topWords">
                    <span class="word">{{ w.word }}</span>
                    <span class="count">{{ w.count }}</span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="stat-source muted">
              Computed natively by <code>./tools/stats</code> (C++) via Node.js.
            </div>
          </div>
        </div>
      </section>
    </main>
  </div>

  <script src="./js/stats.js"></script>
</body>

</html>