mirror of
https://github.com/slynn1324/tinypin
synced 2025-12-12 14:25:35 +00:00
refactored server to break out into node modules
This commit is contained in:
slynn1324
194
client/components/editpin.js
Normal file
194
client/components/editpin.js
Normal file
@@ -0,0 +1,194 @@
|
||||
app.addSetter('editPinModal.open', (data) => {
|
||||
data.editPinModal.active = true;
|
||||
});
|
||||
|
||||
app.addSetter('editPinModal.close', (data) => {
|
||||
data.editPinModal.active = false;
|
||||
|
||||
let pinId = data.editPinModal.pin.id;
|
||||
|
||||
data.editPinModal.pin = null;
|
||||
data.editPinModal.newBoardName = null;
|
||||
data.editPinModal.saveInProgress = false;
|
||||
|
||||
openLightGallery(pinId);
|
||||
});
|
||||
|
||||
app.addGetter('editPinModal.isValid', (data) => {
|
||||
|
||||
if ( !data.editPinModal.pin ){
|
||||
return false;
|
||||
}
|
||||
|
||||
if ( data.editPinModal.boardId == "new"){
|
||||
if ( !data.editPinModal.newBoardName ){
|
||||
return false;
|
||||
} else if ( data.editPinModal.newBoardName.trim().length < 1 ){
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
let pin = getPinById(data.editPinModal.pin.id);
|
||||
|
||||
if ( pin.siteUrl == data.editPinModal.pin.siteUrl &&
|
||||
pin.description == data.editPinModal.pin.description &&
|
||||
pin.boardId == data.editPinModal.pin.boardId ){
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
app.addSetter("editPinModal.save", async (data) => {
|
||||
|
||||
store.do("loader.show");
|
||||
|
||||
data.editPinModal.saveInProgress = true;
|
||||
|
||||
let pin = data.editPinModal.pin;
|
||||
|
||||
let boardId = data.editPinModal.pin.boardId;
|
||||
|
||||
let newBoard = null;
|
||||
|
||||
if ( boardId == "new" ){
|
||||
|
||||
// TODO: make a helper method
|
||||
let res = await fetch("/api/boards", {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
"name": data.editPinModal.newBoardName
|
||||
})
|
||||
});
|
||||
|
||||
if ( res.status == 200 ){
|
||||
newBoard = await res.json();
|
||||
boardId = newBoard.id;
|
||||
data.boards.push(newBoard);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
let postData = {
|
||||
boardId: boardId,
|
||||
siteUrl: pin.siteUrl,
|
||||
description: pin.description
|
||||
};
|
||||
|
||||
let res = await fetch('api/pins/' + pin.id, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(postData)
|
||||
});
|
||||
|
||||
if ( res.status == 200 ){
|
||||
console.log(`updated pin#${pin.id}`);
|
||||
|
||||
// update the local copy of the pin
|
||||
let idx = getPinIndexById(pin.id);
|
||||
data.board.pins[idx].boardId = boardId;
|
||||
data.board.pins[idx].siteUrl = pin.siteUrl;
|
||||
data.board.pins[idx].description = pin.description;
|
||||
|
||||
store.do("editPinModal.close");
|
||||
} else {
|
||||
console.log(`error updating pin#${pin.id}`);
|
||||
}
|
||||
|
||||
store.do("loader.hide");
|
||||
|
||||
});
|
||||
|
||||
|
||||
app.addComponent('editPinModal', (store) => { return new Reef("#editPinModal", {
|
||||
|
||||
store: store,
|
||||
template: (data) => {
|
||||
|
||||
let options = "";
|
||||
for ( let i = 0; i < data.boards.length; ++i ){
|
||||
options += `<option value="${data.boards[i].id}">${data.boards[i].name}</option>`;
|
||||
}
|
||||
|
||||
let newBoardField = '';
|
||||
if ( data.editPinModal.pin && data.editPinModal.pin.boardId == "new" ){
|
||||
newBoardField = /*html*/`
|
||||
<div class="field">
|
||||
<label class="label">Board Name</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" data-bind="editPinModal.newBoardName" />
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
return /*html*/`
|
||||
<div class="modal ${data.editPinModal.active ? 'is-active' : ''}">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Edit Pin</p>
|
||||
<button class="delete" aria-label="close" data-onclick="editPinModal.close"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<div class="add-pin-flex">
|
||||
|
||||
<div class="add-pin-flex-left">
|
||||
<img src="${data.editPinModal.pin ? getImagePath(data.editPinModal.pin.id, 400) : ''}" />
|
||||
</div>
|
||||
|
||||
<div class="add-pin-flex-right">
|
||||
|
||||
<form>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Board</label>
|
||||
<div class="select">
|
||||
<select data-bind="editPinModal.pin.boardId">
|
||||
${options}
|
||||
<option value="new">Create New Board</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${newBoardField}
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Image Url (read-only)</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" data-bind="editPinModal.pin.imageUrl" readonly />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Website Url</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" data-bind="editPinModal.pin.siteUrl" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Description</label>
|
||||
<div class="control">
|
||||
<textarea class="textarea" data-bind="editPinModal.pin.description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="modal-card-foot">
|
||||
<button class="button is-success ${data.editPinModal.saveInProgress ? 'is-loading' : ''}" ${!store.get('editPinModal.isValid') || data.editPinModal.saveInProgress ? 'disabled' : ''} data-onclick="editPinModal.save">Save Pin</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
}
|
||||
|
||||
}); });
|
||||
Reference in New Issue
Block a user