K-AnonymityContent/editor.html at master · MicroContent/K-AnonymityContent · 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
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AbstractContentEditor</title>
    <script type="application/javascript">
        /**
            dont delete! used for initialization.
        **/
        function init() {
            window.data = getData();
            setDataGetter(dataGetter)
        }
    </script>
</head>
<body>

    <!-- EDIT Form for User Input -->
    <div>
        <label for="titleInput">Enter Title:</label>
        <input id="titleInput" type="text" />
    </div>
    <div>
        <div>
            <label for="description">Enter Description:</label>
            <textarea id="description"></textarea>
        </div>

        <table id="content">
            <tr>
                <th><input value="Property 1"/></th>
                <th><input value="Property 2"/></th>
                <th><input value="Property 3"/></th>
              </tr>
        </table>
        <button id="addRow" class="btn btn-primary" type="button">Add Row</button>
        <button id="removeRow" class="btn btn-primary" type="button">Remove Row</button>
    </div>
    <!-- EDIT Form for User Input -->

    <!-- EDIT Form logic -->
    <script type="application/javascript">
        var table = document.getElementById("content");

        // Rows for data
        var addRowButton = document.getElementById("addRow");
        addRowButton.onclick = function () {
            var row = table.insertRow(table.rows.length);

            var cell1 = row.insertCell(0);
            var input1 = document.createElement("input");
            cell1.appendChild(input1);

            var cell2 = row.insertCell(1);
            var input2 = document.createElement("input");
            cell2.appendChild(input2);

            var cell3 = row.insertCell(2);
            var input3 = document.createElement("input");
            cell3.appendChild(input3);
        }

        var removeRowButton = document.getElementById("removeRow");
        removeRowButton.onclick = function () {
            if (table.rows.length > 1) {
                table.deleteRow(table.rows.length -1);
            }
        }

        function dataGetter() {
            var tableHeaders = []
            var tableContent = [];

            // Headers
            for (var i = 0; i < table.rows[0].cells.length; i++) {
                tableHeaders.push(table.rows[0].cells[i].firstChild.value);
            }

            // Content from input elements
            for (var i = 1; i < table.rows.length; i++) {
                var row = []
                for (var j = 0; j < table.rows[i].cells.length; j++) {
                    row.push(table.rows[i].cells[j].firstChild.value);
                }
                tableContent.push(row);
            }

            return {
                // return data object
                lastEdit: Date.now(),
                title: document.getElementById('titleInput').value,
                description: document.getElementById('description').value,
                tableHeaders: tableHeaders,
                tableContent: tableContent,
                columns: 3
            }
        }

        /**
            function init() -> dont delete! used for initialization.
        **/
        init();
        document.getElementById('titleInput').value = window.data.title;
        document.getElementById('description').value = window.data.description;
        window.data.tableHeaders.forEach(function (item, index) {
            table.rows[0].cells[index].firstChild.value = item;
        });
        window.data.tableContent.forEach(function (item) {
            var row = table.insertRow(table.rows.length);

            var cell1 = row.insertCell(0);
            var input1 = document.createElement("input");
            input1.value = item[0];
            cell1.appendChild(input1);

            var cell2 = row.insertCell(1);
            var input2 = document.createElement("input");
            input2.value = item[1];
            cell2.appendChild(input2);

            var cell3 = row.insertCell(2);
            var input3 = document.createElement("input");
            input3.value = item[2];
            cell3.appendChild(input3);
        });
    </script>
    <!-- EDIT Form logic -->
</body>
</html>