-
Notifications
You must be signed in to change notification settings - Fork 1
/
teams.html
177 lines (169 loc) · 7.24 KB
/
teams.html
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>GFL-TV Scoreboard Team Names and Logos</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
</style>
</head>
<body>
<div class="container-fluid" id="headline">
<div class="row">
<div class="col-sm mb-2">
<a href="index" class="btn btn-dark btn-block p-4" role="button">Home</a>
</div>
<div class="col-sm mb-2">
<a href="control" class="btn btn-primary btn-block p-4" role="button">Control</a>
</div>
</div>
</div>
<div class="container-fluid" id="teams">
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
// socket connection
var socket = io.connect('/');
// get announcement
socket.on('announcement', function(data) {
console.log('Received announcement:', data.message);
});
// teams data loaded
socket.on('sendteamlist', function(data) {
console.log('sendteamlist:', data);
// setup teams list
// create html
var teams = '<form action="" id="updateID">';
// create update button
teams += '<div class="row"><div class="col-sm mb-2"><button type="button" class="btn btn-success btn-block updatebutton p-4" value="updatebutton">Update/upload teams list</button></div></div>';
var number = 0;
// loop data
for(let teamlist of data.teamlist){
// add row
teams += '<div class="row border">';
// increase number
number = number + 1;
// add team_name field
teams += '<div class="col-1 mb-2"><label for="team_name'+number+'" class="form-label float-right">Teamname:</label></div><div class="col-2 mb-2"><input type="text" class="form-control font-weight-bold" id="team_name'+number+'" value="'+teamlist["team_name"]+'"></div>';
// add overlay name field
teams += '<div class="col-1 mb-2"><label for="name'+number+'" class="form-label float-right">Overlay Name:</label></div><div class="col-2 mb-2"><input type="text" class="form-control font-weight-bold" id="name'+number+'" value="'+teamlist["name"]+'"></div>';
// add overlay color field
teams += '<div class="col-1 mb-2"><label for="color'+number+'" class="form-label float-right">Overlay Color:</label></div><div class="col-1 mb-2"><input type="text" class="form-control font-weight-bold" id="color'+number+'" value="'+teamlist["color"]+'"></div>';
// add logo field
teams += '<div class="col-1 mb-2"><label for="logo'+number+'" class="form-label float-right">Logo:</label></div><div class="col-2 mb-2"><input type="text" class="form-control font-weight-bold" id="logo'+number+'" value="'+teamlist["logo"]+'"></div>';
// add logo
teams += '<div class="col-1 mb-2"><img class="img-fluid" id="teamlogo'+number+'" src="'+teamlist["logo"]+'"></div>';
// finish row
teams += '</div>';
}
// add empty rows for additional teams up to 100
while(number<100){
// add row
teams += '<div class="row border">';
// increase number
number = number + 1;
// add team_name field
teams += '<div class="col-1 mb-2"><label for="team_name'+number+'" class="form-label float-right">Teamname:</label></div><div class="col-2 mb-2"><input type="text" class="form-control font-weight-bold" id="team_name'+number+'"></div>';
// add overlay name field
teams += '<div class="col-1 mb-2"><label for="name'+number+'" class="form-label float-right">Overlay Name:</label></div><div class="col-2 mb-2"><input type="text" class="form-control font-weight-bold" id="name'+number+'"></div>';
// add overlay color field
teams += '<div class="col-1 mb-2"><label for="color'+number+'" class="form-label float-right">Overlay Color:</label></div><div class="col-1 mb-2"><input type="text" class="form-control font-weight-bold" id="color'+number+'"></div>';
// add logo field
teams += '<div class="col-1 mb-2"><label for="logo'+number+'" class="form-label float-right">Logo:</label></div><div class="col-2 mb-2"><input type="text" class="form-control font-weight-bold" id="logo'+number+'"></div>';
// finish row
teams += '</div>';
}
// finalize form
teams += '</form>';
// add html to container
$('#teams').html(teams);
});
// document loaded
$(document).ready(function(){
// send message
socket.emit('requestgamedata', { message: 'Request game data' });
// send message
socket.emit('requestteamlist', { message: 'Request team list' });
// ----- button functions -----
// add click function to update button
$(document).on("click",".updatebutton", function() {
console.log('Updatebutton clicked:', $(this).val());
// get all players, start json
var teamlist = '[';
var skip = false;
// Select all the input elements with the type of text
$("#updateID input[type=text]").each(function () {
// check id = name
if(this.id.startsWith("team_name")){
// check empty string
if(!this.value){
// skip
skip = true;
}else{
skip = false;
// add json field start
teamlist += '{';
// replace quatation marks ("' -> *)
var value = this.value.replace(/['"]+/g, '*')
teamlist += '"team_name": "'+value+'"';
teamlist += ',';
}
}else if(this.id.startsWith("name")){
// check empty string
if(skip){
// skip
}else if(!this.value){
// empty name
teamlist += '"name": " "';
teamlist += ',';
}else{
// replace quatation marks ("' -> *)
var value = this.value.replace(/['"]+/g, '*')
teamlist += '"name": "'+value+'"';
teamlist += ',';
}
}else if(this.id.startsWith("color")){
// check empty string
if(skip){
// skip
}else if(!this.value){
// empty color
teamlist += '"color": "#000000"';
teamlist += ',';
}else{
// replace quatation marks ("' -> *)
var value = this.value.replace(/['"]+/g, '*')
teamlist += '"color": "'+value+'"';
teamlist += ',';
}
}else if(this.id.startsWith("logo")){
// check empty string
if(skip){
// skip
}else if(!this.value){
// empty number
teamlist += '"logo": "no-logo.png"';
teamlist += '},';
}else{
// replace quatation marks ("' -> *)
var value = this.value.replace(/['"]+/g, '*')
teamlist += '"logo": "'+value+'"';
teamlist += '},';
}
}
});
// cut last character
var teamslist = teamlist.slice(0, -1);
// end json
teamslist += ']';
socket.emit('updateAllTeamsList', teamslist);
location.reload();
});
// ----- button functions end -----
});
</script>
</body>
</html>