Combine create wishlist with other options

This commit is contained in:
Jay Trees 2022-02-25 09:23:16 +01:00
parent c4af18f062
commit dcc19aed2e
7 changed files with 242 additions and 189 deletions

View file

@ -16,6 +16,30 @@ $response = array(
require '../../index.php'; require '../../index.php';
switch ($_SERVER['REQUEST_METHOD']) { switch ($_SERVER['REQUEST_METHOD']) {
case 'POST':
/**
* Create
*/
if (isset($_POST['wishlist-name'], $_SESSION['user']['id'])) {
$database->query('INSERT INTO `wishlists`
(
`user`,
`name`,
`hash`
) VALUES (
' . $_SESSION['user']['id'] . ',
"' . $_POST['wishlist-name'] . '",
"' . sha1(time() . $_SESSION['user']['id'] . $_POST['wishlist-name']) . '"
)
;');
$response['success'] = true;
$response['data'] = array(
'lastInsertId' => $database->lastInsertId(),
);
}
break;
case 'GET': case 'GET':
if (isset($_GET['userid']) || isset($_SESSION['user']['id'])) { if (isset($_GET['userid']) || isset($_SESSION['user']['id'])) {
$user = isset($_GET['userid']) ? new User($_GET['userid']) : new User(); $user = isset($_GET['userid']) ? new User($_GET['userid']) : new User();

View file

@ -33,10 +33,6 @@ img {
/** /**
* Card * Card
*/ */
.wishlist-cards {
margin-top: 1rem;
}
.ui.card { .ui.card {
overflow: hidden; overflow: hidden;
} }
@ -135,10 +131,3 @@ p .ui.horizontal.label {
cursor: default; cursor: default;
user-select: none; user-select: none;
} }
/**
* Segment
*/
.ui.segments {
overflow: hidden;
}

View file

@ -10,7 +10,6 @@ if ('serviceWorker' in navigator) {
}) })
} }
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
$(function() { $(function() {

View file

@ -4,27 +4,31 @@ $(function () {
*/ */
var wishlists = []; var wishlists = [];
$('.ui.dropdown.wishlists').api({ function wishlistsRefresh() {
action: 'get wishlists', $('.ui.dropdown.wishlists').api({
method: 'GET', action: 'get wishlists',
on: 'now', method: 'GET',
onSuccess: function (response, element, xhr) { on: 'now',
wishlists = response.results; onSuccess: function (response, element, xhr) {
wishlists = response.results;
element.dropdown({ element.dropdown({
values: wishlists, values: wishlists,
placeholder: 'No wishlist selected.' placeholder: 'No wishlist selected.'
}) })
if (urlParams.has('wishlist')) { if (urlParams.has('wishlist')) {
element.dropdown('set selected', urlParams.get('wishlist')); element.dropdown('set selected', urlParams.get('wishlist'));
} else { } else {
if (wishlists[0]) { if (wishlists[0]) {
element.dropdown('set selected', wishlists[0].value); element.dropdown('set selected', wishlists[0].value);
}
} }
} }
} });
}); }
wishlistsRefresh();
/** /**
* Selection * Selection
@ -53,7 +57,11 @@ $(function () {
/** /**
* Cards * Cards
*/ */
$('.wishlist-cards').html(wishlists[wishlistIndex].cards); if (wishlistIndex >= 0) {
$('.wishlist-cards').html(wishlists[wishlistIndex].cards);
} else {
$('.wishlist-cards').html('');
}
/** /**
* Generate cache * Generate cache
@ -292,7 +300,7 @@ $(function () {
onSuccess: function () { onSuccess: function () {
column.fadeOut(); column.fadeOut();
location.reload(); wishlistsRefresh();
}, },
}); });
} }
@ -329,7 +337,7 @@ $(function () {
button.removeClass('loading'); button.removeClass('loading');
location.reload(); wishlistsRefresh();
}); });
return false; return false;
@ -420,4 +428,44 @@ $(function () {
}); });
}); });
/**
* Create wishlist
*/
$(document).on('click', '.button.wishlist-create', function () {
var modalWishlistCreate = $('.ui.modal.wishlist-create');
var formWishlistCreate = modalWishlistCreate.find('.ui.form');
modalWishlistCreate
.modal({
onApprove: function (buttonCreate) {
const formData = new URLSearchParams(new FormData(formWishlistCreate[0]));
formWishlistCreate.addClass('loading');
buttonCreate.addClass('loading');
fetch('/src/api/wishlists.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(response => {
if(response.success) {
modalWishlistCreate.modal('hide');
urlParams.set('wishlist', response.data.lastInsertId);
wishlistsRefresh();
}
})
.finally(() => {
formWishlistCreate.removeClass('loading');
buttonCreate.removeClass('loading');
});
return false;
}
})
.modal('show');
});
}); });

View file

@ -81,87 +81,85 @@ class Wishlist
$cardIndex = 0; $cardIndex = 0;
if (!empty($products)) { ?> if (!empty($products)) { ?>
<div class="ui container"> <div class="ui stackable three column grid">
<div class="ui stackable three column grid"> <?php foreach ($products as $product) {
<?php foreach ($products as $product) { $cache = new EmbedCache($product['url']);
$cache = new EmbedCache($product['url']); $info = $cache->get(false);
$info = $cache->get(false); $exists = $cache->exists() ? 'true' : 'false';
$exists = $cache->exists() ? 'true' : 'false'; ?>
?> <div class="column">
<div class="column"> <div class="ui fluid card stretch" data-id="<?= $product['id'] ?>" data-index="<?= $cardIndex ?>" data-cache="<?= $exists ?>">
<div class="ui fluid card stretch" data-id="<?= $product['id'] ?>" data-index="<?= $cardIndex ?>" data-cache="<?= $exists ?>">
<?php if ($info->image) { ?> <?php if ($info->image) { ?>
<div class="image"> <div class="image">
<img class="preview" src="<?= $info->image ?>" loading="lazy"/> <img class="preview" src="<?= $info->image ?>" loading="lazy"/>
<?php if ($info->favicon) { ?> <?php if ($info->favicon) { ?>
<img class="favicon" src="<?= $info->favicon ?>" loading="lazy"/> <img class="favicon" src="<?= $info->favicon ?>" loading="lazy"/>
<?php } ?> <?php } ?>
<?php if ($info->providerName) { ?> <?php if ($info->providerName) { ?>
<span class="provider"><?= $info->providerName ?></span> <span class="provider"><?= $info->providerName ?></span>
<?php } ?> <?php } ?>
<?php if ($userIsCurrent) { ?> <?php if ($userIsCurrent) { ?>
<button class="ui icon button refresh"> <button class="ui icon button refresh">
<i class="refresh icon"></i> <i class="refresh icon"></i>
</button> </button>
<?php } ?>
</div>
<?php } ?>
<div class="content">
<?php if ($info->title) { ?>
<div class="header">
<?php if ($info->url) { ?>
<a href="<?= $info->url ?>" target="_blank"><?= $info->title ?></a>
<?php } else { ?>
<?= $info->title ?>
<?php } ?> <?php } ?>
</div> </div>
<?php } ?> <?php } ?>
<div class="content"> <?php if ($info->keywords) { ?>
<?php if ($info->title) { ?> <div class="meta">
<div class="header"> <?= implode(', ', $info->keywords) ?>
<?php if ($info->url) { ?> </div>
<a href="<?= $info->url ?>" target="_blank"><?= $info->title ?></a> <?php } ?>
<?php } else { ?>
<?= $info->title ?>
<?php } ?>
</div>
<?php } ?>
<?php if ($info->keywords) { ?>
<div class="meta">
<?= implode(', ', $info->keywords) ?>
</div>
<?php } ?>
<?php if ($info->description) { ?>
<div class="description">
<?= $info->description ?>
</div>
<?php } ?>
</div>
<div class="extra content buttons">
<?php if (!$userIsCurrent) { ?>
<a class="ui small primary labeled icon button commit">
<i class="shopping cart icon"></i>
Commit
</a>
<?php } ?>
<?php if ($info->url) { ?>
<a class="ui small right labeled icon button" href="<?= $info->url ?>" target="_blank">
<i class="external icon"></i>
View
</a>
<?php } ?>
<?php if ($userIsCurrent) { ?>
<a class="ui small labeled red icon button delete">
<i class="trash icon"></i>
Delete
</a>
<?php } ?>
</div>
<?php if ($info->description) { ?>
<div class="description">
<?= $info->description ?>
</div>
<?php } ?>
</div> </div>
<div class="extra content buttons">
<?php if (!$userIsCurrent) { ?>
<a class="ui small primary labeled icon button commit">
<i class="shopping cart icon"></i>
Commit
</a>
<?php } ?>
<?php if ($info->url) { ?>
<a class="ui small right labeled icon button" href="<?= $info->url ?>" target="_blank">
<i class="external icon"></i>
View
</a>
<?php } ?>
<?php if ($userIsCurrent) { ?>
<a class="ui small labeled red icon button delete">
<i class="trash icon"></i>
Delete
</a>
<?php } ?>
</div>
</div> </div>
<?php } ?> </div>
</div> <?php } ?>
</div> </div>
<? $cardIndex++ ?> <? $cardIndex++ ?>

View file

@ -68,14 +68,18 @@ $page->navigation();
</div> </div>
</div> </div>
<div class="wishlist-cards"> <div class="ui container">
<?php <h2 class="ui header">Products</h2>
echo $wishlist->getCards(
array( <div class="wishlist-cards">
'exclude' => array('unavailable'), <?php
) echo $wishlist->getCards(
); array(
?> 'exclude' => array('unavailable'),
)
);
?>
</div>
</div> </div>
</main> </main>

View file

@ -11,47 +11,20 @@ use wishthis\{Page, User, Wishlist};
$page = new page(__FILE__, 'Wishlists'); $page = new page(__FILE__, 'Wishlists');
$page->header(); $page->header();
$page->navigation(); $page->navigation();
/**
* Create
*/
if (isset($_POST['wishlist-create'], $_POST['name'])) {
$database->query('INSERT INTO `wishlists`
(
`user`,
`name`,
`hash`
) VALUES (
' . $_SESSION['user']['id'] . ',
"' . $_POST['name'] . '",
"' . sha1(time() . $_SESSION['user']['id'] . $_POST['name']) . '"
)
;');
header('Location: /?page=wishlists');
die();
}
/**
* Delete
*/
if (isset($_POST['wishlist_delete_id'])) {
$database->query('DELETE FROM `wishlists`
WHERE id = ' . $_POST['wishlist_delete_id'] . '
;');
}
?> ?>
<main> <main>
<div class="ui container"> <div class="ui container">
<h1 class="ui header"><?= $page->title ?></h1> <h1 class="ui header"><?= $page->title ?></h1>
<p>Here you can view and edit all of your wishlists.</p>
<div class="ui equal width stackable grid"> <h2 class="ui header">View</h2>
<div class="column"> <div class="ui horizontal stackable segments">
<div class="ui segment form">
<h2 class="ui header">View</h2>
<p>Please select a wishlist to view.</p>
<div class="ui segment">
<p>Please select a wishlist to view.</p>
<div class="ui form">
<div class="field"> <div class="field">
<label>Wishlist</label> <label>Wishlist</label>
<select class="ui fluid search selection dropdown loading wishlists" name="wishlist"> <select class="ui fluid search selection dropdown loading wishlists" name="wishlist">
@ -59,65 +32,82 @@ if (isset($_POST['wishlist_delete_id'])) {
</select> </select>
</div> </div>
</div> </div>
<div class="ui divider"></div>
<a class="ui small labeled icon button wishlist-product-add disabled">
<i class="add icon"></i>
Add a product
</a>
<a class="ui small labeled icon button wishlist-share disabled" target="_blank">
<i class="share icon"></i>
Share
</a>
<form class="ui form wishlist-delete" method="post" style="display: inline-block;">
<input type="hidden" name="wishlist_delete_id" />
<button class="ui small labeled red icon button disabled" type="submit">
<i class="trash icon"></i>
Delete
</button>
</form>
</div> </div>
<div class="column"> <div class="ui segment">
<div class="ui segment"> <p>General options.</p>
<h2 class="ui header">Create</h2>
<p>
Choose a new name for your wishlist.
Here's a suggestion to get you started!
</p>
<form class="ui form" method="post"> <a class="ui small labeled icon button wishlist-create">
<div class="field"> <i class="add icon"></i>
<label>Name</label> Create a wishlist
<input type="text" </a>
name="name"
placeholder="<?= getCurrentSeason() ?>"
value="<?= getCurrentSeason() ?>"
/>
</div>
<input class="ui primary button"
type="submit"
name="wishlist-create"
value="Create"
/>
</form>
</div>
</div> </div>
</div> </div>
<div class="ui segment"> <h2 class="ui header">Products</h2>
<h2 class="ui header">Options</h1>
<p>Wishlist related options.</p>
<a class="ui small labeled icon button wishlist-product-add disabled"> <div class="wishlist-cards"></div>
<i class="add icon"></i> </div>
Add a product </main>
</a>
<a class="ui small labeled icon button wishlist-share disabled" target="_blank"> <!-- Wishlist: Create -->
<i class="share icon"></i> <div class="ui modal wishlist-create">
Share <div class="header">
</a> Create a wishlist
</div>
<div class="content">
<div class="description">
<div class="ui header">Wishlist</div>
<p>
Choose a new name for your wishlist.
Here's a suggestion to get you started.
</p>
<form class="ui form wishlist-delete" method="post" style="display: inline-block;"> <form class="ui form">
<input type="hidden" name="wishlist_delete_id" /> <div class="field">
<label>Name</label>
<button class="ui small labeled red icon button disabled" type="submit"> <input type="text"
<i class="trash icon"></i> name="wishlist-name"
Delete placeholder="<?= getCurrentSeason() ?>"
</button> value="<?= getCurrentSeason() ?>"
/>
</div>
</form> </form>
</div> </div>
</div> </div>
<div class="actions">
<div class="ui approve primary button create">
Create
</div>
<div class="ui deny button cancel">
Cancel
</div>
</div>
</div>
<div class="wishlist-cards"></div> <!-- Wishlist: Add a product -->
</main>
<div class="ui modal wishlist-product-add"> <div class="ui modal wishlist-product-add">
<div class="header"> <div class="header">
Add a product Add a product
@ -152,6 +142,7 @@ if (isset($_POST['wishlist_delete_id'])) {
</div> </div>
</div> </div>
<!-- Wishlist: Add a product (fetch) -->
<div class="ui small modal wishlist-product-fetch"> <div class="ui small modal wishlist-product-fetch">
<div class="header"> <div class="header">
Incorrect URL Incorrect URL