Skip to content

Commit 8fd6fa9

Browse files
rgantzosrgantzos
authored
Merge pull request #857 from rgantzos/sprite-layers
Better Cloud History
2 parents e1e0304 + 04aa37e commit 8fd6fa9

4 files changed

Lines changed: 233 additions & 0 deletions

File tree

‎features/better-cloud-history/data.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"title": "Better Cloud History",
3+
"description": "Updates the cloud monitor page to a more modern version with more details. You can click on variable names to sort by that variable.",
4+
"credits": [
5+
{
6+
"username": "-Brass_Glass-",
7+
"url": "https://scratch.mit.edu/users/-Brass_Glass-/"
8+
},
9+
{
10+
"username": "rgantzos",
11+
"url": "https://scratch.mit.edu/users/rgantzos/"
12+
}
13+
],
14+
"type": [
15+
"Website"
16+
],
17+
"tags": [
18+
"New"
19+
],
20+
"dynamic": true,
21+
"scripts": [
22+
{
23+
"file": "script.js",
24+
"runOn": "/cloudmonitor/*"
25+
}
26+
],
27+
"styles": [
28+
{
29+
"file": "style.css",
30+
"runOn": "/cloudmonitor/*"
31+
}
32+
]
33+
}

‎features/better-cloud-history/script.js‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
export default async function ({ feature, console }) {
2+
let avatars = {}
3+
4+
let projectId = window.location.pathname.split("/")[2]
5+
6+
let data = await (await fetch(`https://clouddata.scratch.mit.edu/logs?projectid=${projectId}&limit=40&offset=0`)).json()
7+
data.push(...(await (await fetch(`https://clouddata.scratch.mit.edu/logs?projectid=${projectId}&limit=40&offset=40`)).json()).filter((el) => !data.find((old) => old.timestamp === el.timestamp)))
8+
data.push(...(await (await fetch(`https://clouddata.scratch.mit.edu/logs?projectid=${projectId}&limit=40&offset=80`)).json()).filter((el) => !data.find((old) => old.timestamp === el.timestamp)))
9+
10+
let currentOffset = 0
11+
12+
let div = await ScratchTools.waitForElement("div.box-content.v-tabs-content")
13+
14+
let table = makeTable()
15+
feature.self.hideOnDisable(table)
16+
div.appendChild(table)
17+
18+
await addData(data)
19+
20+
async function addData(data) {
21+
for (var i in data) {
22+
let tr = document.createElement("tr")
23+
24+
let user = document.createElement("td")
25+
let a = document.createElement("a")
26+
a.href = `/users/${data[i].user}`
27+
28+
let img = document.createElement("img")
29+
if (avatars[data[i].user]) {
30+
img.src = avatars[data[i].user]
31+
} else {
32+
let { images } = (await (await fetch(`https://api.scratch.mit.edu/users/${data[i].user}/`)).json()).profile
33+
img.src = images["90x90"]
34+
avatars[data[i].user] = images["90x90"]
35+
}
36+
a.appendChild(img)
37+
38+
let span = document.createElement("span")
39+
span.textContent = data[i].user
40+
a.appendChild(span)
41+
42+
user.appendChild(a)
43+
tr.appendChild(user)
44+
45+
let action = document.createElement("td")
46+
action.textContent = data[i].verb.split("_")[0].toUpperCase()
47+
tr.appendChild(action)
48+
49+
let variable = document.createElement("td")
50+
let varName = document.createElement("span")
51+
varName.textContent = data[i].name
52+
varName.className = "ste-cloud-variable"
53+
variable.appendChild(varName)
54+
tr.appendChild(variable)
55+
56+
varName.addEventListener("click", function () {
57+
let varId = this.textContent
58+
59+
if (!table.className.includes("sort")) {
60+
table.querySelectorAll("tr").forEach(function (tr) {
61+
if (!tr.querySelector("th")) {
62+
if (tr.querySelector("td:nth-child(3)")?.textContent !== varId) {
63+
tr.style.display = "none"
64+
tr.classList.add("ste-cloud-dontshow")
65+
}
66+
}
67+
})
68+
table.classList.add("sort")
69+
} else {
70+
table.querySelectorAll("tr").forEach(function (tr) {
71+
tr.style.display = null
72+
tr.classList.remove("ste-cloud-dontshow")
73+
})
74+
table.classList.remove("sort")
75+
}
76+
})
77+
78+
let content = document.createElement("td")
79+
content.textContent = data[i].value
80+
content.className = "ste-cloud-content"
81+
tr.appendChild(content)
82+
83+
let time = document.createElement("td")
84+
time.textContent = new Date(data[i].timestamp).toLocaleString()
85+
time.title = data[i].timestamp.toString()
86+
tr.appendChild(time)
87+
88+
document.querySelector(".ste-cloud-table").appendChild(tr)
89+
}
90+
}
91+
92+
function makeTable() {
93+
let table = document.createElement("table")
94+
table.className = "ste-cloud-table"
95+
96+
let tr = document.createElement("tr")
97+
table.appendChild(tr)
98+
99+
let user = document.createElement("th")
100+
user.textContent = "User"
101+
tr.appendChild(user)
102+
103+
let action = document.createElement("th")
104+
action.textContent = "Action"
105+
tr.appendChild(action)
106+
107+
let variable = document.createElement("th")
108+
variable.textContent = "Variable"
109+
tr.appendChild(variable)
110+
111+
let content = document.createElement("th")
112+
content.textContent = "Content"
113+
tr.appendChild(content)
114+
115+
let time = document.createElement("th")
116+
time.textContent = "Time"
117+
tr.appendChild(time)
118+
119+
return table
120+
}
121+
}

‎features/better-cloud-history/style.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
div#table-container {
2+
display: none;
3+
}
4+
5+
.ste-cloud-table {
6+
width: 100%;
7+
margin-top: 1rem;
8+
}
9+
10+
.ste-cloud-table img {
11+
height: 2rem;
12+
width: 2rem;
13+
border-radius: .25rem;
14+
}
15+
16+
.ste-cloud-table td {
17+
padding: 1rem;
18+
}
19+
20+
.ste-cloud-table a span {
21+
position: relative;
22+
top: -.5rem;
23+
margin-left: .5rem;
24+
font-weight: 500;
25+
}
26+
27+
.ste-cloud-table a:hover {
28+
text-decoration: none;
29+
}
30+
31+
.ste-cloud-table tr td {
32+
text-align: center;
33+
}
34+
35+
.ste-cloud-variable {
36+
padding: .5rem;
37+
padding-top: .25rem;
38+
padding-bottom: .25rem;
39+
border-radius: 1.2rem;
40+
background-color: rgb(255, 140, 26);
41+
color: white;
42+
text-shadow: none;
43+
opacity: .7;
44+
transition: opacity .3s, transform .3s;
45+
transform: none;
46+
cursor: pointer;
47+
display: inline-block;
48+
}
49+
50+
.ste-cloud-variable:hover {
51+
opacity: 1;
52+
transform: scale(1.1);
53+
}
54+
55+
.ste-cloud-table.sort .ste-cloud-variable {
56+
opacity: 1;
57+
transform: scale(1.1);
58+
}
59+
60+
.ste-cloud-table tr td.ste-cloud-content {
61+
width: 40%;
62+
word-break: break-all;
63+
text-align: left;
64+
height: 2rem;
65+
overflow-y: auto;
66+
}
67+
68+
th {
69+
padding: .5rem;
70+
}
71+
72+
tr:not(.ste-cloud-dontshow):nth-child(odd) {
73+
background-color: rgba(77,151,255,.1);
74+
}

‎features/features.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
[
2+
{
3+
"version": 2,
4+
"id": "better-cloud-history",
5+
"versionAdded": "v3.9.0"
6+
},
27
{
38
"version": 2,
49
"id": "sprite-layers",

0 commit comments

Comments
 (0)