Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move Javascript in status.html to separate file #131

Closed
wants to merge 10 commits into from
Prev Previous commit
Next Next commit
feat: use data from backend in status.js
  • Loading branch information
manu-chroma committed Nov 4, 2018

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit 05e6d324967c764b61b935722459d16149092305
37 changes: 21 additions & 16 deletions frontend.py
Original file line number Diff line number Diff line change
@@ -34,29 +34,34 @@
def my_form():
username = request.args.get('username', '')
if username:
return render_template('status.html',
username=username,
sites=sites,
signup=signup,
logos=logos,
host_backend=HOST_BACKEND,
port_backend=PORT_BACKEND,
protocol_backend=PROTOCOL_BACKEND)
data = {
'username': username,
'sites': sites,
'signup': signup,
'logos': logos,
'host_backend': HOST_BACKEND,
'port_backend': PORT_BACKEND,
'protocol_backend': PROTOCOL_BACKEND
}
return render_template('status.html', data=data)

return render_template('form.html')


@app.route('/', methods=['POST'])
@cross_origin(origin='*')
def my_form_post():
username = request.form['text']
return render_template('status.html',
username=username,
sites=sites,
signup=signup,
logos=logos,
host_backend=HOST_BACKEND,
port_backend=PORT_BACKEND,
protocol_backend=PROTOCOL_BACKEND)
data = {
'username': username,
'sites': sites,
'signup': signup,
'logos': logos,
'host_backend': HOST_BACKEND,
'port_backend': PORT_BACKEND,
'protocol_backend': PROTOCOL_BACKEND
}
return render_template('status.html', data=data)


if __name__ == '__main__':
22 changes: 15 additions & 7 deletions static/js/status.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
async function request_api(site, signup) {
async function request_api(site, username, signup, backend_config) {
return await
$.ajax({
dataType: 'json',
url : `{{protocol_backend}}://{{host_backend}}:{{port_backend}}/check/${site}/{{username}}`,
url : `${backend_config.protocol_backend}://${backend_config.host_backend}:${backend_config.port_backend}/check/${site}/${username}`,
})
.then((result) => {
var res = result;
@@ -29,10 +29,18 @@ async function request_api(site, signup) {

function main () {
// list of supported websites
var sites = "{{sites}}".split(" ");
var signup= "{{signup}}".split(" ");
var logos = JSON.parse({{ logos|tojson|safe }});
var sites = data.sites.split(" ");
var signup= data.signup.split(" ");
var logos = JSON.parse(data.logos);
let username = data.username;

/* backend config */
const backend_config = {
protocol_backend: data.protocol_backend,
host_backend: data.host_backend,
port_backend: data.port_backend
}

// create cards dynamically for each of the websites
sites.forEach(website => {
var logoElement = constructLogoElement(website, logos);
@@ -45,7 +53,7 @@ function main () {
<span class="tooltiptext">${website}</span>
</div>
<span id='${website}'>
<i class="fas fa-circle-o-notch fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
</span>
</p>
</div>`)
@@ -54,7 +62,7 @@ function main () {
// iterate over all the websites and call
// call request_api each of the wesbite
sites.forEach(website => {
request_api(website, signup);
request_api(website, username, signup, backend_config);
});
}

4 changes: 2 additions & 2 deletions templates/status.html
Original file line number Diff line number Diff line change
@@ -20,8 +20,8 @@

<!-- status logic -->
<script>
// inject config data from backend in the global var
var data = {{data | json}};
// inject config data from backend in the global var
var data = {{data | tojson}};
</script>
<!-- data is used by status.js, so it must be defined before status.js import -->
<script src="js/status.js"></script>