https://coral.shoes/morse-trainer/history.js

1
2// items in the form
3// {
4//   "complete": bool,
5//   "accuracy": float,
6//   "missed": int,
7//   "incorrect": int,
8//   "extra": int,
9//   "name_short": str,
10//   "name_long": str,
11// }
12class SessionHistory {
13    constructor() {
14        if (window.localStorage.getItem("session-history")) {
15            let session_history_enc = window.localStorage.getItem("session-history");
16            this.session_history = JSON.parse(atob(session_history_enc)) || [];
17        } else {
18            this.session_history = [];
19        }
20    }
21
22    bind_reset_button(el) {
23        let self = this;
24        el.addEventListener("click", e => {
25            if (!confirm("Reset history?"))
26                return;
27            this.session_history = [];
28            this.commit(); this.render();
29        });
30    }
31
32    commit() {
33        window.localStorage.setItem("session-history", btoa(JSON.stringify(this.session_history)));
34    }
35
36    add_commit_and_rerender(entry) {
37        this.session_history.push(entry);
38        this.commit();
39        this.render();
40    }
41
42    render() {
43        let list = document.getElementById("history-list");
44        let new_children = [];
45
46        let idx_width_wanted = ("" + (this.session_history.length + 1)).length;
47
48        let n_complete = 0;
49
50        for (let index = 0; index < this.session_history.length; index++) {
51            let item = this.session_history[index];
52
53            if (item.complete)
54                n_complete++;
55
56            let attempt = document.createElement("div");
57            attempt.classList.add("history-attempt");
58            if (!item.complete)
59                attempt.classList.add("fail");
60
61            let history_idx = document.createElement("span");
62            history_idx.classList.add("history-idx");
63            history_idx.innerText = " ".repeat(idx_width_wanted - ("" + (index + 1)).length) + (index + 1) + ": ";
64            attempt.appendChild(history_idx);
65
66            let history_accuracy = document.createElement("span");
67            history_accuracy.classList.add("history-accuracy");
68            history_accuracy.innerText = (0 | item.accuracy * 100) + "%";
69            if (!item.complete)
70                history_accuracy.innerText = "DNF (" + history_accuracy.innerText + ")";
71            history_accuracy.setAttribute("data-exact", ((0 | item.accuracy * 10000) / 100) + "%");
72            attempt.appendChild(history_accuracy);
73
74            attempt.appendChild(document.createTextNode(" "));
75
76            let history_missed = document.createElement("span");
77            history_missed.classList.add("history-missed");
78            history_missed.innerText = "-" + item.missed;
79            attempt.appendChild(history_missed);
80
81            attempt.appendChild(document.createTextNode("/"));
82
83            let history_incorrect = document.createElement("span");
84            history_incorrect.classList.add("history-incorrect");
85            history_incorrect.innerText = "?" + item.incorrect;
86            attempt.appendChild(history_incorrect);
87
88            attempt.appendChild(document.createTextNode("/"));
89
90            let history_additional = document.createElement("span");
91            history_additional.classList.add("history-additional");
92            history_additional.innerText = "+" + item.extra;
93            attempt.appendChild(history_additional);
94
95            attempt.appendChild(document.createTextNode(" "));
96
97            let history_name = document.createElement("span");
98            history_name.classList.add("history-name");
99            history_name.innerText = item.name_short;
100            history_name.setAttribute("data-long", item.name_long);
101            attempt.appendChild(history_name);
102
103            new_children.unshift(attempt);
104        }
105
106        list.replaceChildren(...new_children);
107        document.getElementById("history-count-success").innerText = n_complete + 1;
108        document.getElementById("history-count-total").innerText = this.session_history.length + 1;
109
110    }
111}