diff options
Diffstat (limited to 'src/scripts/index.js')
| -rw-r--r-- | src/scripts/index.js | 98 |
1 files changed, 48 insertions, 50 deletions
diff --git a/src/scripts/index.js b/src/scripts/index.js index 3671a87..164c2cd 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -8,7 +8,7 @@ const cardsContainer = document.querySelector("#cards"); const commandElements = { createCardModalButton: document.querySelector("#open-new-card-modal-button"), importPinsModalButton: document.querySelector("#open-import-pins-modal-button"), - openOptionsModalButton: document.querySelector("#open-options-modal-button") + openOptionsModalButton: document.querySelector("#open-options-modal-button"), }; const cardModalElements = { @@ -24,10 +24,9 @@ const cardModalElements = { const optionsModalElements = { modal: document.querySelector("#options-modal"), - save: document.querySelector("#options-modal #save-options-button") + save: document.querySelector("#options-modal #save-options-button"), }; - const fileInput = document.querySelector("#file"); const cardModalBootstrap = new bootstrap.Modal(cardModalElements.modal); @@ -45,7 +44,7 @@ const constants = { keys: { cards: "cards", pins: "pins", - settings: "settings" + settings: "settings", }, }, flags: { @@ -80,7 +79,7 @@ function addEventListeners() { const file = fileInput.files[0]; console.log(file); const reader = new FileReader(); - reader.onload = content => importPins(content.target.result); + reader.onload = (content) => importPins(content.target.result); reader.readAsText(file); }); @@ -108,21 +107,18 @@ let pin = { toread: "", }; - function importPins(json) { - JSON.parse(json).forEach(pin => { + JSON.parse(json).forEach((pin) => { if (!addPin(pin)) throw new Error("WHOOPS"); }); } function logPins() { - database - .get(constants.database.keys.pins) - .then(pins => { - pins.data.forEach(element => { - console.log(element); - }); + database.get(constants.database.keys.pins).then((pins) => { + pins.data.forEach((element) => { + console.log(element); }); + }); } function addPin(pin) { @@ -153,7 +149,10 @@ function addPin(pin) { .then((added) => { console.log("created pins"); }) - .catch((err) => { logError("failed to create pins", err); return false; }); + .catch((err) => { + logError("failed to create pins", err); + return false; + }); } else { logError("failed to update pins", err); return false; @@ -161,7 +160,6 @@ function addPin(pin) { }); } - function openEditCardModal(id) { if (!id) return; database @@ -293,7 +291,6 @@ function addOrUpdateCard(card) { }); } - function logError(msg, error) { console.error("!!!"); console.error(msg); @@ -318,40 +315,42 @@ function renderCards() { database .get(constants.database.keys.cards) .then((cardDoc) => { - cardDoc.data.sort((a, b) => a.order - b.order).forEach((card) => { - let columElement = document.createElement("div"); - columElement.className = "col"; - let cardElement = document.createElement("div"); - cardElement.className = "card"; - columElement.appendChild(cardElement); - let cardHeader = document.createElement("div"); - cardHeader.className = - "card-header d-flex text-truncate justify-content-between align-items-center"; - let cardHeaderText = document.createElement("span"); - cardHeaderText.innerText = card.name; - cardHeader.appendChild(cardHeaderText); - let cardHeaderEditButton = document.createElement("img"); - cardHeaderEditButton.src = "assets/icons/pencil-square.svg"; - cardHeaderEditButton.title = "Rediger " + card.name; - cardHeaderEditButton.width = "18"; - cardHeaderEditButton.type = "button"; - cardHeaderEditButton.height = "18"; - cardHeaderEditButton.onclick = () => openEditCardModal(card._id); - cardHeader.appendChild(cardHeaderEditButton); - cardElement.appendChild(cardHeader); - let linkList = document.createElement("ul"); - linkList.className = "list-group list-group-flush"; - card.links.forEach((link) => { - let listItem = document.createElement("a"); - listItem.innerText = link.name; - listItem.className = "list-group-item"; - listItem.href = link.url; - linkList.appendChild(listItem); + cardDoc.data + .sort((a, b) => a.order - b.order) + .forEach((card) => { + let columElement = document.createElement("div"); + columElement.className = "col-sm-6 col-lg-4 mb-4"; + let cardElement = document.createElement("div"); + cardElement.className = "card"; + columElement.appendChild(cardElement); + let cardHeader = document.createElement("div"); + cardHeader.className = + "card-header d-flex text-truncate justify-content-between align-items-center"; + let cardHeaderText = document.createElement("span"); + cardHeaderText.innerText = card.name; + cardHeader.appendChild(cardHeaderText); + let cardHeaderEditButton = document.createElement("img"); + cardHeaderEditButton.src = "assets/icons/pencil-square.svg"; + cardHeaderEditButton.title = "Rediger " + card.name; + cardHeaderEditButton.width = "18"; + cardHeaderEditButton.type = "button"; + cardHeaderEditButton.height = "18"; + cardHeaderEditButton.onclick = () => openEditCardModal(card._id); + cardHeader.appendChild(cardHeaderEditButton); + cardElement.appendChild(cardHeader); + let linkList = document.createElement("ul"); + linkList.className = "list-group list-group-flush"; + card.links.forEach((link) => { + let listItem = document.createElement("a"); + listItem.innerText = link.name; + listItem.className = "list-group-item"; + listItem.href = link.url; + linkList.appendChild(listItem); + }); + cardElement.appendChild(linkList); + cardsContainer.append(columElement); }); - cardElement.appendChild(linkList); - cardsContainer.append(columElement); - }); - + new Masonry(cardsContainer); }) .catch((error) => { if (error.status !== 404) logError(error); @@ -376,4 +375,3 @@ Element.prototype.empty = function () { }; initialize(); - |