Merge pull request #611 from leepeuker/add-watch-date-location

Add location to watch dates
leepeuker · Aug 22, 2024 · 40f4d70 · 40f4d70
2 parents e225ab2 + 8a4bcc0
commit 40f4d70
Show file tree

Hide file tree

Showing 25 changed files with 910 additions and 26 deletions.
diff --git a/db/migrations/mysql/20240821173031_AddLocationToUserWatchDatesTable.php b/db/migrations/mysql/20240821173031_AddLocationToUserWatchDatesTable.php
@@ -0,0 +1,47 @@
+<?php declare(strict_types=1);
+
+use Phinx\Migration\AbstractMigration;
+
+final class AddLocationToUserWatchDatesTable extends AbstractMigration
+{
+    public function down() : void
+    {
+        $this->execute(
+            <<<SQL
+            ALTER TABLE `movie_user_watch_dates` 
+            DROP FOREIGN KEY `fk_movie_user_watch_dates_location_id`,
+            DROP COLUMN `location_id`;
+            SQL
+        );
+
+        $this->execute(
+            <<<SQL
+            DROP TABLE IF EXISTS `location`;
+            SQL
+        );
+    }
+
+    public function up() : void
+    {
+        $this->execute(
+            <<<SQL
+            CREATE TABLE `location` (
+                `id` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
+                `user_id` INT(10) UNSIGNED NOT NULL,
+                `name` TEXT NOT NULL,
+                `created_at` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+                `updated_at` TIMESTAMP NULL DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP,
+                PRIMARY KEY (`id`),
+                FOREIGN KEY (`user_id`) REFERENCES `user` (`id`) ON DELETE CASCADE
+            )
+            SQL,
+        );
+        $this->execute(
+            <<<SQL
+            ALTER TABLE `movie_user_watch_dates` 
+                ADD COLUMN `location_id` INT(10) UNSIGNED DEFAULT NULL AFTER `position`,
+                ADD CONSTRAINT `fk_movie_user_watch_dates_location_id` FOREIGN KEY (`location_id`) REFERENCES `location` (`id`) ON DELETE CASCADE;
+        SQL
+        );
+    }
+}
diff --git a/db/migrations/sqlite/20240821173031_AddLocationToUserWatchDatesTable.php b/db/migrations/sqlite/20240821173031_AddLocationToUserWatchDatesTable.php
@@ -0,0 +1,74 @@
+<?php declare(strict_types=1);
+
+use Phinx\Migration\AbstractMigration;
+
+final class AddLocationToUserWatchDatesTable extends AbstractMigration
+{
+    public function down() : void
+    {
+        $this->execute(
+            <<<SQL
+            DROP TABLE `location`
+            SQL,
+        );
+        $this->execute(
+            <<<SQL
+            CREATE TABLE `movie_user_watch_dates_tmp` (
+                `movie_id` INTEGER NOT NULL,
+                `user_id` INTEGER NOT NULL,
+                `watched_at` TEXT NOT NULL,
+                `plays` INTEGER DEFAULT 1,
+                `comment` TEXT DEFAULT NULL,
+                `position` INTEGER NOT NULL DEFAULT 1,
+                FOREIGN KEY (`user_id`) REFERENCES user (`id`) ON DELETE CASCADE,
+                FOREIGN KEY (`movie_id`) REFERENCES movie (`id`) ON DELETE CASCADE
+            )
+            SQL,
+        );
+        $this->execute(
+            'INSERT INTO `movie_user_watch_dates_tmp` (movie_id, user_id, watched_at, plays, comment, position) 
+            SELECT movie_id, user_id, watched_at, plays, comment, position  FROM movie_user_watch_dates',
+        );
+        $this->execute('DROP TABLE `movie_user_watch_dates`');
+        $this->execute('ALTER TABLE `movie_user_watch_dates_tmp` RENAME TO `movie_user_watch_dates`');
+    }
+
+    public function up() : void
+    {
+        $this->execute(
+            <<<SQL
+            CREATE TABLE `location` (
+                `id` INTEGER NOT NULL,
+                `user_id` TEXT NOT NULL,
+                `name` TEXT NOT NULL,
+                `created_at` TEXT NOT NULL,
+                `updated_at` TEXT DEFAULT NULL,
+                PRIMARY KEY (`id`),
+                FOREIGN KEY (`user_id`) REFERENCES user (`id`) ON DELETE CASCADE
+            )
+            SQL,
+        );
+        $this->execute(
+            <<<SQL
+            CREATE TABLE `movie_user_watch_dates_tmp` (
+                `movie_id` INTEGER NOT NULL,
+                `user_id` INTEGER NOT NULL,
+                `watched_at` TEXT NOT NULL,
+                `plays` INTEGER DEFAULT 1,
+                `comment` TEXT DEFAULT NULL,
+                `position` INTEGER NOT NULL DEFAULT 1,
+                `location_id` INTEGER DEFAULT NULL,
+                FOREIGN KEY (`user_id`) REFERENCES user (`id`) ON DELETE CASCADE,
+                FOREIGN KEY (`movie_id`) REFERENCES movie (`id`) ON DELETE CASCADE
+                FOREIGN KEY (`location_id`) REFERENCES location (`id`) ON DELETE CASCADE
+            )
+            SQL,
+        );
+        $this->execute(
+            'INSERT INTO `movie_user_watch_dates_tmp` (movie_id, user_id, watched_at, plays, comment, position   ) 
+            SELECT movie_id, user_id, watched_at, plays, comment, position  FROM movie_user_watch_dates',
+        );
+        $this->execute('DROP TABLE `movie_user_watch_dates`');
+        $this->execute('ALTER TABLE `movie_user_watch_dates_tmp` RENAME TO `movie_user_watch_dates`');
+    }
+}
diff --git a/public/css/bootstrap-icons-1.10.2.css b/public/css/bootstrap-icons-1.10.2.css
@@ -45,3 +45,4 @@ url("../fonts/bootstrap-icons.woff?24e3eb84d0bcaf83d77f904c78ac1f47") format("wo
 .bi-chevron-contract::before { content: "\f27d"; }
 .bi-question-lg::before { content: "\f64e"; }
 .bi-filter::before{content:"\f3ca"}
+.bi-pin-map-fill::before{content:"\f64b"}
diff --git a/public/js/app.js b/public/js/app.js
@@ -38,6 +38,8 @@ document.addEventListener('DOMContentLoaded', function () {
             currentModalVersion++
         })
 
+        loadLogPlayModalLocationOptions()
+
         document.getElementById('logPlayModal').addEventListener('hidden.bs.modal', function () {
             setLogPlayModalSearchSpinner(false)
             logPlayModalSearchInput.value = ''
@@ -310,7 +312,9 @@ function logMovie(context) {
     const tmdbId = document.getElementById(context + 'TmdbIdInput').value
     const watchDate = document.getElementById(context + 'WatchDateInput').value
     const comment = document.getElementById(context + 'CommentInput').value
+    const locationId = document.getElementById(context + 'LocationInput').value
     const dateFormatPhp = document.getElementById('dateFormatPhp').value
+
     removeAlert('logPlayModalAlert')
 
     if (validateWatchDate(context, watchDate) === false) {
@@ -326,6 +330,7 @@ function logMovie(context) {
             'comment': comment,
             'dateFormat': dateFormatPhp,
             'personalRating': rating,
+            'locationId': locationId
         })
     }).then(function (response) {
         if (response.status === 200) {
@@ -506,3 +511,48 @@ async function logout() {
 
     window.location.href = '/'
 }
+
+async function fetchLocations() {
+    const response = await fetch(
+        '/settings/locations',
+        {signal: AbortSignal.timeout(4000)}
+    )
+
+    if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
+    return await response.json();
+}
+
+async function loadLogPlayModalLocationOptions() {
+    let locations;
+    try {
+        locations = await fetchLocations();
+    } catch (error) {
+        addAlert('logPlayModalAlert', 'Could not load locations', 'danger', false);
+
+        return;
+    }
+
+    const selectElement = document.getElementById('logPlayModalLocationInput');
+
+    selectElement.innerHTML = '';
+
+    const fragment = document.createDocumentFragment();
+
+    const optionElement = document.createElement('option');
+    optionElement.value = '';
+    optionElement.selected = true;
+    fragment.appendChild(optionElement);
+
+    locations.forEach(location => {
+        const optionElement = document.createElement('option');
+        optionElement.value = location.id;
+        optionElement.textContent = location.name;
+
+        fragment.appendChild(optionElement);
+    });
+
+    selectElement.appendChild(fragment)
+}
diff --git a/public/js/movie.js b/public/js/movie.js
@@ -95,7 +95,7 @@ function toggleWatchDates() {
     }
 }
 
-function loadWatchDateModal(watchDateListElement) {
+async function loadWatchDateModal(watchDateListElement) {
     const modal = new bootstrap.Modal('#editWatchDateModal', {
         keyboard: false
     })
@@ -115,16 +115,52 @@ function loadWatchDateModal(watchDateListElement) {
         title: 'Watch date',
     })
 
+    await loadLocationOptions()
+    document.getElementById('editWatchDateModalLocationInput').value = watchDateListElement.dataset.location;
+
     modal.show()
 }
 
+async function loadLocationOptions() {
+    let locations;
+    try {
+        locations = await fetchLocations();
+    } catch (error) {
+        addAlert('alertMovieModalDiv', 'Could not load locations', 'danger', false);
+
+        return;
+    }
+
+    const selectElement = document.getElementById('editWatchDateModalLocationInput');
+
+    selectElement.innerHTML = '';
+
+    const fragment = document.createDocumentFragment();
+
+    const optionElement = document.createElement('option');
+    optionElement.value = '';
+    optionElement.selected = true;
+    fragment.appendChild(optionElement);
+
+    locations.forEach(location => {
+        const optionElement = document.createElement('option');
+        optionElement.value = location.id;
+        optionElement.textContent = location.name;
+
+        fragment.appendChild(optionElement);
+    });
+
+    selectElement.appendChild(fragment)
+}
+
 function editWatchDate() {
     const originalWatchDate = document.getElementById('originalWatchDate').value;
 
     const newWatchDate = document.getElementById('editWatchDateModalInput').value;
     const newWatchDatePlays = document.getElementById('editWatchDateModalPlaysInput').value;
     const newPositionPlays = document.getElementById('editWatchDateModalPositionInput').value;
     const comment = document.getElementById('editWatchDateModalCommentInput').value;
+    const locationId = document.getElementById('editWatchDateModalLocationInput').value;
 
     const apiUrl = '/users/' + getRouteUsername() + '/movies/' + getMovieId() + '/history'
 
@@ -137,7 +173,8 @@ function editWatchDate() {
             'plays': newWatchDatePlays,
             'comment': comment,
             'position': newPositionPlays,
-            'dateFormat': document.getElementById('dateFormatPhp').value
+            'dateFormat': document.getElementById('dateFormatPhp').value,
+            'locationId': locationId
         }),
         success: function (data, textStatus, xhr) {
             window.location.reload()