5ejson/console.html at main · srsutherland/5ejson · 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
<!DOCTYPE html>
<html>
    <head>
        <title>Console</title>
        <meta charset="utf-8">
        <link rel="icon" href="res/console.ico">
        <script type="module" src="src/pdf.js"></script>
        <script>

        </script>
        <style>
            #console {
                display: block;
                max-height: 90vh;
                overflow: auto;
            }
            #buttons button {
                margin: 0.2em;
            }
        </style>
    </head>
    <body>
        <div id="buttons">
            <div id="pdf_list"></div>
            <div id="pdf_actions"></button>
        </div>
        <pre id="console"></pre>
        <script>
            document.addEventListener("DOMContentLoaded", () => {
                // bind console output to a div
                const console_div = document.getElementById("console");
                const oldlog = console.log;
                const oldError = console.error;
                console.log = (msg) => {
                    const div = document.createElement("div");
                    div.textContent = msg;
                    console_div.insertAdjacentElement("beforeend", div);
                    div.scrollIntoView();
                    oldlog(msg);
                };
                console.error = (msg) => {
                    const div = document.createElement("div");
                    div.textContent = msg;
                    div.style.color = "red";
                    console_div.insertAdjacentElement("beforeend", div);
                    div.scrollIntoView();
                    oldError(msg);
                };

                console.log("Console loaded.")
                const sheet_names = ["1page_v6", "halfpage_double_color", "standard"];
                const sheet_loaders = [];
                for (const sheet_name of sheet_names) {
                    const button = document.createElement("button");
                    button.textContent = sheet_name;
                    // create a function to load the sheet
                    const sheet_loader = () => {
                        console_div.innerHTML = "";
                        const sheet_path = `./pdfs/${sheet_name}/sheet.pdf`;
                        console.log(`Loading ${sheet_path}...`);
                        // log the field names to the console
                        try {
                            listFieldNames(sheet_path);
                        } catch (e) {
                            console.error(e);
                        }
                        // now handle the pdf-specific actions
                        const pdf_actions = document.getElementById("pdf_actions");
                        pdf_actions.innerHTML = `<span style="font-weight:bold">${sheet_name}: </span>`;
                        // create a button to annotate the field names
                        const annotate_button = document.createElement("button");
                        annotate_button.textContent = "Annotate Field Names";
                        annotate_button.addEventListener("click", () => {
                            try {
                                console.log("Annotating...");
                                annotateFieldNames(sheet_path);
                            } catch (e) {
                                console.error(e);
                            }
                        });
                        pdf_actions.insertAdjacentElement("beforeend", annotate_button);
                    }
                    sheet_loaders.push(sheet_loader);
                    // bind the function to the button
                    button.addEventListener("click", sheet_loader);
                    // add the button to the top of the page
                    const pdf_list = document.getElementById("pdf_list");
                    pdf_list.insertAdjacentElement("beforeend", button);
                }
                // load first sheet by default
                sheet_loaders[0]()
            });
        </script>
    </body>
</html>