7GUIs/crud.html at main · marshallworks/7GUIs · 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
<!DOCTYPE html>
<style>
body {
  display: grid;
  grid-template:
    "search search" 30px
    "list input" 320px
    "buttons buttons" 30px / auto 280px;
}
ul {
  border: 1px solid black;
  list-style: none;
  margin: 16px;
  padding: 8px;
}
li {
  cursor: pointer;
}
li.selected {
  background: aquamarine;
}
label {
  display: block;
  padding: 8px;
}
label[for="prefix"] {
  grid-area: search;
}
ul {
  grid-area: list;
}
form {
  grid-area: input;
  padding: 8px;
}
.buttons {
  grid-area: buttons;
}
</style>
<label for="prefix">
  Filter prefix:
  <input id="prefix" type="search" oninput="updateList()" />
</label>
<ul id="entries" onclick="clearSelected()"></ul>
<form>
<label for="name">
  Name:
 <input id="name" type="text" />
</label>
<label for="surname">
  Surname:
 <input id="surname" type="text" />
</label>
</form>
<div class="buttons">
  <button id="create" onclick="create()">Create</button>
  <button id="update" onclick="updateSelected()">Update</button>
  <button id="delete" onclick="deleteSelected()">Delete</button>
</div>
<script>
const prefixSearch = document.getElementById('prefix');
const entryList = document.getElementById('entries');
const nameInput = document.getElementById('name');
const surnameInput = document.getElementById('surname');
const updateButton = document.getElementById('update');
const deleteButton = document.getElementById('delete');

let selected = -1;
const entries = [['Emil', 'Hans'], ['Musterman', 'Max'], ['Tisch', 'Roman']];

function updateList() {
  const prefix = prefixSearch.value.toLowerCase();
  entryList.innerText = '';
  updateButton.disabled = selected >= 0 ? undefined : 'disabled';
  deleteButton.disabled = selected >= 0 ? undefined : 'disabled';
  for (const [index, entry] of entries.entries()) {
    if (!entry[0].toLowerCase().startsWith(prefix)) continue;
    const item = document.createElement('li');
    item.className = index === selected ? 'selected' : '';
    item.innerText = entry.join(', ');
    item.addEventListener('click', (e) => {
      e.stopPropagation();
      selected = index;
      nameInput.value = entries[index][1];
      surnameInput.value = entries[index][0];
      updateList();
    });
    entryList.appendChild(item);
  }
}

function clearSelected() {
  selected = -1;
  nameInput.value = '';
  surnameInput.value = '';
  updateList();
}

function create() {
  entries.push([surnameInput.value.trim(), nameInput.value.trim()]);
  selected = entries.length - 1;
  updateList();
}

function updateSelected() {
  if (selected < 0 || selected >= entries.length) return;
  entries[selected] = [surnameInput.value.trim(), nameInput.value.trim()];
  updateList();
}

function deleteSelected() {
  if (selected < 0 || selected >= entries.length) return;
  entries.splice(selected, 1);
  clearSelected();
}

updateList();

</script>