-
Notifications
You must be signed in to change notification settings - Fork 0
/
vote-baby-names.php
116 lines (92 loc) · 3.44 KB
/
vote-baby-names.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
<!DOCTYPE html>
<html lang="en">
<?php
require __DIR__ . "/vendor/autoload.php";
$dotenv = Dotenv\Dotenv::createImmutable(__DIR__);
$dotenv->load();
$mysqli = new mysqli($_ENV["DATABASE_HOSTNAME"],
$_ENV["DATABASE_USERNAME"],
$_ENV["DATABASE_PASSWORD"],
$_ENV["DATABASE_NAME"]);
?>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1 class="text-center pt-4">Here is your list of names:</h1>
<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
<div class="list-group">
<form action="process-vote.php" method="post" id="form">
<?php
$names = $_POST['names'];
$points = array(8, 5, 3);
// new connection
$connection_string = "{$_ENV['DATABASE_HOSTNAME']} port=5432 dbname={$_ENV['DATABASE_NAME']} user={$_ENV['DATABASE_USERNAME']} password={$_ENV['DATABASE_PASSWORD']}";
$connection = pg_connect($connection_string);
// Prepare the SQL query
$sql = "SELECT name FROM names;";
// Execute the query
$result = pg_query($connection, $sql);
// Check if the query was successful
if (!$result) {
echo "An error occurred.\n";
exit;
}
// Fetch all rows as an associative array
$rows = pg_fetch_all($result);
// Loop through the rows and display the name and points
foreach ($rows as $row) {
echo $row['name'] . "\n";
}
foreach ($rows as $index => $row) {
$point = isset($points[$index]) ? $points[$index] : 0;
echo
"<label class='list-group-item d-flex gap-2'>
<input class='form-check
-input flex-shrink-0' type='checkbox' name='votes[{$row['name']}]' value='{$point}'>
<span>
{$row['name']}
<span class='points'></span>
<small class='d-block text-body-secondary'>Which have the meaning of...</small>
</span>
</label>";
}
// UPDATE the query
$sql = "UPDATE names SET points = points + 1 WHERE name = $1;";
$result = pg_query_params($connection, $sql, array($name));
?>
<button type="submit" class="btn btn-primary">Vote for Baby Names</button>
</form>
</div>
</div>
</div>
<script>
const points = [8, 5, 3];
const availablePoints = [...points];
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach((checkbox) => {
const pointsSpan = checkbox.parentNode.querySelector('.points');
checkbox.addEventListener('change', (event) => {
if (!event.target.checked) {
availablePoints.push(event.target.value);
availablePoints.sort((a, b) => b - a);
pointsSpan.textContent = '';
event.target.value = 0;
return;
}
if (availablePoints.length === 0) {
event.target.value = 0;
return;
}
event.target.value = availablePoints.shift();
pointsSpan.textContent = ` (${event.target.value} points)`;
});
});
</script>
</body>
</html>