Skip to content

Commit 018bdb8

Browse files
DawntDevDawntDev
committed
Bugs Fixed
1 parent 4b46fc5 commit 018bdb8

4 files changed

Lines changed: 239 additions & 25 deletions

File tree

‎public/new-render.html‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" media="all">
1515
<link rel="stylesheet" href="{{ url_for('static', filename='css/navbar.css') }}" media="all">
1616
<link rel="stylesheet" href="{{ url_for('static', filename='css/form.css') }}">
17+
<link rel="stylesheet" href="{{ url_for('static', filename='css/loader.css') }}">
1718
</head>
1819

1920
<body>
@@ -54,11 +55,11 @@ <h3>api/v1/urlToImage</h3>
5455
</div>
5556
<div class="input">
5657
<label for="selector">Selector</label>
57-
<input type="text" name="selector" id="selector" placeholder="#example">
58+
<input type="text" name="selector" id="urlToImage-selector" placeholder="#example">
5859
</div>
5960
<div class="input">
6061
<label for="format">Format</label>
61-
<select name="format" id="format">
62+
<select name="format" id="urlToImage-format">
6263
<option value="png">png</option>
6364
<option value="jpg">jpg</option>
6465
<option value="bin">bin</option>
@@ -67,11 +68,11 @@ <h3>api/v1/urlToImage</h3>
6768
</div>
6869
<div class="input">
6970
<label for="size">Size</label>
70-
<input type="text" name="size" id="size" placeholder="100x100">
71+
<input type="text" name="size" id="urlToImage-size" placeholder="100x100">
7172
</div>
7273
<div class="input">
7374
<label for="timeout">Timeout</label>
74-
<input type="text" name="timeout" id="timeout" placeholder="2.5">
75+
<input type="text" name="timeout" id="urlToImage-timeout" placeholder="2.5">
7576
</div>
7677
<button class="button" type="submit">Render</button>
7778
</form>
@@ -93,11 +94,11 @@ <h3>api/v1/render</h3>
9394
</div>
9495
<div class="input">
9596
<label for="selector">Selector</label>
96-
<input type="text" name="selector" id="selector" placeholder="#example">
97+
<input type="text" name="selector" id="render-selector" placeholder="#example">
9798
</div>
9899
<div class="input">
99100
<label for="format">Format</label>
100-
<select name="format" id="format">
101+
<select name="format" id="render-format">
101102
<option value="png">png</option>
102103
<option value="jpg">jpg</option>
103104
<option value="bin">bin</option>
@@ -106,11 +107,11 @@ <h3>api/v1/render</h3>
106107
</div>
107108
<div class="input">
108109
<label for="size">Size</label>
109-
<input type="text" name="size" id="size" placeholder="100x100">
110+
<input type="text" name="size" id="render-size" placeholder="100x100">
110111
</div>
111112
<div class="input">
112113
<label for="timeout">Timeout</label>
113-
<input type="text" name="timeout" id="timeout" placeholder="2.5">
114+
<input type="text" name="timeout" id="render-timeout" placeholder="2.5">
114115
</div>
115116
<button class="button" type="submit">Render</button>
116117
</form>

‎public/static/css/index.css‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,74 @@ a.button-link {
3131
a.button-link:hover {
3232
background-color: #6366f1;
3333
color: #e5e7eb;
34+
}
35+
36+
div.alert {
37+
position: fixed;
38+
top: 0;
39+
left: 0;
40+
width: 100%;
41+
height: 100%;
42+
background-color: rgba(0, 0, 0, 0.5);
43+
z-index: 9999;
44+
display: flex;
45+
justify-content: center;
46+
align-items: center;
47+
flex-direction: column;
48+
padding: 2rem;
49+
}
50+
51+
div.alert > div.message {
52+
display: flex;
53+
justify-content: center;
54+
align-items: center;
55+
flex-direction: column;
56+
padding: 1rem 2rem;
57+
border-radius: 8px;
58+
background: #fff;
59+
width: calc(50% + 5vw);
60+
61+
}
62+
63+
div.message > span.title {
64+
font-size: 1.5rem;
65+
color: #2f353d;
66+
font-weight: bold;
67+
text-align: center;
68+
margin-bottom: 1rem;
69+
}
70+
71+
div.message > span > div {
72+
width: 100%;
73+
height: .15rem;
74+
background: #6366f1;
75+
}
76+
77+
div.message > span.subtext {
78+
margin: .5rem 0;
79+
font-size: 1rem;
80+
color: #2f353d;
81+
text-align: center;
82+
}
83+
84+
div.message > button {
85+
width: 5rem;
86+
height: 2rem;
87+
margin: 1rem 0;
88+
border-radius: 8px;
89+
background-color: #e5e7eb;
90+
color: #2f353d;
91+
font-size: 1rem;
92+
line-height: 1.25rem;
93+
text-align: center;
94+
justify-content: center;
95+
transition: all .3s ease-in-out;
96+
border: none;
97+
outline: none;
98+
cursor: pointer;
99+
}
100+
101+
div.message > button:hover {
102+
background-color: #6366f1;
103+
color: #fff;
34104
}

‎public/static/css/loader.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
div.loader {
2+
position: fixed;
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
top: 0;
7+
left: 0;
8+
width: 100%;
9+
height: 100%;
10+
background-color: rgba(0, 0, 0, 0.5);
11+
z-index: 9999;
12+
}
13+
14+
div.loader > div.text {
15+
position: absolute;
16+
top: 60%;
17+
left: 50%;
18+
transform: translate(-50%, -50%);
19+
font-size: 1.5rem;
20+
color: #fff;
21+
font-weight: bold;
22+
text-align: center;
23+
}
24+
25+
.spinner {
26+
width: 44px;
27+
height: 44px;
28+
animation: spinner-y0fdc1 2s infinite ease;
29+
transform-style: preserve-3d;
30+
}
31+
32+
.spinner > div {
33+
background-color: rgba(0, 77, 255, 0.2);
34+
height: 100%;
35+
position: absolute;
36+
width: 100%;
37+
border: 2px solid #004dff;
38+
}
39+
40+
.spinner div:nth-of-type(1) {
41+
transform: translateZ(-22px) rotateY(180deg);
42+
}
43+
44+
.spinner div:nth-of-type(2) {
45+
transform: rotateY(-270deg) translateX(50%);
46+
transform-origin: top right;
47+
}
48+
49+
.spinner div:nth-of-type(3) {
50+
transform: rotateY(270deg) translateX(-50%);
51+
transform-origin: center left;
52+
}
53+
54+
.spinner div:nth-of-type(4) {
55+
transform: rotateX(90deg) translateY(-50%);
56+
transform-origin: top center;
57+
}
58+
59+
.spinner div:nth-of-type(5) {
60+
transform: rotateX(-90deg) translateY(50%);
61+
transform-origin: bottom center;
62+
}
63+
64+
.spinner div:nth-of-type(6) {
65+
transform: translateZ(22px);
66+
}
67+
68+
@keyframes spinner-y0fdc1 {
69+
0% {
70+
transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
71+
}
72+
73+
50% {
74+
transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
75+
}
76+
77+
100% {
78+
transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
79+
}
80+
}

‎public/static/js/new-render.js‎

Lines changed: 80 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ options.forEach(opt => {
1919
});
2020

2121
// Handle form submit
22-
const clearForm = data => Object.entries(data).forEach(([key, value]) => Boolean(value) === false && delete data[key]);
22+
const clearForm = data => Object.entries(data).forEach(([key, value]) => (Boolean(value) === false || value < 1) && delete data[key]);
23+
const extractGroup = (text, regex) => [...text.matchAll(regex)].map(match => match[1]).join("\n");
2324
function read(...files) {
2425
let reads = [];
2526
files.forEach(file => {
@@ -33,21 +34,62 @@ function read(...files) {
3334
return Promise.all(reads);
3435
};
3536

37+
const loader = {
38+
show: () => {
39+
let container = document.createElement("div");
40+
container.classList.add("loader");
41+
container.innerHTML = `
42+
<div class="spinner">
43+
<div></div>
44+
<div></div>
45+
<div></div>
46+
<div></div>
47+
<div></div>
48+
<div></div>
49+
</div>
50+
<div class="text">
51+
<span>Rendering...</span>
52+
</div>
53+
`;
54+
55+
document.body.appendChild(container);
56+
},
57+
hide: () => {
58+
let container = document.querySelector(".loader");
59+
container.remove();
60+
},
61+
alert: (message, subtext = False) => {
62+
let container = document.createElement("div");
63+
container.classList.add("alert");
64+
container.innerHTML = `
65+
<div class="message">
66+
<span class="title">
67+
${message}
68+
<div></div>
69+
</span>
70+
${subtext ? `<span class="subtext">${subtext}</span>` : ""}
71+
<button id="close">close</button>
72+
</div>
73+
`;
74+
container.querySelector("#close").addEventListener("click", () => container.remove());
75+
document.body.appendChild(container);
76+
}
77+
};
78+
3679
document.getElementById("render").addEventListener("submit", (e) => {
3780
e.preventDefault();
3881
let data = {
3982
html: document.getElementById("html").files[0],
4083
css: document.getElementById("css").files[0],
4184
js: document.getElementById("js").files[0],
42-
selector: document.getElementById("selector").value,
43-
format: document.getElementById("format").value,
44-
size: document.getElementById("size").value !== "" ? document.getElementById("size").value.split("x") : null,
45-
timeout: parseFloat(document.getElementById("timeout").value).toFixed(1)
85+
selector: document.getElementById("render-selector").value,
86+
format: document.getElementById("render-format").value,
87+
size: document.getElementById("render-size").value !== "" ? document.getElementById("size").value.split("x") : null,
88+
timeout: Number(document.getElementById("render-timeout").value) + (.1 * [10 ** -5])
4689
}
47-
4890
clearForm(data);
49-
50-
const {html, css, js, ...args} = data;
91+
92+
const { html, css, js, ...args } = data;
5193
read(html, css, js).then(([html, css, js]) => {
5294
let body = {
5395
elements: html,
@@ -56,6 +98,8 @@ document.getElementById("render").addEventListener("submit", (e) => {
5698
...args
5799
}
58100
clearForm(body);
101+
102+
loader.show();
59103
fetch("api/v1/render", {
60104
method: "POST",
61105
headers: {
@@ -64,10 +108,19 @@ document.getElementById("render").addEventListener("submit", (e) => {
64108
body: JSON.stringify(body)
65109
}).then(res => {
66110
if (res.status === 200) {
111+
loader.hide();
67112
window.location.href = res.url;
113+
} else {
114+
loader.hide();
115+
res.text().then(text => {
116+
let regex = /li>([\s\S]*?)<\/li/g;
117+
text = text.replace(/\n*/gm, "");
118+
loader.alert(`Error: ${res.status}`, extractGroup(text, regex));
119+
});
68120
};
69121
}).catch(err => {
70-
console.log(err);
122+
loader.hide();
123+
loader.alert(err.message);
71124
});
72125
})
73126
});
@@ -76,25 +129,35 @@ document.getElementById("urlToImage").addEventListener("submit", (e) => {
76129
e.preventDefault();
77130
let data = {
78131
url: document.getElementById("url").value,
79-
selector: document.getElementById("selector").value,
80-
format: document.getElementById("format").value,
81-
size: document.getElementById("size").value !== "" ? document.getElementById("size").value.split("x") : null,
82-
timeout: parseFloat(document.getElementById("timeout").value).toFixed(1),
132+
selector: document.getElementById("urlToImage-selector").value,
133+
format: document.getElementById("urlToImage-format").value,
134+
size: document.getElementById("urlToImage-size").value !== "" ? document.getElementById("size").value.split("x") : null,
135+
timeout: Number(document.getElementById("urlToImage-timeout").value) + (.1 * [10 ** -5]),
83136
}
84-
85137
clearForm(data);
138+
139+
loader.show();
86140
fetch("/api/v1/urlToImage", {
87141
method: "POST",
88142
headers: {
89143
"Content-Type": "application/json"
90144
},
91145
body: JSON.stringify(data)
92-
}
146+
}
93147
).then(res => {
94148
if (res.status === 200) {
149+
loader.hide();
95150
window.location.href = res.url;
96-
}
151+
} else {
152+
loader.hide();
153+
res.text().then(text => {
154+
let regex = /li>([\s\S]*?)<\/li/g;
155+
text = text.replace(/\n*/gm, "");
156+
loader.alert(`Error: ${res.status}`, extractGroup(text, regex));
157+
});
158+
};
97159
}).catch(err => {
98-
console.log(err);
160+
loader.hide();
161+
loader.alert(err.message);
99162
});
100163
});

0 commit comments

Comments
 (0)