-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: start a rewrite with multiple components (#58)
- Loading branch information
Showing
9 changed files
with
353 additions
and
235 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| // CONSTANTS | ||
| const kStatusBoardColumns = [ | ||
| "name", | ||
| "license", | ||
| "test", | ||
| "type", | ||
| "public", | ||
| "pkg-name", | ||
| "version", | ||
| "node", | ||
| "esm", | ||
| "fork", | ||
| "fork-count", | ||
| "size", | ||
| "stars", | ||
| { name: "last-commit", attr: "data-timestamp" }, | ||
| { name: "last-release", attr: "data-timestamp" }, | ||
| "unreleased-commit", | ||
| "pr", | ||
| "issues", | ||
| "nyc", | ||
| "state", | ||
| "dep", | ||
| "devDep", | ||
| "branch" | ||
| ]; | ||
|
|
||
| export class Board { | ||
| static render() { | ||
| console.log("[Board] render"); | ||
|
|
||
| new List("data", { | ||
| valueNames: [...kStatusBoardColumns] | ||
| }); | ||
|
|
||
| const tags = document.getElementById("tags"); | ||
| tags.style.display = "none"; | ||
| for (const tagElement of document.querySelectorAll(".tag")) { | ||
| tagElement.addEventListener("click", tagElementClick); | ||
| } | ||
|
|
||
| const dropdown = document.getElementById("filter"); | ||
| if (dropdown) { | ||
| dropdown.addEventListener("click", () => { | ||
| dropdown.classList.toggle("button-selected"); | ||
| dropdown.setAttribute( | ||
| "aria-expanded", dropdown.getAttribute("aria-expanded") === "true" ? "false" : "true" | ||
| ); | ||
| tags.style.display = tags.style.display === "block" ? | ||
| "none" : "block"; | ||
| }); | ||
| } | ||
|
|
||
| document.addEventListener("click", (event) => { | ||
| if (!tags.contains(event.target) && !dropdown.contains(event.target)) { | ||
| tags.style.display = "none"; | ||
| dropdown.setAttribute("aria-expanded", "false"); | ||
| } | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| function tagElementClick() { | ||
| this.classList.toggle("selected"); | ||
|
|
||
| let hiddenTags = JSON.parse(localStorage.getItem("hidden-tags")) ?? []; | ||
| const dataValue = this.getAttribute("data-value"); | ||
|
|
||
| if (hiddenTags.includes(dataValue)) { | ||
| hiddenTags = hiddenTags.filter((item) => item !== dataValue); | ||
| } | ||
| else { | ||
| hiddenTags.push(dataValue); | ||
| } | ||
|
|
||
| localStorage.setItem("hidden-tags", JSON.stringify(hiddenTags)); | ||
|
|
||
| const th = document.querySelector(`[data-sort="${dataValue}"]`); | ||
| th.classList.toggle("hidden"); | ||
|
|
||
| document.querySelectorAll(`.${dataValue}`) | ||
| .forEach((element) => element.classList.toggle("hidden")); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,164 @@ | ||
| // Import Internal Dependencies | ||
| import { createDOMElement } from "../utils.js"; | ||
|
|
||
| export class Organization { | ||
| // When adding org, we need to make sure that the added org become the active one | ||
| static nextActiveOrg = null; | ||
|
|
||
| static get orgs() { | ||
| return JSON.parse(localStorage.getItem("orgs") ?? "[]"); | ||
| } | ||
|
|
||
| static set orgs(orgs) { | ||
| localStorage.setItem("orgs", JSON.stringify(orgs)); | ||
| } | ||
|
|
||
| /** | ||
| * @param {!string} orgName | ||
| * @returns {void} | ||
| */ | ||
| static setActive(orgName) { | ||
| const updatedOrgs = this.orgs.map((org) => { | ||
| org.active = org.orgName === orgName; | ||
|
|
||
| return org; | ||
| }); | ||
|
|
||
| localStorage.setItem("orgs", JSON.stringify(updatedOrgs)); | ||
| } | ||
|
|
||
| static render( | ||
| callback = () => void 0, | ||
| socket | ||
| ) { | ||
| console.log("[Org] render"); | ||
|
|
||
| const orgs = this.orgs; | ||
| const popupEl = document.getElementById("add-org-popup"); | ||
| const loaderEl = document.querySelector("#popup-loader"); | ||
| const inputEl = document.getElementById("add-org-input"); | ||
| const submitBtnEl = document.getElementById("add-org-btn"); | ||
|
|
||
| const fragment = document.createDocumentFragment(); | ||
|
|
||
| for (const org of orgs) { | ||
| const orgHTMLElement = createDOMElement("div", { | ||
| classList: ["org"], | ||
| childs: [ | ||
| createDOMElement("img", { | ||
| attributes: { | ||
| src: org.logo, | ||
| title: org.orgName, | ||
| height: 30, | ||
| width: 30 | ||
| } | ||
| }) | ||
| ] | ||
| }); | ||
|
|
||
| if (orgs.length > 1) { | ||
| const closeDiv = createDOMElement("div", { | ||
| classList: ["close"] | ||
| }); | ||
| closeDiv.addEventListener("click", (e) => { | ||
| e.stopPropagation(); | ||
| const token = JSON.parse(localStorage.getItem("token") ?? "null"); | ||
| const message = { removeOrg: org.orgName }; | ||
|
|
||
| if (token && !isTokenExpired(token)) { | ||
| message.token = token; | ||
| } | ||
| else { | ||
| // eslint-disable-next-line no-alert | ||
| const password = prompt("Password ?", ""); | ||
| message.password = password; | ||
| } | ||
|
|
||
| socket.send(JSON.stringify(message)); | ||
| }); | ||
|
|
||
| orgHTMLElement.appendChild(closeDiv); | ||
| } | ||
|
|
||
| orgHTMLElement.addEventListener("click", () => { | ||
| this.setActive(org.orgName); | ||
|
|
||
| document.querySelector("header").innerHTML = org.header; | ||
| document.querySelector("main").innerHTML = org.main; | ||
|
|
||
| if (new Date(org.lastUpdate).getTime() < Date.now() - (10 * 60 * 60 * 1000)) { | ||
| socket.send(JSON.stringify({ | ||
| orgName: org.orgName, | ||
| token: JSON.parse(localStorage.getItem("token")) | ||
| })); | ||
| document.querySelector("h1").innerHTML += " (updating...)"; | ||
|
|
||
| return; | ||
| } | ||
|
|
||
| this.render(callback); | ||
| callback(); | ||
| }); | ||
|
|
||
| fragment.appendChild(orgHTMLElement); | ||
| } | ||
|
|
||
| const addOrgEl = createDOMElement("img", { | ||
| attributes: { | ||
| src: "/images/plus.png" | ||
| } | ||
| }); | ||
|
|
||
| addOrgEl.addEventListener("click", () => { | ||
| const formEl = document.querySelector("#add-org-form"); | ||
| const closePopupEl = document.querySelector("#close-popup"); | ||
|
|
||
| closePopupEl.addEventListener("click", () => { | ||
| popupEl.classList.remove("opened"); | ||
| }); | ||
|
|
||
| popupEl.classList.add("opened"); | ||
| const controller = new AbortController(); | ||
|
|
||
| function onSubmit(e) { | ||
| e.preventDefault(); | ||
| const token = JSON.parse(localStorage.getItem("token") ?? "null"); | ||
| const message = { orgName: inputEl.value }; | ||
|
|
||
| if (token && !isTokenExpired(token)) { | ||
| message.token = token; | ||
| } | ||
| else { | ||
| // eslint-disable-next-line no-alert | ||
| const password = prompt("Password ?", ""); | ||
| message.password = password; | ||
| } | ||
|
|
||
| socket.send(JSON.stringify(message)); | ||
| loaderEl.classList.remove("hidden"); | ||
| inputEl.disabled = true; | ||
| submitBtnEl.disabled = true; | ||
| controller.abort(); | ||
|
|
||
| Organization.nextActiveOrg = inputEl.value; | ||
| } | ||
|
|
||
| formEl.addEventListener("submit", onSubmit, { signal: controller.signal }); | ||
| }); | ||
| fragment.appendChild(addOrgEl); | ||
|
|
||
| return fragment; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * @param {!string} token | ||
| * @returns {boolean} | ||
| */ | ||
| function isTokenExpired( | ||
| token | ||
| ) { | ||
| const expiry = (JSON.parse(atob(token.split(".")[1]))).exp; | ||
|
|
||
| return (Math.floor((new Date()).getTime() / 1000)) >= expiry; | ||
| } |
Oops, something went wrong.