Upload the base files
This commit is contained in:
Youngster Jaidev
parent
47514bf3fd
commit
dabcb10d71
548
css/main.css
Normal file
548
css/main.css
Normal file
@ -0,0 +1,548 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Roboto", sans-serif;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-size: clamp(1rem, 1.2vmax, 3rem);
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgba(var(--text-color), 1);
|
||||
background: rgba(var(--background-color), 1);
|
||||
}
|
||||
body,
|
||||
body * {
|
||||
--accent-color: #0D7377;
|
||||
--text-color: 17, 17, 17;
|
||||
--background-color: 255, 255, 255;
|
||||
--danger-color: red;
|
||||
}
|
||||
|
||||
body[data-theme=dark],
|
||||
body[data-theme=dark] * {
|
||||
--accent-color: #32E0C4;
|
||||
--text-color: 240, 240, 240;
|
||||
--text-color-light: 170, 170, 170;
|
||||
--background-color: 10, 10, 10;
|
||||
--danger-color: rgb(255, 106, 106);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 5em;
|
||||
height: 0em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
li > div > div:nth-of-type(1) {
|
||||
text-align: right;
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.8;
|
||||
max-width: 65ch;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 1.5rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
p:not(:last-of-type) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:focus-visible {
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
|
||||
}
|
||||
|
||||
button {
|
||||
display: inline-flex;
|
||||
border: none;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
a:any-link:focus-visible {
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
}
|
||||
|
||||
sm-button {
|
||||
--border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 5px;
|
||||
border: 1px solid rgba(var(--text-color), 1);
|
||||
}
|
||||
|
||||
.profile {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: #64b5f6;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.last-tx {
|
||||
padding: 1em 0em;
|
||||
}
|
||||
|
||||
.last-tx > div:nth-of-type(1) {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.last-tx-content {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
|
||||
.last-tx-content > div:nth-of-type(1) {
|
||||
padding: 0.5em;
|
||||
margin: 0.5em 0em;
|
||||
border-radius: 1rem;
|
||||
background: red;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.last-tx-content > div:nth-of-type(2) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app {
|
||||
padding: 0.5em;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
opacity: 0;
|
||||
transition: visiblity 0s, opacity 0.1s ease-in;
|
||||
}
|
||||
|
||||
.search-wrapper:not(.open) {
|
||||
visibility: hidden;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.search-wrapper.open {
|
||||
visibility: visible;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.search-overlay {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.search {
|
||||
margin: 0em auto;
|
||||
width: 50%;
|
||||
margin-top: 4rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 7px 3px rgb(0 0 0 / 20%);
|
||||
background: rgba(var(--background-color), 1);
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hide-completely {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.no-transformations {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.overflow-ellipsis {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.breakable {
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
-ms-word-break: break-all;
|
||||
word-break: break-word;
|
||||
-ms-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.full-bleed {
|
||||
grid-column: 1/4;
|
||||
}
|
||||
|
||||
.h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.h3 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.h4 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.h5 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
grid-template-columns: 1fr auto auto;
|
||||
}
|
||||
|
||||
.flow-column {
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
.gap-0-5 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-1-5 {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.gap-3 {
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.text-align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.align-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.justify-start {
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.align-self-center {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.justify-self-center {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.justify-self-start {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.justify-self-end {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.direction-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.color-0-8 {
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
.weight-400 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.weight-500 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
background: rgba(var(--text-color), 0.16);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.interact {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.observe-empty-state:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.observe-empty-state:not(:empty) ~ .empty-state {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
fill: rgba(var(--text-color), 0.9);
|
||||
}
|
||||
|
||||
.button__icon {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
}
|
||||
.button__icon--left {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.button__icon--right {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
#loading {
|
||||
text-align: center;
|
||||
amimation: load 1s infinite;
|
||||
}
|
||||
|
||||
#searchToggle {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@keyframes load {
|
||||
0% {
|
||||
color: red;
|
||||
}
|
||||
50% {
|
||||
color: white;
|
||||
}
|
||||
100% {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
#confirmation_popup,
|
||||
#prompt_popup {
|
||||
flex-direction: column;
|
||||
}
|
||||
#confirmation_popup h4,
|
||||
#prompt_popup h4 {
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
#confirmation_popup sm-button,
|
||||
#prompt_popup sm-button {
|
||||
margin: 0;
|
||||
}
|
||||
#confirmation_popup .flex,
|
||||
#prompt_popup .flex {
|
||||
padding: 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
#confirmation_popup .flex sm-button:first-of-type,
|
||||
#prompt_popup .flex sm-button:first-of-type {
|
||||
margin-right: 0.6rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
#main_header {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
padding: 0.5rem 1.5rem;
|
||||
background: rgba(var(--background-color), 1);
|
||||
border-bottom: solid 1px rgba(var(--text-color), 0.16);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#logo {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0 0.5rem;
|
||||
margin-right: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
#logo h4 {
|
||||
text-transform: capitalize;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
#logo h5 {
|
||||
font-size: 0.8rem;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
#logo #main_logo {
|
||||
height: 1.4rem;
|
||||
width: 1.4rem;
|
||||
fill: rgba(var(--text-color), 1);
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
sm-tab-header {
|
||||
padding: 0 1.5rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
|
||||
sm-tab {
|
||||
padding: 0.5rem 0.8rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 3rem;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
.section:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.section__header {
|
||||
display: flex;
|
||||
padding: 1rem 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/*width: 100%;*/
|
||||
/*min-width: 20rem;*/
|
||||
border-radius: 0.5rem;
|
||||
margin: 1rem 0.5em;
|
||||
margin-bottom: 0.4em;
|
||||
flex: 1 0;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
|
||||
.card > a > div:nth-of-type(3) {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 1em;
|
||||
padding: 0.5em;
|
||||
border-radius: 1rem;
|
||||
background-color: rgba(var(--background-color));
|
||||
}
|
||||
|
||||
.card > a > h3 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 640px) {
|
||||
sm-popup {
|
||||
--width: 24rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.search {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
12066
index.html
Normal file
12066
index.html
Normal file
File diff suppressed because it is too large
Load Diff
9
js/components.min.js
vendored
Normal file
9
js/components.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
618
js/main.js
Normal file
618
js/main.js
Normal file
@ -0,0 +1,618 @@
|
||||
const main = (ready) => {
|
||||
if (ready) {
|
||||
document.body.addEventListener("keydown", (e) => {
|
||||
if (e.key === "/") {
|
||||
e.preventDefault();
|
||||
searchWrapper.classList.add("open");
|
||||
let el = document.getElementById("input");
|
||||
el.focusIn();
|
||||
}
|
||||
});
|
||||
let _input = document.querySelector("#input");
|
||||
let _backBtn = document.querySelector("#logo");
|
||||
let home = document.getElementById("home");
|
||||
let searchToggle = document.getElementById("searchToggle");
|
||||
let searchOverlay = document.querySelector(".search-overlay");
|
||||
let searchWrapper = document.querySelector(".search-wrapper");
|
||||
let _getTemplate = document.getElementById("myTemplate");
|
||||
let _cardTemplate = document.getElementById("cardTemplate");
|
||||
let internRating = {};
|
||||
function getDate(time) {
|
||||
let stringTime = time + "000";
|
||||
let newTime = new Date(+stringTime).toDateString();
|
||||
return newTime;
|
||||
}
|
||||
searchToggle.addEventListener("click", () => {
|
||||
searchWrapper.classList.add("open");
|
||||
_input.focus();
|
||||
});
|
||||
searchOverlay.addEventListener("click", () => {
|
||||
searchWrapper.classList.remove("open");
|
||||
});
|
||||
/**
|
||||
* On changing the search input
|
||||
* - Update the DOM and fill the result
|
||||
* - if there is nothing set all the element to the DOM
|
||||
*/
|
||||
_input.addEventListener("input", (e) => {
|
||||
// @ts-ignore
|
||||
let val = e.target.value;
|
||||
window.location.hash = "";
|
||||
if (finalList.length !== 0) {
|
||||
const list = finalList.filter((element) => {
|
||||
let newUserName = element.name.slice(0, val.length);
|
||||
return newUserName.toLowerCase() === val.toLowerCase();
|
||||
});
|
||||
if (list.length) {
|
||||
_rootDiv.innerHTML = renderList(list);
|
||||
}
|
||||
else {
|
||||
_rootDiv.innerHTML = renderList(finalList);
|
||||
}
|
||||
}
|
||||
else {
|
||||
return `
|
||||
<h1 style="
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 50vh;
|
||||
">Loading...</h1>
|
||||
`;
|
||||
}
|
||||
});
|
||||
// intern Data "const internList = []"
|
||||
//
|
||||
// Data from distributer "const distributerData = []"
|
||||
//
|
||||
// filter the transaction of interns from the distributer
|
||||
const receiverList = [];
|
||||
const internList = [];
|
||||
let finalList = [];
|
||||
customElements.define("my-card", class MyCard extends HTMLElement {
|
||||
displayUsername;
|
||||
displayUserId;
|
||||
// look all the value we have to look on change
|
||||
static get observedAttributes() {
|
||||
return ["username", "userid"];
|
||||
}
|
||||
constructor() {
|
||||
super();
|
||||
// attach the shadow DOM
|
||||
this.attachShadow({ mode: "open" });
|
||||
}
|
||||
get username() {
|
||||
return this.getAttribute("username");
|
||||
}
|
||||
get userid() {
|
||||
return this.getAttribute("userid");
|
||||
}
|
||||
set username(val) {
|
||||
this.setAttribute("username", val);
|
||||
}
|
||||
set userid(val) {
|
||||
this.setAttribute("userid", val);
|
||||
}
|
||||
// @ts-ignore
|
||||
attributeChangedCallback(name, oldValue, newValue) {
|
||||
if (oldValue !== newValue && this.displayUsername) {
|
||||
this.displayUsername.innerText = this.username;
|
||||
this.displayUserId.innerText = this.userid;
|
||||
}
|
||||
}
|
||||
// run when the element attached to the DOM
|
||||
connectedCallback() {
|
||||
const template = document.createElement("template");
|
||||
template.innerHTML = this.render();
|
||||
const node = document.importNode(template.content, true);
|
||||
this.shadowRoot.append(node);
|
||||
// select the element from the shadow DOM and set the value
|
||||
this.displayUsername = this.shadowRoot.querySelector(".username");
|
||||
this.displayUserId = this.shadowRoot.querySelector(".userid");
|
||||
this.shadowRoot
|
||||
.querySelector("span")
|
||||
.addEventListener("click", (e) => {
|
||||
// back to the home page
|
||||
window.location.hash = "";
|
||||
_rootDiv.innerHTML = renderList();
|
||||
});
|
||||
}
|
||||
// render the element to the DOM
|
||||
render() {
|
||||
if (finalList.length) {
|
||||
let el = document.createElement("div");
|
||||
let backBtn = document.createElement("div");
|
||||
let username = document.createElement("h2");
|
||||
let floId = document.createElement("h3");
|
||||
let projectName = document.createElement("h4");
|
||||
let profile = document.createElement("div");
|
||||
let totalMoneyEarned = document.createElement("div");
|
||||
let totalNumberOfTransaction = document.createElement("div");
|
||||
const myResult = finalList.filter((l) => {
|
||||
return this.userid.slice(1) === l.floId;
|
||||
});
|
||||
myResult.forEach((r) => {
|
||||
let txData = document.createElement("ul");
|
||||
let red = document.createElement("span");
|
||||
let totalAmount = 0;
|
||||
profile.classList.add("profile");
|
||||
username.innerText = r.name;
|
||||
floId.innerText = this.userid.slice(1);
|
||||
projectName.innerText = `Project - ${r.projectName || "Intern Inactive"}`;
|
||||
totalNumberOfTransaction.innerText = `Total Number of transactions - ${r.transactions.length}`;
|
||||
username.style.textAlign = "left";
|
||||
red.innerHTML = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
`;
|
||||
backBtn.classList.add("back-btn");
|
||||
backBtn.append(red);
|
||||
if (r.transactions.length) {
|
||||
r.transactions.forEach((t) => {
|
||||
let amount = t.transaction.floData.match(/([0-9]+)/);
|
||||
let num = Number(amount[0]);
|
||||
let senderAddress = t.transaction.vin[0].addr;
|
||||
let time = getDate(t.transaction.time);
|
||||
let li = document.createElement("li");
|
||||
li.style.margin = "1em 0em";
|
||||
totalAmount += num;
|
||||
li.innerHTML = `
|
||||
<div class="card">
|
||||
<div>₹${amount[0]}/-</div>
|
||||
<div>${time}</div>
|
||||
<h3>Transaction Detail</h3>
|
||||
<div>Message - ${t.transaction.floData}</div>
|
||||
<div>Sent from - RanchiMall Distribution Address "${senderAddress}"</div>
|
||||
<a target="_blank" href="${t.transaction.blockChainLink}">${t.transaction.blockChainLink}</a>
|
||||
</div>
|
||||
`;
|
||||
txData.appendChild(li);
|
||||
});
|
||||
}
|
||||
else {
|
||||
let li = document.createElement("div");
|
||||
li.innerText = "No Transaction Found";
|
||||
txData.appendChild(li);
|
||||
}
|
||||
totalMoneyEarned.classList.add("totalAmount");
|
||||
totalMoneyEarned.innerHTML = `
|
||||
<div>₹${totalAmount}</div>
|
||||
<div style="font-size: xx-small; text-align: right;">Total Amount Paid</div>
|
||||
`;
|
||||
let styling = document.createElement("style");
|
||||
styling.innerHTML = `
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
ul {
|
||||
padding: 0em;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 2.5em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin: 1em 0em;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 1em 0em;
|
||||
color: #64b5f6;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
.profile {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: #64b5f6;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: rgba(var(--background-color), 1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 4em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.totalAmount {
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
right: 1em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 20rem;
|
||||
border-radius: 0.5rem;
|
||||
flex: 1 0;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
|
||||
.card > div:nth-of-type(1) {
|
||||
margin: 0.5em 0em;
|
||||
font-size: 3.5em;
|
||||
}
|
||||
|
||||
.card > div:nth-of-type(2) {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 1em;
|
||||
width: max-content;
|
||||
background: rgba(var(--background-color), 1);
|
||||
padding: 0.4em;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
`;
|
||||
el.appendChild(backBtn);
|
||||
el.appendChild(styling);
|
||||
//el.appendChild(profile);
|
||||
el.appendChild(username);
|
||||
el.appendChild(floId);
|
||||
el.appendChild(projectName);
|
||||
el.appendChild(totalMoneyEarned);
|
||||
el.appendChild(totalNumberOfTransaction);
|
||||
el.appendChild(txData);
|
||||
});
|
||||
return el.innerHTML;
|
||||
}
|
||||
}
|
||||
});
|
||||
let path = {
|
||||
current: window.location.hash || "#",
|
||||
printPath: () => { },
|
||||
};
|
||||
const _rootDiv = document.getElementById("uInfo");
|
||||
// render all the list of the use on to the DOM
|
||||
/*function renderList() {
|
||||
|
||||
if (finalList.length !== 0) {
|
||||
let el: HTMLDivElement = document.createElement("div");
|
||||
let heading: HTMLHeadElement = document.createElement("h2");
|
||||
heading.innerText = "RanchiMall Internship Blockchain Contract";
|
||||
heading.style.textAlign = "center";
|
||||
heading.style.width = "100%";
|
||||
heading.style.padding = "2em 0.5em";
|
||||
|
||||
el.appendChild(heading);
|
||||
|
||||
for (let i of finalList) {
|
||||
let card: HTMLAnchorElement = document.createElement("div");
|
||||
let link = document.createElement("a");
|
||||
|
||||
link.innerText =
|
||||
i.transactions[0].transaction.blockChainLink;
|
||||
link.href = i.transactions[0].transaction.blockChainLink;
|
||||
link.target = "_blank";
|
||||
link.style.marginTop = "0em";
|
||||
|
||||
card.classList.add("card");
|
||||
card.href = `#${i.floId}`;
|
||||
let amount = i.transactions[0].transaction.floData.match(
|
||||
/([0-9]+)/
|
||||
);
|
||||
card.innerHTML = `
|
||||
<a href="#${i.floId}" style="position: relative;">
|
||||
<div class="profile"></div>
|
||||
<h3>${i.name}</h3>
|
||||
<h5>${i.floId}</h5>
|
||||
<h5>Total amount paid: ₹${i.totalMoneyEarned}</h5>
|
||||
<h5>Total no. of transaction: ${i.transactions.length
|
||||
}</h5>
|
||||
<div class="last-tx">
|
||||
<div>Last transaction </div>
|
||||
<div class="last-tx-content">
|
||||
<div>${getDate(
|
||||
i.transactions[0].transaction.time
|
||||
)}</div>
|
||||
<div style="font-size: 2em; padding: 0.5em 0em;">₹${amount[0]
|
||||
}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>${internRating[i.floId]}</div>
|
||||
</a>
|
||||
<div style="margin: 0.5em 0em;">View last payment blockchain</div>
|
||||
<a target="_blank" href="${i.transactions[0].transaction.blockChainLink
|
||||
}">${i.transactions[0].transaction.blockChainLink}</a>
|
||||
`;
|
||||
el.appendChild(card);
|
||||
}
|
||||
return el.innerHTML;
|
||||
} else {
|
||||
return `
|
||||
<h1 style="
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 50vh;
|
||||
">Loading...</h1>
|
||||
`;
|
||||
}
|
||||
}*/
|
||||
function renderList(data) {
|
||||
// check if the finallist have any length
|
||||
if (data.length !== 0) {
|
||||
// get the template from the DOM
|
||||
// get the deep copy the template
|
||||
let node = _getTemplate.content.cloneNode(true);
|
||||
for (let i of data) {
|
||||
let amount = i.transactions[0].transaction.floData.match(/([0-9]+)/);
|
||||
//
|
||||
let cardNode = _cardTemplate.content.cloneNode(true);
|
||||
cardNode.querySelector(".link").href = `#${i.floId}`;
|
||||
cardNode.querySelector(".heading-name").textContent =
|
||||
i.name;
|
||||
cardNode.querySelector(".heading-floId").textContent =
|
||||
i.floId;
|
||||
cardNode.querySelector(".total-money-earned").textContent = `Total amount paid: ₹${i.totalMoneyEarned}`;
|
||||
cardNode.querySelector(".number-of-transaction").textContent = `Total number of transactions: ${i.transactions.length}`;
|
||||
cardNode.querySelector(".last-tx-content").textContent = getDate(i.transactions[0].transaction.time);
|
||||
cardNode.querySelector(".last-tx-amount").textContent = `₹${amount[0]}/-`;
|
||||
cardNode.querySelector(".intern-rating").textContent =
|
||||
internRating[i.floId];
|
||||
cardNode.querySelector(".blockchain-link").href =
|
||||
i.transactions[0].transaction.blockChainLink;
|
||||
node.querySelector(".card-wrapper").appendChild(cardNode);
|
||||
}
|
||||
let el = document.createElement("div");
|
||||
el.appendChild(node);
|
||||
return el.innerHTML;
|
||||
}
|
||||
else {
|
||||
return `
|
||||
<h1 style="
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 50vh;
|
||||
">Loading...</h1>
|
||||
`;
|
||||
}
|
||||
}
|
||||
// render the details page
|
||||
function renderDetail() {
|
||||
return `
|
||||
<my-card username="red" style="
|
||||
flex: 1;
|
||||
padding: 1em;
|
||||
position: relative;
|
||||
" userid="${window.location.hash}"></my-card>
|
||||
`;
|
||||
}
|
||||
let routes = {
|
||||
"#": renderList(finalList),
|
||||
"#detail": renderDetail(),
|
||||
};
|
||||
/**
|
||||
* Run when there is change of hash on the window
|
||||
* - get the first value from the routes object
|
||||
* - check the value is matching to the comming route value
|
||||
* - if so, render the home page otherwise detail page
|
||||
*/
|
||||
const handleRender = (route) => {
|
||||
// ...
|
||||
let val = Object.keys(routes)[0];
|
||||
if (val === route) {
|
||||
_rootDiv.innerHTML = renderList(finalList);
|
||||
}
|
||||
else {
|
||||
_rootDiv.innerHTML = renderDetail();
|
||||
}
|
||||
};
|
||||
// check the change in hash
|
||||
window.addEventListener("hashchange", (e) => {
|
||||
// get the current path
|
||||
path.current = window.location.hash || "#";
|
||||
/**
|
||||
* @param always be the path of the window
|
||||
*/
|
||||
handleRender(path.current);
|
||||
});
|
||||
// render the home page default
|
||||
_rootDiv.innerHTML = renderList(finalList);
|
||||
// Go the home page
|
||||
_backBtn.addEventListener("click", () => {
|
||||
window.location.hash = "";
|
||||
_rootDiv.innerHTML = renderList();
|
||||
});
|
||||
/**
|
||||
* Creating a list in which store all the
|
||||
* flo addresses of the receiver
|
||||
*/
|
||||
/**
|
||||
* get the intern data from the RanchiMall
|
||||
* - request the server for data
|
||||
* - loop over the response
|
||||
* - push the each data to the "finalList arrary"
|
||||
* - call the fetchInternData()
|
||||
*/
|
||||
async function getInternData() {
|
||||
try {
|
||||
let r = await floCloudAPI.requestObjectData("RIBC", {
|
||||
application: "RIBC",
|
||||
receiverID: "FMeiptdJNtYQEtzyYAVNP8fjsDJ1i4EPfE",
|
||||
senderIDs: [
|
||||
"F7TxecSPV8oFZE6Y2giVuP8hfsqfAD6erj",
|
||||
"FCja6sLv58e3RMy41T5AmWyvXEWesqBCkX",
|
||||
"FPFeL5PXzW9bGosUjQYCxTHSMHidnygvvd",
|
||||
"FS4jMAcSimRMrhoRhk5cjuJERS2otiwq4A",
|
||||
"FU2fkubqGD5ynbr7qhvaPe9DPqrNdGB6mw",
|
||||
"FUkY9k9mVVxPzYA8uUGxUuLVH6CB83Nb9r",
|
||||
],
|
||||
});
|
||||
if (r) {
|
||||
let i = floGlobals.appObjects.RIBC.internList;
|
||||
for (let key in i) {
|
||||
internList.push({
|
||||
floId: key,
|
||||
floUserName: i[key],
|
||||
});
|
||||
}
|
||||
// fetch all the data and pack together
|
||||
fetchInternData();
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
// ERROR HANDLING
|
||||
console.log("Error Occur while fetching the Intern Data", e);
|
||||
_rootDiv.innerHTML = `
|
||||
<div style="flex: 1; padding: 1em;">
|
||||
<h1>Something Went Wrong [keep Refreshing the page ...]</h1>
|
||||
<p style="color: red;">${e}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
function bundleAllData() {
|
||||
// get the internList from the server
|
||||
let internList = floGlobals.appObjects.RIBC.internList;
|
||||
internRating = floGlobals.appObjects.RIBC.internRating;
|
||||
// get the intern Assigned project from the server
|
||||
// get the value of internAssigned project
|
||||
let internsAssigned = floGlobals.appObjects.RIBC.internsAssigned;
|
||||
const internsAssignedArr = Object.entries(internsAssigned);
|
||||
// get the project details from the server
|
||||
let projectDetails = floGlobals.appObjects.RIBC.projectDetails;
|
||||
// set the tragetList
|
||||
let tragetList = [];
|
||||
// loop over the intern data
|
||||
for (let internId in internList) {
|
||||
// loop over the intern assigned project so we get the
|
||||
// associated projects
|
||||
for (let [k, v] of internsAssignedArr) {
|
||||
// find the value have correct key
|
||||
let value = v.find((el) => {
|
||||
return el === internId;
|
||||
});
|
||||
// if we find a value find its project Details also
|
||||
if (value) {
|
||||
// loop over the project details
|
||||
for (let i in projectDetails) {
|
||||
// find out the key by the slicing it
|
||||
let key = k.slice(0, 14);
|
||||
// get the value
|
||||
let newVal = projectDetails[key];
|
||||
// send it ot targetList
|
||||
tragetList.push({
|
||||
internId: internId,
|
||||
project: k,
|
||||
projectName: newVal.projectName,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// loop over to the finalList to attach the projectName
|
||||
for (let key in tragetList) {
|
||||
// get the internId from the tragetList
|
||||
let val = tragetList[key].internId;
|
||||
// get the index out of that
|
||||
let index = finalList.findIndex((el) => el.floId === val);
|
||||
// if it exists
|
||||
if (index > -1) {
|
||||
finalList[index].projectName = tragetList[key].projectName;
|
||||
}
|
||||
}
|
||||
for (let index of finalList) {
|
||||
let totalAmount = 0;
|
||||
/*finalList[index].transactions.forEach((intern) => {
|
||||
let amount = intern.transaction.floData.match(/([0-9]+)/);
|
||||
let num = Number(amount[0]);
|
||||
totalAmount += num;
|
||||
});
|
||||
finalList[index].totalMoneyEarned = totalAmount;*/
|
||||
}
|
||||
/**
|
||||
* Loop over the final List to get the totalAmount
|
||||
*/
|
||||
finalList.forEach((list) => {
|
||||
let totalAmount = 0;
|
||||
list.transactions.forEach((intern) => {
|
||||
let amount = intern.transaction.floData.match(/([0-9]+)/);
|
||||
let num = Number(amount[0]);
|
||||
totalAmount += num;
|
||||
// add the blockChainLink key
|
||||
//intern.transaction.blockChainLink = `https://livenet.flocha.in/block/${intern.transaction.blockhash}`;
|
||||
intern.transaction.blockChainLink = `https://livenet.flocha.in/tx/${intern.transaction.txid}`;
|
||||
});
|
||||
const transactionsDetails = list.transactions.sort((first, second) => {
|
||||
return second.transaction.time - first.transaction.time;
|
||||
});
|
||||
list.totalMoneyEarned = totalAmount;
|
||||
list.transactions = transactionsDetails;
|
||||
});
|
||||
const myArr = finalList.sort((first, second) => {
|
||||
return (second.transactions[0].transaction.time -
|
||||
first.transactions[0].transaction.time);
|
||||
});
|
||||
finalList = myArr;
|
||||
}
|
||||
// get the internData after the 3sec I don't know why
|
||||
setTimeout(() => {
|
||||
getInternData();
|
||||
}, 1000);
|
||||
/**
|
||||
* Fetch initial transactions
|
||||
* - request the distributer transactions from the server
|
||||
* - push all these transactions to the "receiverList array"
|
||||
* - then loop over to the interList array in which we collect interns data
|
||||
* - filter out the transactions of the intern from the distributer transactions
|
||||
* - push all the data to the new called finalList array
|
||||
* - render the home page to the DOM
|
||||
*/
|
||||
function fetchInternData() {
|
||||
floBlockchainAPI
|
||||
.readAllTxs("FThgnJLcuStugLc24FJQggmp2WgaZjrBSn", "", "")
|
||||
.then((r) => {
|
||||
// loop over the response transactions
|
||||
r.forEach((user) => {
|
||||
// sending all the transaction to the new array
|
||||
receiverList.push({
|
||||
floId: user.vout[0].scriptPubKey.addresses[0],
|
||||
transaction: user,
|
||||
});
|
||||
});
|
||||
// loop over the intern data
|
||||
for (let d of internList) {
|
||||
// filter the intern transactions
|
||||
const result = receiverList.filter((i) => {
|
||||
return i.floId === d.floId;
|
||||
});
|
||||
// check if the transaction are available
|
||||
if (result.length) {
|
||||
// add all the transaction to the new Array
|
||||
finalList.push({
|
||||
name: d.floUserName,
|
||||
floId: d.floId,
|
||||
transactions: [...result],
|
||||
});
|
||||
}
|
||||
}
|
||||
bundleAllData();
|
||||
// re-render the DOM
|
||||
_rootDiv.innerHTML = renderList(finalList);
|
||||
}, console.error);
|
||||
}
|
||||
}
|
||||
};
|
||||
305
js/main_UI.js
Normal file
305
js/main_UI.js
Normal file
@ -0,0 +1,305 @@
|
||||
// Global variables
|
||||
const appPages = ['dashboard', 'settings'];
|
||||
const domRefs = {};
|
||||
let timerId;
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
//Checks for internet connection status
|
||||
if (!navigator.onLine)
|
||||
notify(
|
||||
"There seems to be a problem connecting to the internet, Please check you internet connection.",
|
||||
"error",
|
||||
{ sound: true }
|
||||
);
|
||||
window.addEventListener("offline", () => {
|
||||
notify(
|
||||
"There seems to be a problem connecting to the internet, Please check you internet connection.",
|
||||
"error",
|
||||
{ pinned: true, sound: true }
|
||||
);
|
||||
});
|
||||
window.addEventListener("online", () => {
|
||||
getRef("notification_drawer").clearAll();
|
||||
notify("We are back online.", "success");
|
||||
});
|
||||
|
||||
// Use instead of document.getElementById
|
||||
function getRef(elementId) {
|
||||
if (!domRefs.hasOwnProperty(elementId)) {
|
||||
domRefs[elementId] = {
|
||||
count: 1,
|
||||
ref: null,
|
||||
};
|
||||
return document.getElementById(elementId);
|
||||
} else {
|
||||
if (domRefs[elementId].count < 3) {
|
||||
domRefs[elementId].count = domRefs[elementId].count + 1;
|
||||
return document.getElementById(elementId);
|
||||
} else {
|
||||
if (!domRefs[elementId].ref)
|
||||
domRefs[elementId].ref = document.getElementById(elementId);
|
||||
return domRefs[elementId].ref;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// returns dom with specified element
|
||||
function createElement(tagName, options) {
|
||||
const { className, textContent, innerHTML, attributes = {} } = options
|
||||
const elem = document.createElement(tagName)
|
||||
for (let attribute in attributes) {
|
||||
elem.setAttribute(attribute, attributes[attribute])
|
||||
}
|
||||
if (className)
|
||||
elem.className = className
|
||||
if (textContent)
|
||||
elem.textContent = textContent
|
||||
if (innerHTML)
|
||||
elem.innerHTML = innerHTML
|
||||
return elem
|
||||
}
|
||||
|
||||
// Use when a function needs to be executed after user finishes changes
|
||||
const debounce = (callback, wait) => {
|
||||
let timeoutId = null;
|
||||
return (...args) => {
|
||||
window.clearTimeout(timeoutId);
|
||||
timeoutId = window.setTimeout(() => {
|
||||
callback.apply(null, args);
|
||||
}, wait);
|
||||
};
|
||||
}
|
||||
|
||||
// Limits the rate of function execution
|
||||
function throttle(func, delay) {
|
||||
// If setTimeout is already scheduled, no need to do anything
|
||||
if (timerId) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Schedule a setTimeout after delay seconds
|
||||
timerId = setTimeout(function () {
|
||||
func();
|
||||
|
||||
// Once setTimeout function execution is finished, timerId = undefined so that in
|
||||
// the next scroll event function execution can be scheduled by the setTimeout
|
||||
timerId = undefined;
|
||||
}, delay);
|
||||
}
|
||||
|
||||
class Stack {
|
||||
constructor() {
|
||||
this.items = [];
|
||||
}
|
||||
push(element) {
|
||||
this.items.push(element);
|
||||
}
|
||||
pop() {
|
||||
if (this.items.length == 0)
|
||||
return "Underflow";
|
||||
return this.items.pop();
|
||||
}
|
||||
peek() {
|
||||
return this.items[this.items.length - 1];
|
||||
}
|
||||
}
|
||||
|
||||
// function required for popups or modals to appear
|
||||
function showPopup(popupId, pinned) {
|
||||
zIndex++
|
||||
getRef(popupId).setAttribute('style', `z-index: ${zIndex}`)
|
||||
popupStack = getRef(popupId).show({ pinned, popupStack })
|
||||
return getRef(popupId);
|
||||
}
|
||||
|
||||
// hides the popup or modal
|
||||
function hidePopup() {
|
||||
if (popupStack.peek() === undefined)
|
||||
return;
|
||||
popupStack.peek().popup.hide()
|
||||
}
|
||||
|
||||
// displays a popup for asking permission. Use this instead of JS confirm
|
||||
const getConfirmation = (title, message, cancelText = 'Cancel', confirmText = 'OK') => {
|
||||
return new Promise(resolve => {
|
||||
showPopup('confirmation_popup', true)
|
||||
getRef('confirm_title').textContent = title;
|
||||
getRef('confirm_message').textContent = message;
|
||||
let cancelButton = getRef('confirmation_popup').children[2].children[0],
|
||||
submitButton = getRef('confirmation_popup').children[2].children[1]
|
||||
submitButton.textContent = confirmText
|
||||
cancelButton.textContent = cancelText
|
||||
submitButton.onclick = () => {
|
||||
hidePopup()
|
||||
resolve(true);
|
||||
}
|
||||
cancelButton.onclick = () => {
|
||||
hidePopup()
|
||||
resolve(false);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// displays a popup for asking user input. Use this instead of JS prompt
|
||||
async function getPromptInput(title, message = '', isPassword = true, cancelText = 'Cancel', confirmText = 'OK') {
|
||||
showPopup('prompt_popup', true)
|
||||
getRef('prompt_title').textContent = title;
|
||||
let input = getRef('prompt_input');
|
||||
input.setAttribute("placeholder", message)
|
||||
let buttons = getRef('prompt_popup').querySelectorAll("sm-button");
|
||||
if (isPassword)
|
||||
input.setAttribute("type", "text")
|
||||
else
|
||||
input.setAttribute("type", "password")
|
||||
input.focusIn()
|
||||
buttons[0].textContent = cancelText;
|
||||
buttons[1].textContent = confirmText;
|
||||
return new Promise((resolve, reject) => {
|
||||
buttons[0].onclick = () => {
|
||||
hidePopup()
|
||||
return;
|
||||
}
|
||||
buttons[1].onclick = () => {
|
||||
let value = input.value;
|
||||
hidePopup()
|
||||
resolve(value)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//Function for displaying toast notifications. pass in error for mode param if you want to show an error.
|
||||
function notify(message, mode, options = {}) {
|
||||
const { pinned = false, sound = false } = options
|
||||
let icon
|
||||
switch (mode) {
|
||||
case 'success':
|
||||
icon = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>`
|
||||
break;
|
||||
case 'error':
|
||||
icon = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>`
|
||||
break;
|
||||
}
|
||||
getRef("notification_drawer").push(message, { pinned, icon });
|
||||
if (navigator.onLine && sound) {
|
||||
getRef("notification_sound").currentTime = 0;
|
||||
getRef("notification_sound").play();
|
||||
}
|
||||
}
|
||||
|
||||
function getFormatedTime(time, relative) {
|
||||
try {
|
||||
if (String(time).indexOf("_")) time = String(time).split("_")[0];
|
||||
const intTime = parseInt(time);
|
||||
if (String(intTime).length < 13) time *= 1000;
|
||||
let timeFrag = new Date(intTime).toString().split(" "),
|
||||
day = timeFrag[0],
|
||||
month = timeFrag[1],
|
||||
date = timeFrag[2],
|
||||
year = timeFrag[3],
|
||||
minutes = new Date(intTime).getMinutes(),
|
||||
hours = new Date(intTime).getHours(),
|
||||
currentTime = new Date().toString().split(" ");
|
||||
|
||||
minutes = minutes < 10 ? `0${minutes}` : minutes;
|
||||
let finalHours = ``;
|
||||
if (hours > 12) finalHours = `${hours - 12}:${minutes}`;
|
||||
else if (hours === 0) finalHours = `12:${minutes}`;
|
||||
else finalHours = `${hours}:${minutes}`;
|
||||
|
||||
finalHours = hours >= 12 ? `${finalHours} PM` : `${finalHours} AM`;
|
||||
if (relative) {
|
||||
return `${date} ${month} ${year}`;
|
||||
} else return `${finalHours} ${month} ${date} ${year}`;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
return time;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('hashchange', e => showPage(window.location.hash))
|
||||
window.addEventListener("load", () => {
|
||||
document.body.classList.remove('hide-completely')
|
||||
showPage(window.location.hash)
|
||||
// document.querySelectorAll('sm-input[data-flo-id]').forEach(input => input.customValidation = validateAddr)
|
||||
document.addEventListener('keyup', (e) => {
|
||||
if (e.code === 'Escape') {
|
||||
hidePopup()
|
||||
}
|
||||
})
|
||||
document.addEventListener("pointerdown", (e) => {
|
||||
if (e.target.closest("button, sm-button:not([disabled]), .interact")) {
|
||||
createRipple(e, e.target.closest("button, sm-button, .interact"));
|
||||
}
|
||||
});
|
||||
document.addEventListener('copy', () => {
|
||||
notify('copied', 'success')
|
||||
})
|
||||
});
|
||||
|
||||
function createRipple(event, target) {
|
||||
const circle = document.createElement("span");
|
||||
const diameter = Math.max(target.clientWidth, target.clientHeight);
|
||||
const radius = diameter / 2;
|
||||
const targetDimensions = target.getBoundingClientRect();
|
||||
circle.style.width = circle.style.height = `${diameter}px`;
|
||||
circle.style.left = `${event.clientX - (targetDimensions.left + radius)}px`;
|
||||
circle.style.top = `${event.clientY - (targetDimensions.top + radius)}px`;
|
||||
circle.classList.add("ripple");
|
||||
const rippleAnimation = circle.animate(
|
||||
[
|
||||
{
|
||||
transform: "scale(3)",
|
||||
opacity: 0,
|
||||
},
|
||||
],
|
||||
{
|
||||
duration: 1000,
|
||||
fill: "forwards",
|
||||
easing: "ease-out",
|
||||
}
|
||||
);
|
||||
target.append(circle);
|
||||
rippleAnimation.onfinish = () => {
|
||||
circle.remove();
|
||||
};
|
||||
}
|
||||
|
||||
function showPage(targetPage, options = {}) {
|
||||
const { firstLoad, hashChange } = options
|
||||
let pageId
|
||||
if (targetPage === '') {
|
||||
pageId = 'overview_page'
|
||||
}
|
||||
else {
|
||||
pageId = targetPage.includes('#') ? targetPage.split('#')[1] : targetPage
|
||||
}
|
||||
if(!appPages.includes(pageId)) return
|
||||
document.querySelector('.page:not(.hide-completely)').classList.add('hide-completely')
|
||||
document.querySelector('.nav-list__item--active').classList.remove('nav-list__item--active')
|
||||
getRef(pageId).classList.remove('hide-completely')
|
||||
getRef(pageId).animate([
|
||||
{
|
||||
opacity: 0,
|
||||
transform: 'translateX(-1rem)'
|
||||
},
|
||||
{
|
||||
opacity: 1,
|
||||
transform: 'none'
|
||||
},
|
||||
],
|
||||
{
|
||||
duration: 300,
|
||||
easing: 'ease'
|
||||
})
|
||||
const targetListItem = document.querySelector(`.nav-list__item[href="#${pageId}"]`)
|
||||
targetListItem.classList.add('nav-list__item--active')
|
||||
if (firstLoad && window.innerWidth > 640 && targetListItem.getBoundingClientRect().top > getRef('side_nav').getBoundingClientRect().height) {
|
||||
getRef('side_nav').scrollTo({
|
||||
top: (targetListItem.getBoundingClientRect().top - getRef('side_nav').getBoundingClientRect().top + getRef('side_nav').scrollTop),
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
if (hashChange && window.innerWidth < 640) {
|
||||
getRef('side_nav').close()
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user