VinylCollectionManagement/record.php at master · GiorCocc/VinylCollectionManagement · 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
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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
<?php
include 'database-connection.php';
include 'functions.php';
include 'index-functions.php';
include 'lastfm-api.php';
?>

<?php
$id = $_GET['recordId'];
$sql = 'SELECT * FROM records WHERE id = ' . $id;
$stmt = $pdo->prepare($sql);
$stmt->execute();
$row = $stmt->fetch();

$numberOfSongs = $row['numberOfSongs'];


?>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="https://img.icons8.com/external-flaticons-flat-flat-icons/64/null/external-vinyl-record-rage-room-flaticons-flat-flat-icons.png" />
  <script src="https://cdn.tailwindcss.com"></script>
  <title>
    <?php echo $row['title'] ?>
  </title>
</head>

<body class="from-yellow-100 via-orange-300 to-red-500 bg-gradient-to-br">
  <?php include 'header.php' ?>
  <!-- component -->
  <div class='flex items-center justify-center min-h-screen'>
    <div class="p-4 items-center justify-center w-3/4 rounded-xl group sm:flex space-x-6 bg-white bg-opacity-50 shadow-xl hover:rounded-2xl">
      <div class="relative flex items-end overflow-hidden rounded-xl">
        <?php echo getAlbum(getArtistName($row['artist']), $row['title'], 4) ?>
      </div>
      <div class="sm:w-8/12 pl-0 p-5">
        <div class="space-y-2">
          <div class="space-y-4">
            <?php echo '<h1 class="text-3xl font-semibold text-gray-900 capitalize">' . $row['title'] . '</h1>' ?>
          </div>
          <div class="flex items-center space-x-4 justify-between">
            <a class="flex gap-3 space-y-1" href="index.php?artistId=<?php echo $row['artist'] ?>">
              <div class="rounded-full my-auto h-8 w-8">
                <?php echo getArtistPhoto(getArtistName($row['artist']), 3);
                ?>
              </div>
              <span class="text-sm">
                <?php echo '<p class="text-gray-900 font-semibold">' . getArtistName($row['artist']) . '</p>' ?>
                <p class="text-gray-500">
                  <?php echo $row['year'] ?>
                </p>
              </span>
            </a>
            <div class=" px-3 py-1 rounded-lg flex space-x-2 flex-row">
              <div class="text-center text-md justify-center items-center flex">
                <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" fill="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M5 21q-.825 0-1.413-.587Q3 19.825 3 19v-7q0-1.875.712-3.513.713-1.637 1.926-2.85 1.212-1.212 2.85-1.925Q10.125 3 12 3t3.513.712q1.637.713 2.85 1.925 1.212 1.213 1.925 2.85Q21 10.125 21 12v7q0 .825-.587 1.413Q19.825 21 19 21h-2q-.825 0-1.412-.587Q15 19.825 15 19v-4q0-.825.588-1.413Q16.175 13 17 13h2v-1q0-2.925-2.038-4.963Q14.925 5 12 5T7.038 7.037Q5 9.075 5 12v1h2q.825 0 1.412.587Q9 14.175 9 15v4q0 .825-.588 1.413Q7.825 21 7 21Z" />
                </svg>

                <span class="text-md mx-1">
                  <p class="text-gray-900 text-s font-semibold">
                    <?php echo $row['genre'] ?>
                  </p>
                </span>
              </div>
              <div class="text-center text-md justify-center items-center flex">
                <svg width="25px" height="25px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M15 5.67363C17.3649 6.7971 19 9.2076 19 12M8.39241 18C6.35958 16.7751 5 14.5463 5 12M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                <span class="text-md mx-1">
                  <p class="text-gray-900 text-s font-semibold">
                    <?php switch ($row['format']) {
                      case 1:
                        echo '12"';
                        break;
                      case 2:
                        echo '10"';
                        break;
                      case 3:
                        echo '7"';
                        break;
                    } ?>
                  </p>
                </span>
              </div>
              <div class="text-center text-md justify-center items-center flex">
                <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M10.75 15.2q.475.45 1.2.413.725-.038 1.075-.513l5.25-7.325-7.375 5.2q-.5.35-.55 1.05-.05.7.4 1.175ZM12 5q1.375 0 2.512.338 1.138.337 2.263 1.012l-.925.625q-.875-.475-1.825-.725T12 6Q8.675 6 6.338 8.337 4 10.675 4 14q0 1.05.287 2.075Q4.575 17.1 5.1 18h13.8q.575-.95.838-1.975Q20 15 20 13.9q0-.9-.237-1.9-.238-1-.738-1.85l.625-.925q.75 1.25 1.05 2.362.3 1.113.3 2.313 0 1.275-.288 2.4-.287 1.125-.912 2.25-.125.2-.362.325Q19.2 19 18.9 19H5.1q-.275 0-.512-.137-.238-.138-.388-.388-.5-.875-.85-1.975T3 14q0-1.85.7-3.488.7-1.637 1.913-2.862 1.212-1.225 2.862-1.937Q10.125 5 12 5Zm.05 6.95Z" />
                </svg>
                <span class="text-md mx-1">
                  <p class="text-gray-900 text-s font-semibold">
                    <?php switch ($row['speed']) {
                      case 1:
                        echo '33 1/3 RPM';
                        break;
                      case 2:
                        echo '45 RPM';
                        break;
                      case 3:
                        echo '78 RPM';
                        break;
                    } ?>
                  </p>
                </span>
              </div>
            </div>
          </div>
          <div class="flex items-center space-x-4 justify-between">
            <div class="flex flex-row space-x-1">
              <?php
              switch ($row['vinyl_condition']) {
                case 1:
                  echo "<div class=\"bg-green-500 text-white px-3 py-1 text-center justify-center items-center rounded-xl flex space-x-2 flex-row\">";
                  echo '<span class="text-xs text-white-900 font-semibold">Disco: Mint</span>';
                  echo "</div>";
                  break;
                case 2:
                  echo "<div class=\"bg-yellow-500 text-white px-3 py-1 text-center justify-center items-center rounded-xl flex space-x-2 flex-row\">";
                  echo '<span class="text-xs text-white-900 font-semibold">Disco: Near Mint</span>';
                  echo "</div>";
                  break;
                case 3:
                  echo "<div class=\"bg-orange-500 text-white px-3 py-1 text-center justify-center items-center rounded-xl flex space-x-2 flex-row\">";
                  echo '<span class="text-xs text-white-900 font-semibold">Disco: Very Good</span>';
                  echo "</div>";
                  break;
                case 4:
                  echo "<div class=\"bg-red-500 text-white px-3 py-1 text-center justify-center items-center rounded-xl flex space-x-2 flex-row\">";
                  echo '<span class="text-xs text-white-900 font-semibold">Disco: Good</span>';
                  echo "</div>";
                  break;
                case 5:
                  echo "<div class=\"bg-gray-500 text-white px-3 py-1 text-center justify-center items-center rounded-xl flex space-x-2 flex-row\">";
                  echo '<span class="text-xs text-white-900 font-semibold">Disco: Fair</span>';
                  echo "</div>";
                  break;
                case 6:
                  echo "<div class=\"bg-black-500 text-white px-3 py-1 text-center justify-center items-center rounded-xl flex space-x-2 flex-row\">";
                  echo '<span class="text-xs text-white-900 font-semibold">Disco: Poor</span>';
                  echo "</div>";
                  break;
              }
              ?>
              <?php
              switch ($row['sleeve_condition']) {
                case 1:
                  echo "<div class=\"bg-green-500 text-white px-3 py-1 text-center justify-center items-center rounded-xl flex space-x-2 flex-row\">";
                  echo '<span class="text-xs text-white-900 font-semibold">Copertina: Mint</span>';
                  echo "</div>";
                  break;
                case 2:
                  echo "<div class=\"bg-yellow-500 text-white px-3 py-1 text-center justify-center items-center rounded-xl flex space-x-2 flex-row\">";
                  echo '<span class="text-xs text-white-900 font-semibold">Copertina: Near Mint</span>';
                  echo "</div>";
                  break;
                case 3:
                  echo "<div class=\"bg-orange-500 text-white px-3 py-1 text-center justify-center items-center rounded-xl flex space-x-2 flex-row\">";
                  echo '<span class="text-xs text-white-900 font-semibold">Copertina: Very Good</span>';
                  echo "</div>";
                  break;
                case 4:
                  echo "<div class=\"bg-red-500 text-white px-3 py-1 text-center justify-center items-center rounded-xl flex space-x-2 flex-row\">";
                  echo '<span class="text-xs text-white-900 font-semibold">Copertina: Good</span>';
                  echo "</div>";
                  break;
                case 5:
                  echo "<div class=\"bg-black-500 text-white px-3 py-1 text-center justify-center items-center rounded-xl flex space-x-2 flex-row\">";
                  echo '<span class="text-xs text-white-900 font-semibold">Copertina: Fair</span>';
                  echo "</div>";
                  break;
              }
              ?>
            </div>
          </div>
          <?php
          if ($row['notes'] != '') {
            echo "<div class=\"text-grey-500 text-xs flex flex-row space-x-1 max-h-20 overflow-auto my-4\">";
            echo '<span>Note: ' . $row['notes'] . '</span>';
            echo "</div>";
          }
          ?>
        </div>
        <h2 class="text-2xl overscroll-auto w-full mx-auto font-semibold text-gray-900 mt-4">
          <?php if ($numberOfSongs == 0) echo "Non ci sono canzoni registrate per questo album";
          else echo "Canzoni"; ?>
        </h2>
        <div class="max-h-64 overflow-auto">
          <?php if ($numberOfSongs > 0) { ?>
            <table class="w-full max-h-48 overflow-auto">
              <thead>
                <tr>
                  <th class="text-left text-gray-900 font-semibold"></th>
                  <th class="text-left text-gray-900 font-semibold">Titolo</th>
                  <th class="text-left text-gray-900 font-semibold">Durata</th>
                </tr>
              </thead>
              <tbody>
                <?php
                $songs = getSongs($row['id']);
                $i = 1;
                foreach ($songs as $song) {
                  echo "<tr>";
                  echo "<td class=\"text-left text-gray-900 font-semibold\">" . $i . "</td>";
                  echo "<td class=\"text-left text-gray-900 font-semibold capitalize\">" . $song['title'] . "</td>";
                  echo "<td class=\"text-left text-gray-900 font-semibold\">" . $song['duration'] . "</td>";
                  echo "</tr>";
                  $i++;
                }
                ?>
              </tbody>
            </table>
          <?php } ?>
        </div>
        <div>
          <div class="flex flex-row-reverse space-x-2 align-right mt-10">
            <div class="flex flex-row space-x-2">
              <?php
              if ($numberOfSongs != 0) {
              ?>
                <a href="modify-songs.php?numberOfSongs=<?php echo $row['numberOfSongs'] ?>&recordId=<?php echo $row['id'] ?>&artistId=<?php echo $row['artist'] ?>" class="bg-orange-500 shadow-lg shadow- shadow-orange-600 text-white cursor-pointer px-3 py-1 text-center justify-center items-center rounded-xl flex space-x-2 flex-row">
                  <svg stroke="currentColor" fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="24" width="24">
                    <path d="M11.5 18.5v-6h-6v-1h6v-6h1v6h6v1h-6v6Z" />
                  </svg>
                  <p class="text-s">Modifica canzoni</p>
                </a>
              <?php } ?>
              <a href="modify-record.php?recordId=<?php echo $row['id'] ?>&artistId=<?php echo $row['artist'] ?>" class="bg-blue-500 shadow-lg shadow- shadow-blue-600 text-white cursor-pointer px-3 py-1 text-center justify-center items-center rounded-xl flex space-x-2 flex-row">
                <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="24" width="24">
                  <path d="M5.3 19h1.075l9.9-9.9L15.2 8.025l-9.9 9.9ZM18.425 8.375l-2.5-2.475 1.2-1.2q.3-.325.725-.325t.725.325l1.05 1.025q.3.3.3.725t-.3.725ZM17.7 9.1 6.8 20H4.3v-2.5L15.2 6.6Zm-1.975-.55-.525-.525L16.275 9.1Z" />
                </svg>
                <p class="text-s">Modificare</p>
              </a>
              <a href="delete-record.php?<?php echo 'recordId=' . $row['id'] ?>" class="bg-red-500 shadow-lg shadow- shadow-red-600 text-white cursor-pointer px-3 py-1 text-center justify-center items-center rounded-xl flex space-x-2 flex-row">
                <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="24" width="24">
                  <path d="M7.625 20q-.675 0-1.15-.475Q6 19.05 6 18.375V6H5V5h4v-.775h6V5h4v1h-1v12.375q0 .7-.462 1.163-.463.462-1.163.462ZM17 6H7v12.375q0 .275.175.45t.45.175h8.75q.25 0 .437-.188.188-.187.188-.437ZM9.8 17h1V8h-1Zm3.4 0h1V8h-1ZM7 6v13-.625Z" />
                </svg>
                <p class="text-s">Eliminare</p>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div>
        <?php
        global $pdo;
        $stmt = $pdo->prepare("SELECT * FROM records WHERE artist = :artistId");
        $stmt->execute(['artistId' => $row['artist']]);
        $records = $stmt->fetchAll(PDO::FETCH_ASSOC);
        if (count($records) > 1) {
        ?>
          <h2 class="text-xl font-bold text-gray-900">
            Altri album dell'artista
          </h2>
          <div class="flex flex-col max-h-96 overflow-auto overflow-auto max-h-30 gap-6 p-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
            <?php
            foreach ($records as $row) {
            ?>
              <article class="rounded-xl bg-white bg-opacity-50 shadow-xl hover:rounded-2xl p-3 shadow-lg hover:shadow-xl hover:transform hover:scale-105 duration-300 ">
                <a href="record.php?recordId=<?php echo $row['id'] ?>" title="<?php echo $row['title'] ?>">
                  <div class="relative flex items-end overflow-hidden rounded-xl">
                    <?php echo getAlbum(getArtistName($row['artist']), $row['title'], 2); ?>
                  </div>
                </a>
              </article>
          <?php
            }
          }
          ?>
          </div>
      </div>
    </div>
  </div>
  <?php include 'footer.php'; ?>
</body>

</html>