Skip to content

Commit

Permalink
Two features
Browse files Browse the repository at this point in the history 
Wish CSS image thumbnail changes
Currency padding setting
  • Loading branch information
@aunefyren
aunefyren committed Jun 24, 2023
1 parent 09ccc66 commit df35f05
Show file tree
Hide file tree
Showing 7 changed files with 155 additions and 31 deletions.
5 changes: 3 additions & 2 deletions controllers/currency.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ func APIGetCurrency(context *gin.Context) {
return
}

context.JSON(http.StatusOK, gin.H{"message": "Currency retrieved.", "currency": config.PoenskelistenCurrency})
context.JSON(http.StatusOK, gin.H{"message": "Currency retrieved.", "currency": config.PoenskelistenCurrency, "padding": config.PoenskelistenCurrencyPad})

}

Expand Down Expand Up @@ -59,6 +59,7 @@ func APIUpdateCurrency(context *gin.Context) {
}

configFile.PoenskelistenCurrency = currency.PoenskelistenCurrency
configFile.PoenskelistenCurrencyPad = currency.PoenskelistenCurrencyPad

err = config.SaveConfig(configFile)
if err != nil {
Expand All @@ -68,6 +69,6 @@ func APIUpdateCurrency(context *gin.Context) {
return
}

context.JSON(http.StatusOK, gin.H{"message": "Currency updated.", "currency": configFile.PoenskelistenCurrency})
context.JSON(http.StatusOK, gin.H{"message": "Currency updated.", "currency": configFile.PoenskelistenCurrency, "padding": configFile.PoenskelistenCurrencyPad})

}
2 changes: 1 addition & 1 deletion controllers/wishcontroller.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ func GetWishesFromWishlist(context *gin.Context) {
return
}

context.JSON(http.StatusOK, gin.H{"owner_id": owner_id, "wishes": wishObjects, "message": "Wishes retrieved.", "currency": config.PoenskelistenCurrency})
context.JSON(http.StatusOK, gin.H{"owner_id": owner_id, "wishes": wishObjects, "message": "Wishes retrieved.", "currency": config.PoenskelistenCurrency, "padding": config.PoenskelistenCurrencyPad})
}

func ConvertWishToWishObject(wish models.Wish, requestUserID int) (models.WishObject, error) {
Expand Down
4 changes: 3 additions & 1 deletion models/config.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ type ConfigStruct struct {
PoenskelistenExternalURL string `json:"poenskelisten_external_url"`
PoenskelistenVersion string `json:"poenskelisten_version"`
PoenskelistenCurrency string `json:"poenskelisten_currency"`
PoenskelistenCurrencyPad bool `json:"poenskelisten_currency_pad"`
SMTPEnabled bool `json:"smtp_enabled"`
SMTPHost string `json:"smtp_host"`
SMTPPort int `json:"smtp_port"`
Expand All @@ -23,5 +24,6 @@ type ConfigStruct struct {
}

type UpdateCurrencyrequest struct {
PoenskelistenCurrency string `json:"poenskelisten_currency"`
PoenskelistenCurrency string `json:"poenskelisten_currency"`
PoenskelistenCurrencyPad bool `json:"poenskelisten_currency_pad"`
}
26 changes: 23 additions & 3 deletions web/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -480,7 +480,7 @@ button:disabled {
justify-content: space-between;
align-items: center;
align-content: center;
margin: 1em 1em;
margin: 1.5em 1em;
border: 2px solid var(--eggshell);
border-radius: 1em;
background-color: var(--lightblue);
Expand All @@ -489,6 +489,11 @@ button:disabled {

.wish-note, .group-members {
display: none;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
width: 100%;
width: -webkit-fill-available;
width: -moz-available;
Expand Down Expand Up @@ -713,14 +718,14 @@ hr {
}

.wish-price {
margin: 0 1em;
margin: 1em;
padding: 0.25em 0.5em;
background-color: var(--blue);
border-radius: 1em;
font-size: 0.75em;
}

.user-active-profile-photo-img {
.user-active-profile-photo-img, .wish-image-thumbnail-img {
border-radius: 10em;
object-fit: cover;
overflow: hidden;
Expand All @@ -738,6 +743,21 @@ hr {
background-color: var(--white);
}

.wish-image-thumbnail {
border-radius: 10em;
margin: 1em;
width: 10em;
height: 10em;
max-width: 100%;
max-height: 100%;
border: solid 0.5em var(--mediumblue);
background-color: var(--white);
}

.wish-note-text {
margin: 1em;
}

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
Expand Down
1 change: 1 addition & 0 deletions web/html/wishlist.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@
var jwt;
var admin = false;
var currency = "$"
var currency_pad = true;
info('Loading...');
showLoggedOutMenu();
jwt = get_cookie('poenskelisten');
Expand Down
9 changes: 8 additions & 1 deletion web/js/admin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,9 @@ function load_page(result) {
<input type="text" name="currency" id="currency" placeholder="What currency can wishes be listed in?" value="" autocomplete="off" required />
<input class="clickable" onclick="" style="" type="checkbox" id="currency-padding" name="currency-padding" value="confirm" >
<label for="currency-padding" class="clickable">Pad the currency string</label><br>
<button type="submit" onclick="update_currency();" id="update_currency_button" style=""><img src="assets/check.svg" class="btn_logo color-invert"><p2>Update</p2></button>
</div>
Expand Down Expand Up @@ -305,6 +308,7 @@ function get_currency() {

//console.log(result)
document.getElementById('currency').value = result.currency;
document.getElementById('currency-padding').checked = result.padding;

}

Expand All @@ -322,9 +326,11 @@ function get_currency() {
function update_currency() {

var currency = document.getElementById('currency').value;
var padding = document.getElementById('currency-padding').checked;

var form_obj = {
"poenskelisten_currency" : currency
"poenskelisten_currency" : currency,
"poenskelisten_currency_pad": padding
};

var form_data = JSON.stringify(form_obj);
Expand All @@ -349,6 +355,7 @@ function update_currency() {

success(result.message)
document.getElementById('currency').value = result.currency;
document.getElementById('currency-padding').checked = result.padding;

}

Expand Down
139 changes: 116 additions & 23 deletions web/js/wishlist.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,7 @@ function get_wishes(wishlist_id, group_id, user_id){
console.log(wishes);

currency = result.currency;
currency_padding = result.padding;
try {
document.getElementById("wish_price").placeholder = "Wish price in " + currency
} catch(e) {
Expand Down Expand Up @@ -243,10 +244,19 @@ function get_wishes(wishlist_id, group_id, user_id){
function place_wishes(wishes_array, wishlist_id, group_id, user_id) {

var html = ''
var wish_id_array = []

for(var i = 0; i < wishes_array.length; i++) {

html += generate_wish_html(wishes_array[i], wishlist_id, group_id, user_id);
var function_result = generate_wish_html(wishes_array[i], wishlist_id, group_id, user_id);
var new_html = function_result[0]
var wish_image = function_result[1]

if(wish_image) {
wish_id_array.push(wishes_array[i].ID)
}

html += new_html

}

Expand All @@ -256,20 +266,22 @@ function place_wishes(wishes_array, wishlist_id, group_id, user_id) {

wishlist_object = document.getElementById("wishes-box")
wishlist_object.innerHTML = html

if(wish_id_array.length > 0) {
for(var i = 0; i < wish_id_array.length; i++) {
GetWishImageThumbail(wish_id_array[i])
}
}

}

function generate_wish_html(wish_object, wishlist_id, group_id, user_id) {

var html = '';
var wish_with_image = false;

owner_id = wish_object.owner_id.ID

if(wish_object.wish_claimable) {
console.log("Wishlist claimable: true")
} else {
console.log("Wishlist claimable: false")
}

if(wish_object.wishclaim.length > 0 && user_id != owner_id && wish_object.wish_claimable) {
var transparent = " transparent"
} else {
Expand All @@ -288,18 +300,30 @@ function generate_wish_html(wish_object, wishlist_id, group_id, user_id) {
html += wish_object.name

if(wish_object.price != 0) {
html += '<div class="wish-price" title="Price">'
html += wish_object.price + currency

var currency_string = currency
if(currency_padding) {
currency_string = " " + currency_string;
}

html += '<div class="wish-price unselectable" title="Price">'
html += wish_object.price + currency_string
html += '</div>'
}

html += '</div>'

html += '<div class="profile">'

if(wish_object.note !== "") {
if(wish_object.note !== "" || wish_object.image) {
html += '<div class="profile-icon clickable" onclick="toggle_wish(' + wish_object.ID + ')" title="Expandable">'
html += '<img id="wish_' + wish_object.ID + '_arrow" class="icon-img color-invert" src="../../assets/chevron-right.svg">'

if(wish_object.image) {
html += '<img id="wish_' + wish_object.ID + '_arrow" class="icon-img color-invert" src="../../assets/chevron-down.svg">'
} else {
html += '<img id="wish_' + wish_object.ID + '_arrow" class="icon-img color-invert" src="../../assets/chevron-right.svg">'
}

html += '</div>'
}

Expand All @@ -309,18 +333,12 @@ function generate_wish_html(wish_object, wishlist_id, group_id, user_id) {
html += '</div>'
}

if(wish_object.image) {
html += '<div class="profile-icon clickable" onclick="toggle_wish_modal(' + wish_object.ID + ')" title="View image">'
html += '<img class="icon-img color-invert" src="../../assets/image.svg">'
html += '</div>'
}

if(user_id == owner_id) {

var b64_wish_name = toBASE64(wish_object.name)
var b64_wish_note = toBASE64(wish_object.note)
var b64_wish_url = toBASE64(wish_object.url)
var b64_wish_price = toBASE64(wish_object.price)
var b64_wish_price = toBASE64(wish_object.price.toString())

html += '<div class="profile-icon clickable" title="Edit wish" onclick="edit_wish(' + wish_object.ID + ", " + wishlist_id + ", " + group_id + ", " + user_id + ", '" + b64_wish_name + "', '" + b64_wish_note + "', '" + b64_wish_url + "', '" + b64_wish_price + "', '" + owner_id + '\')">'
html += '<img class="icon-img color-invert" src="../../assets/edit.svg">'
Expand Down Expand Up @@ -350,13 +368,29 @@ function generate_wish_html(wish_object, wishlist_id, group_id, user_id) {

html += '</div>'

html += '<div class="wish-note collapsed" id="wish_' + wish_object.ID + '_note" title="Note">'
if(wish_object.image) {
html += '<div class="wish-note expanded" style="display: flex !important;" id="wish_' + wish_object.ID + '_note" title="Note">'
} else {
html += '<div class="wish-note collapsed" id="wish_' + wish_object.ID + '_note" title="Note">'
}

if(wish_object.image) {
html += '<div class="wish-image-thumbnail clickable" onclick="toggle_wish_modal(' + wish_object.ID + ')">';
html += '<img style="width: 100%; height: 100%;" class="wish-image-thumbnail-img" id="wish-image-thumbnail-img-' + wish_object.ID + '" src="/assets/loading.gif">'
html += '</div>'

wish_with_image = true
}

html += '<div class="wish-note-text">'
html += wish_object.note
html += '</div>'

html += '</div>'

return html;
html += '</div>'

return [html, wish_with_image];

}

Expand All @@ -367,7 +401,7 @@ function toggle_wish(wishid) {
if(wishnote.classList.contains("collapsed")) {
wishnote.classList.remove("collapsed")
wishnote.classList.add("expanded")
wishnote.style.display = "inline-block"
wishnote.style.display = "flex"
wishnotearrow.src = "../../assets/chevron-down.svg"
} else {
wishnote.classList.remove("expanded")
Expand Down Expand Up @@ -888,9 +922,17 @@ function update_wish_two(form_data, wish_id, user_id, wishlist_id, group_id) {
} else {

success(result.message);
var wish_html = generate_wish_html(result.wish, wishlist_id, group_id, user_id);

var wish_array = generate_wish_html(result.wish, wishlist_id, group_id, user_id);
var wish_html = wish_array[0];
var wish_image = wish_array[1];

document.getElementById("wish_wrapper_" + wish_id).outerHTML = wish_html;

if(wish_image) {
GetWishImageThumbail(result.wish.ID)
}

}

} else {
Expand Down Expand Up @@ -926,9 +968,16 @@ function cancel_edit_wish(wish_id, wishlist_id, group_id, user_id) {

} else {

var wish_html = generate_wish_html(result.wish, wishlist_id, group_id, user_id);
var wish_array = generate_wish_html(result.wish, wishlist_id, group_id, user_id);
var wish_html = wish_array[0];
var wish_image = wish_array[1];

document.getElementById("wish_wrapper_" + wish_id).outerHTML = wish_html;

if(wish_image) {
GetWishImageThumbail(result.wish.ID)
}

}

}
Expand Down Expand Up @@ -1033,4 +1082,48 @@ function PlaceWishImageInModal(imageBase64) {

document.getElementById("modal-img").src = imageBase64

}

function GetWishImageThumbail(wishID) {

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {

try {
result = JSON.parse(this.responseText);
} catch(e) {
console.log(e +' - Response: ' + this.responseText);
error("Could not reach API.");
return;
}

if(result.error) {

error(result.error);

} else {

PlaceWishImageThumbail(result.image, wishID)

}

} else {
// info("Loading week...");
}
};
xhttp.withCredentials = true;
xhttp.open("post", api_url + "auth/wish/" + wishID + "/image?thumbnail=true");
xhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhttp.setRequestHeader("Authorization", jwt);
xhttp.send();

return;

}

function PlaceWishImageThumbail(imageBase64, wishID) {

document.getElementById("wish-image-thumbnail-img-" + wishID).src = imageBase64

}

0 comments on commit df35f05

Please sign in to comment.