The avatar for @lars-and
Lars Andersson
Public
Edited
Sep 19, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
(async () => {
let createImageElement = async name => {
let imgUrlOrEmoji = {
"System": "🖥️",
"Lars A": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Bear_unsplash.jpg/640px-Bear_unsplash.jpg"
}[name];
if (!imgUrlOrEmoji) {
imgUrlOrEmoji = "👤"
}
let el = document.createElement("section");
el.style.width = "2.5rem";
el.style.height = "2.5rem";
el.style["border-radius"] = "100%";
el.style.border = "solid 1px black";
el.style.display = "flex";
el.style["justify-content"] = "center";
el.style["align-items"] = "center";
el.style["background-color"] = "#d0d0d0";
el.style.overflow = "hidden";
el.title = name;
if (imgUrlOrEmoji.charAt(0) !== "h") {
/* Calculate unique color for person */
const msgUint8 = new TextEncoder().encode(name);
const hashBuffer = await crypto.subtle.digest("SHA-256", msgUint8);
const hashArray = Array.from(new Uint8Array(hashBuffer));
const hashHex = hashArray
.map(x => x.toString(16).padStart(2, "0"))
.join("");
el.style["background-color"] = "#" + hashHex.slice(0,6);
let emojiEl = document.createElement("span");
emojiEl.style["font-size"] = "1.2rem";
emojiEl.style["user-select"] = "none";
emojiEl.innerText = imgUrlOrEmoji;
el.appendChild(emojiEl);
} else {
let imgEl = document.createElement("img");
imgEl.style.width = "100%";
imgEl.src = imgUrlOrEmoji;
el.appendChild(imgEl);
}
return el;
};

let dateElementStyle = {
"background-color": "#404040",
"color": "#d0d0d0",
"text-align": "center",
"font-size": "1.4rem",
"border-radius": "0.2rem",
"margin-top": "0.3rem",
"margin-bottom": "0.5rem"
};

const WEEKDAYS = [ "SÖNDAG", "MÅNDAG", "TISDAG", "ONSDAG", "TORSDAG", "FREDAG", "LÖRDAG" ];
let iterDate = new Date();
let prettyDateMap = {};
prettyDateMap[iterDate.toISOString().split("T")[0]] = "I DAG";
iterDate.setDate(iterDate.getDate() - 1);
prettyDateMap[iterDate.toISOString().split("T")[0]] = "I GÅR";
iterDate.setDate(iterDate.getDate() - 1);
prettyDateMap[iterDate.toISOString().split("T")[0]] = WEEKDAYS[iterDate.getDay()];
iterDate.setDate(iterDate.getDate() - 1);
prettyDateMap[iterDate.toISOString().split("T")[0]] = WEEKDAYS[iterDate.getDay()];
iterDate.setDate(iterDate.getDate() - 1);
prettyDateMap[iterDate.toISOString().split("T")[0]] = WEEKDAYS[iterDate.getDay()];
iterDate.setDate(iterDate.getDate() - 1);
prettyDateMap[iterDate.toISOString().split("T")[0]] = WEEKDAYS[iterDate.getDay()];
iterDate.setDate(iterDate.getDate() - 1);
prettyDateMap[iterDate.toISOString().split("T")[0]] = WEEKDAYS[iterDate.getDay()];

iterDate.setDate(iterDate.getDate() - 1);
prettyDateMap[iterDate.toISOString().split("T")[0]] = WEEKDAYS[iterDate.getDay()] + " FÖRRA VECKAN";
iterDate.setDate(iterDate.getDate() - 1);
prettyDateMap[iterDate.toISOString().split("T")[0]] = WEEKDAYS[iterDate.getDay()] + " FÖRRA VECKAN";
iterDate.setDate(iterDate.getDate() - 1);
prettyDateMap[iterDate.toISOString().split("T")[0]] = WEEKDAYS[iterDate.getDay()] + " FÖRRA VECKAN";
iterDate.setDate(iterDate.getDate() - 1);
prettyDateMap[iterDate.toISOString().split("T")[0]] = WEEKDAYS[iterDate.getDay()] + " FÖRRA VECKAN";
iterDate.setDate(iterDate.getDate() - 1);
prettyDateMap[iterDate.toISOString().split("T")[0]] = WEEKDAYS[iterDate.getDay()] + " FÖRRA VECKAN";
iterDate.setDate(iterDate.getDate() - 1);
prettyDateMap[iterDate.toISOString().split("T")[0]] = WEEKDAYS[iterDate.getDay()] + " FÖRRA VECKAN";
iterDate.setDate(iterDate.getDate() - 1);
prettyDateMap[iterDate.toISOString().split("T")[0]] = WEEKDAYS[iterDate.getDay()] + " FÖRRA VECKAN";
let dates = chillinVars.orderItemData.LogItemsList.map(x => x.CreateDate);
let earliestDate = dates.reduce((acc, d) => acc < d ? acc : d, new Date(2100));
let latestDate = dates.reduce((acc, d) => acc > d ? acc : d, new Date(1970));
let el = document.querySelector(".helpful-dynamic-information__container");
el.style.padding = "1rem";
el.style["background-color"] = "#fefefe";
el.style.padding = "2rem";
el.style["box-sizing"] = "border-box";
el.innerHTML = "";

let title = document.createElement("h3");
title.style["text-align"] = "center";
title.style.color = "#808080";
title.style["max-width"] = "unset";
title.innerText = "DEN LILLE LOGGEN";
el.appendChild(title);

let logItems = chillinVars.orderItemData.LogItemsList;
let mergedLogItems = logItems.reduce((acc, logItem) => {
if (!acc.has(logItem.EventId)) {
let eventId = parseInt(logItem.EventId.slice(-2));
let eventText = chillinVars.eventIdToEventName[eventId];
acc.set(logItem.EventId, {
text: eventText,
user: logItem.MemberName,
dateStr: logItem.CreateDate.split("T")[0],
timeStr: logItem.CreateDate.split("T")[1].slice(0,5),
messages: []
});

if (logItem.Type === "LOG") {
acc.get(logItem.EventId).messages.push(logItem.Message);
}
}
return acc;
}, new Map());

let currentDateStr = new Date().toISOString().split("T")[0];

let dateEl = document.createElement("section");
Object.assign(dateEl.style, dateElementStyle);
dateEl.innerText = prettyDateMap[currentDateStr];
el.appendChild(dateEl);
for (const [eventId, logItem] of mergedLogItems) {
let dateStr = prettyDateMap[logItem.dateStr] ?
prettyDateMap[logItem.dateStr] : logItem.dateStr;

if (logItem.dateStr !== currentDateStr) {
let dateEl = document.createElement("section");
Object.assign(dateEl.style, dateElementStyle);
dateEl.innerText = dateStr;
el.appendChild(dateEl);
currentDateStr = logItem.dateStr;
}
let logItemEl = document.createElement("section");
logItemEl.style.display = "inline-block";
logItemEl.style.border = "solid 1px black";
logItemEl.style.display = "flex";
logItemEl.style.padding = "0.5rem";
logItemEl.style["border-radius"] = "0.2rem";
logItemEl.style["margin-bottom"] = "0.2rem";
logItemEl.style["background-color"] = "#fefefe";
logItemEl.style.position = "relative";
logItemEl.style["font-size"] = "2rem";
logItemEl.title = logItem.timeStr;

let userContainer = document.createElement("section");
userContainer.style["margin-right"] = "1rem";
userContainer.style.display = "flex";
userContainer.style["justify-content"] = "center";
userContainer.style["align-items"] = "center";
logItemEl.appendChild(userContainer);
userContainer.appendChild(await createImageElement(logItem.user));

let msgAndTextContainer = document.createElement("section");
msgAndTextContainer.style.display = "flex";
msgAndTextContainer.style["flex-direction"] = "column";
msgAndTextContainer.style["justify-content"] = "center";
msgAndTextContainer.style["align-items"] = "left";
logItemEl.appendChild(msgAndTextContainer);
let textContainer = document.createElement("section");
textContainer.style["text-align"] = "left";
textContainer.style["margin-left"] = "0.5rem";
textContainer.innerText = logItem.text;
msgAndTextContainer.appendChild(textContainer);

let msgContainer = document.createElement("section");
msgContainer.style.display = "flex";
msgContainer.style["flex-direction"] = "column";
for (const msg of logItem.messages) {
let msgEl = document.createElement("section");
msgEl.style.padding = "0.8rem";
msgEl.style["background-color"] = "#deb40b";
msgEl.style["border-radius"] = "1rem";
msgEl.style.position = "relative";
msgEl.style.color = "white";

let msgParts = msg.split(/(https?[^ \n]+)/)
for (const msgPart of msgParts) {
if (msgPart.indexOf("http") === 0) {
let linkEl = document.createElement("a")
linkEl.href = msgPart
linkEl.innerText = msgPart
linkEl.target = "_blank"
msgEl.appendChild(linkEl)
} else {
msgEl.appendChild(document.createTextNode(msgPart))
}
}

let spike = document.createElement("span");
spike.style.position = "absolute";
spike.style.left = "0";
spike.style.top = "50%";
spike.style.width = "0";
spike.style.height = "0";
spike.style.border = "15px solid transparent";
spike.style["border-right-color"] = "#deb40b";
spike.style["border-left"] = "0";
spike.style["border-top"] = "0";
spike.style["margin-top"] = "-7.5px";
spike.style["margin-left"] = "-15px";
msgEl.appendChild(spike);
msgContainer.appendChild(msgEl);
}
msgAndTextContainer.appendChild(msgContainer);
el.appendChild(logItemEl);
}

dateEl = document.createElement("section");
Object.assign(dateEl.style, dateElementStyle);
dateEl.innerText = "TIDENS BÖRJAN";
el.appendChild(dateEl);
})();
Insert cell
viewof codeToPackage = Inputs.textarea()
Insert cell
Inputs.textarea({ value: `javascript:${codeToPackage.replace(/\n/g, "").replace(/\s+/g," ")}` })
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more