Eenvoudig dashboard
Ik ben op zoek naar iemand die een eenvoudig dashboard kan maken voor ons met als bedoeling een soort schakelbord.
We hebben 60 knoppen op de pagina ( soort van schakelaars ) die bij het aanklikken moeten veranderen in de kleur groen. Bij dubbelklik o.i.d. moet deze knop weer rood worden.
Het is dus een soort van aanwezigheid schema. Deze willen wij locaal gebruiken dus niet op een server.
Is er iemand die zoiets kan maken?
Ik heb een voorbeeld gemaakt in excel wat eigenlijk de bedoeling is. Deze is uiteraard te verkrijgen bij interesse.
Code (php)
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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Schakelboard</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
}
.container {
margin-top: 40px;
max-width: 960px;
}
.grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-gap: 10px;
}
button {
background: red;
padding: 5px;
border: 1px solid #666;
border-radius: 5px;
}
.present {
background: green;
}
</style>
</head>
<body>
<div class="container">
<div class="grid">
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$('button').click(function() {
$(this).addClass('present');
});
$('button').dblclick(function() {
$(this).removeClass('present');
});
});
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Schakelboard</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
}
.container {
margin-top: 40px;
max-width: 960px;
}
.grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-gap: 10px;
}
button {
background: red;
padding: 5px;
border: 1px solid #666;
border-radius: 5px;
}
.present {
background: green;
}
</style>
</head>
<body>
<div class="container">
<div class="grid">
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
<div class="item"><button>Werknemer naam</button></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$('button').click(function() {
$(this).addClass('present');
});
$('button').dblclick(function() {
$(this).removeClass('present');
});
});
</script>
</body>
</html>
Gewijzigd op 04/05/2022 11:20:36 door Jan Koehoorn
Dit is super gaaf, dank je voor de snelle reactie. Super geholpen.