Allow setting wish preview url

src/api/wishes.php

@@ -9,9 +9,7 @@
 use wishthis\{User, Wish, EmbedCache};
 
 $api      = true;
-$response = array(
+$response = array();
-    'success' => false,
-);
 
 require '../../index.php';
 
@@ -98,6 +96,16 @@ switch ($_SERVER['REQUEST_METHOD']) {
             ;');
 
             $response['success'] = true;
+        } elseif (isset($_PUT['wish_id'], $_PUT['wish_url'])) {
+            /**
+             * Update Wish Image
+             */
+            $database
+            ->query('UPDATE `wishes`
+                        SET `image` = "' . $_PUT['wish_url'] . '"
+                      WHERE `id`    = ' . $_PUT['wish_id'] . ';');
+
+            $response['wish_url'] = $_PUT['wish_url'];
         }
         break;
 

src/assets/css/wish.css

@@ -1,6 +1,8 @@
-.ui.fluid.image {
+.image.preview {
     height: var(--wishPreviewHeight);
 
     object-fit: cover;
     object-position: 50%;
+
+    cursor: pointer;
 }

src/assets/js/default.js

@@ -92,6 +92,9 @@ $(function() {
     $.fn.toast.settings.displayTime    = 'auto';
     $.fn.toast.settings.minDisplayTime = 3000;
     $.fn.toast.settings.showProgress   = true;
+    $.fn.toast.settings.class          = 'success';
+    $.fn.toast.settings.showIcon       = 'check';
+    $.fn.toast.settings.title          = 'Success';
 });
 
 /**

src/assets/js/wish.js

@@ -78,12 +78,7 @@ $(function () {
 
                                         elementModalFetch.modal('hide');
 
-                                        $('body').toast({
+                                        $('body').toast({ message: 'Wish information updated.' });
-                                            class:    'success',
-                                            showIcon: 'check',
-                                            title:    'Success',
-                                            message:  'Wish information updated.'
-                                        });
                                     }
 
                                     buttonFetch.removeClass('loading');
@@ -97,12 +92,7 @@ $(function () {
                         })
                         .modal('show');
                     } else {
-                        $('body').toast({
+                        $('body').toast({ message: 'Wish information updated.' });
-                            class:    'success',
-                            showIcon: 'check',
-                            title:    'Success',
-                            message:  'Wish information updated.'
-                        });
 
                         formWish.removeClass('loading');
                     }
@@ -116,4 +106,40 @@ $(function () {
 
     });
 
+    /**
+     * Image
+     */
+    $(document).on('click', '.image.preview', function() {
+        var modalImage = $('.modal.image');
+
+        modalImage
+        .modal({
+            onApprove: function(buttonApprove) {
+                var formImage = modalImage.find('form.image');
+                var formData  = new URLSearchParams(new FormData(formImage[0]));
+
+                formImage.addClass('loading');
+
+                fetch('/src/api/wishes.php', {
+                    method: 'PUT',
+                    body:   formData
+                })
+                .then(handleFetchError)
+                .then(handleFetchResponse)
+                .then(function(response) {
+                    var elementImage = $('.form.wish img.preview');
+                    elementImage.attr('src', response.wish_url);
+
+                    formImage.removeClass('loading');
+                    modalImage.modal('hide');
+
+                    $('body').toast({ message: 'Wish image successfully updated.' });
+                });
+
+                return false;
+            }
+        })
+        .modal('show');
+    });
+
 });

src/assets/js/wishlists.js

@@ -200,12 +200,7 @@ $(function () {
 
                             urlParams.delete('wishlist');
 
-                            $('body').toast({
+                            $('body').toast({ message: 'Wishlist successfully deleted.' });
-                                class:    'success',
-                                showIcon: 'check',
-                                title:    'Success',
-                                message:  'Wishlist successfully deleted.'
-                            });
 
                             wishlistsRefresh();
 
@@ -265,12 +260,7 @@ $(function () {
                     onSuccess: function () {
                         column.fadeOut();
 
-                        $('body').toast({
+                        $('body').toast({ message: 'Wish successfully deleted.' });
-                            class:    'success',
-                            showIcon: 'check',
-                            title:    'Success',
-                            message:  'Wish successfully deleted.'
-                        });
 
                         wishlistsRefresh();
 
@@ -313,12 +303,7 @@ $(function () {
                 .then(handleFetchResponse)
                 .then(function(response) {
                     if (response.success) {
-                        $('body').toast({
+                        $('body').toast({ message: 'Wish successfully added.' });
-                            class:    'success',
-                            showIcon: 'check',
-                            title:    'Success',
-                            message:  'Wish successfully added.'
-                        });
 
                         wishlistsRefresh();
 
@@ -363,12 +348,7 @@ $(function () {
 
                         urlParams.set('wishlist', response.data.lastInsertId);
 
-                        $('body').toast({
+                        $('body').toast({ message: 'Wishlist successfully created.' });
-                            class:    'success',
-                            showIcon: 'check',
-                            title:    'Success',
-                            message:  'Wishlist successfully created.'
-                        });
 
                         wishlistsRefresh();
                     }

src/classes/wish.php

@@ -16,6 +16,7 @@ class Wish
     public int $wishlist;
     public ?string $title;
     public ?string $description;
+    public ?string $image;
     public ?string $url;
     public ?string $status;
 
@@ -52,15 +53,15 @@ class Wish
             $this->info  = $this->cache->get($generateCache);
         }
 
-        if (empty($this->info->image)) {
-            $this->info->image = '/src/assets/img/no-image.svg';
-        }
-
         foreach ($columns as $key => $value) {
             if (empty($value) && isset($this->info->$key)) {
                 $this->$key = $this->info->$key;
             }
         }
+
+        if (empty($this->image)) {
+            $this->image = '/src/assets/img/no-image.svg';
+        }
     }
 
     public function getCard(int $ofUser): string
@@ -83,8 +84,8 @@ class Wish
             <div class="overlay"></div>
 
             <div class="image">
-                <?php if (isset($this->info->image)) { ?>
+                <?php if ($this->image) { ?>
-                    <img class="preview" src="<?= $this->info->image ?>" loading="lazy" />
+                    <img class="preview" src="<?= $this->image ?>" loading="lazy" />
                 <?php } ?>
 
                 <?php if (isset($this->info->favicon)) { ?>

src/pages/install.php

@@ -142,6 +142,7 @@ switch ($step) {
             `wishlist`    INT          NOT NULL,
             `title`       VARCHAR(128) NULL DEFAULT NULL,
             `description` TEXT         NULL DEFAULT NULL,
+            `image      ` VARCHAR(255) NULL DEFAULT NULL,
             `url`         VARCHAR(255) NULL DEFAULT NULL,
             `status`      VARCHAR(32)  NULL DEFAULT NULL,
             FOREIGN KEY (`wishlist`)

src/pages/wish.php

@@ -62,8 +62,8 @@ $referer = '/?page=wishlists&wishlist=' . $wish->wishlist;
 
                     <div class="stackable row">
                         <div class="column">
-                            <?php if ($wish->info->image) { ?>
+                            <?php if ($wish->image) { ?>
-                                <img class="ui fluid rounded image" src="<?= $wish->info->image ?>" />
+                                <img class="ui fluid rounded image preview" src="<?= $wish->image ?>" />
                             <?php } ?>
                         </div>
 
@@ -132,6 +132,33 @@ $referer = '/?page=wishlists&wishlist=' . $wish->wishlist;
     </div>
 </main>
 
+<!-- Image -->
+<div class="ui small modal image">
+    <div class="header">
+        Image
+    </div>
+    <div class="content">
+        <p>Define a new URL to be used as a preview.</p>
+
+        <form class="ui form image">
+            <input type="hidden" name="wish_id" value="<?= $_GET['id'] ?>" />
+
+            <div class="field">
+                <label>URL</label>
+                <input class="current" type="url" name="wish_url" />
+            </div>
+        </form>
+    </div>
+    <div class="actions">
+        <div class="ui primary approve button">
+            Save
+        </div>
+        <div class="ui deny button">
+            Discard
+        </div>
+    </div>
+</div>
+
 <!-- Auto-fill -->
 <div class="ui small modal auto-fill">
     <div class="header">