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.

Sign up for GitHub

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
Closed

Move Javascript in status.html to separate file #131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
af692e4
Move Javascript in status.html to separate file
jakethakur Oct 31, 2018
715ec8d
Removed trailing whitespace
jakethakur Oct 31, 2018
27b8d86
Moved Google Analytics script back to status.html
jakethakur Nov 1, 2018
529037d
Fixed indentation
jakethakur Nov 1, 2018
c158c81
chore: merge master and resolve conflicts
manu-chroma Nov 4, 2018
5056bf3
gitignore: exclude vscode/
manu-chroma Nov 4, 2018
05e6d32
feat: use data from backend in status.js
manu-chroma Nov 4, 2018
6ad0cf1
frontend.py: remove signup link support
manu-chroma Nov 4, 2018
f349bad
status.js: remove signup support and misc improvements
manu-chroma Nov 4, 2018
6e93be4
fix: use css rather than js based fontawesome render
manu-chroma Nov 4, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
.vscode/

flask/templates/front.html
*.sketch

Expand Down
36 changes: 19 additions & 17 deletions frontend.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,37 +26,39 @@

sites = ' '.join(list(patterns['username_patterns'].keys()))
logos = json.dumps(patterns['logos'])
signup = ' '.join(list(patterns['signup'].keys()))


@app.route('/', methods=['GET'])
@cross_origin()
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,
'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,
'logos': logos,
'host_backend': HOST_BACKEND,
'port_backend': PORT_BACKEND,
'protocol_backend': PROTOCOL_BACKEND
}
return render_template('status.html', data=data)


if __name__ == '__main__':
Expand Down
109 changes: 109 additions & 0 deletions static/js/status.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
async function request_api(site, username, backend_config) {
return await
$.ajax({
dataType: 'json',
url : `${backend_config.protocol_backend}://${backend_config.host_backend}:${backend_config.port_backend}/check/${site}/${username}`,
})
.then((result) => {
const res = result;
if (!res['usable'])
$("#" + site)[0].innerHTML = 'Website Down';
else if (!res['possible'])
$("#" + site)[0].innerHTML = 'Impossible';
else if (res['status'] == '404' || res['status'] == '301')
$("#" + site)[0].innerHTML = `Available`;
// handling facebook edge case, when the
// username exists but the url is not accessible
else if (site == 'facebook' && res['profile'] == 'hidden')
$("#" + site)[0].innerHTML = `Taken`;
else if (res['avatar'])
$("#" + site)[0].innerHTML =
`<a href="${res['url']}" target="_blank"> <img class="avatar" src="${res['avatar']}">`;
else
$("#" + site)[0].innerHTML = `<a href="${res['url']}" target="_blank">Taken</a>`;
})
.fail(() => {
$("#" + site)[0].innerHTML = 'Don\'t know';
});
}

function main () {
// list of supported websites
const sites = data.sites.split(" ");
const 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 => {
const logoElement = constructLogoElement(website, logos);
$(".helper").append(`
<div class="card">
<p>
<div class="tooltip">
<${logoElement.htmlElement} ${logoElement.htmlAttribute}="${logoElement.attributeValue}">
</${logoElement.htmlElement}>
<span class="tooltiptext">${website}</span>
</div>
<span id='${website}'>
<i class="fas fa-circle-notch fa-spin"></i>
</span>
</p>
</div>`)
});

// iterate over all the websites and call
// call request_api each of the wesbite
sites.forEach(website => {
request_api(website, username, backend_config);
});
}

function constructLogoElement (website, logos) {
// defaults to font awesome icons
let logoElement = {
attributeValue: `fab fa-${website}`,
htmlAttribute: 'class',
htmlElement: 'i',
};

if (logos[website]) {
// the key defined in the yml. e.g., url, fontawesome
let ymlKey = Object.keys(logos[website])[0];
// determines html attribute to be used to display icon. e.g., src, class
logoElement.htmlAttribute = determineLogoHtmlAttribute(ymlKey);
// determines html element to be used based off of the attribute. e.g., i, img
logoElement.htmlElement = determineLogoHtmlElement(logoElement.htmlAttribute);
// gets the attribute value from the yml file.
logoElement.attributeValue = logos[website][ymlKey];
}
return logoElement;
}

function determineLogoHtmlElement(htmlAttribute) {
let element;
if (htmlAttribute === 'src') {
element = 'img';
} else if (htmlAttribute === 'class') {
element = 'i';
}
return element;
}

function determineLogoHtmlAttribute(key) {
let attribute;
if (key === 'url') {
attribute = 'src';
} else if (key === 'fontawesome') {
attribute = 'class';
} else {
console.error("Incorrect logo key in yml.")
}
return attribute;
}
115 changes: 9 additions & 106 deletions templates/status.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,17 @@

<!-- from static folder -->
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script defer src="https://use.fontawesome.com/releases/v5.4.2/js/all.js" integrity="sha384-wp96dIgDl5BLlOXb4VMinXPNiB32VYBSoXOoiARzSTXY+tsK8yDTYfvdTyqzdGGN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="shortcut icon" type="image/png" href="favicon32.png" />

<!-- status logic -->
<script>
// 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>

<title>Results - Username Availability Checker</title>

<!-- Global site tag (gtag.js) - Google Analytics -->
Expand All @@ -26,114 +34,9 @@
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-72356300-6');
</script>

<script>
async function request_api(site, signup) {
return await
$.ajax({
dataType: 'json',
url : `{{protocol_backend}}://{{host_backend}}:{{port_backend}}/check/${site}/{{username}}`,
})
.then((result) => {
var res = result;
if (!res['usable'])
$("#" + site)[0].innerHTML = 'Website Down';
else if (!res['possible'])
$("#" + site)[0].innerHTML = 'Impossible';
else if (res['status'] == '404' || res['status'] == '301')
$("#" + site)[0].innerHTML = `<a href="${signup}">Available</a>`;
// handling facebook edge case, when the
// username exists but the url is not accessible
else if (site == 'facebook' && res['profile'] == 'hidden')
$("#" + site)[0].innerHTML = `Taken`;
else if (res['avatar'])
$("#" + site)[0].innerHTML =
`<a href="${res['url']}" target="_blank"> <img class="avatar" src="${res['avatar']}">`;
else
$("#" + site)[0].innerHTML = `<a href="${res['url']}" target="_blank">Taken</a>`;
})
.fail(() => {
$("#" + site)[0].innerHTML = 'Don\'t know';
});
}

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

// create cards dynamically for each of the websites
sites.forEach(website => {
var logoElement = constructLogoElement(website, logos);
$(".helper").append(`
<div class="card">
<p>
<div class="tooltip">
<${logoElement.htmlElement} ${logoElement.htmlAttribute}="${logoElement.attributeValue}">
</${logoElement.htmlElement}>
<span class="tooltiptext">${website}</span>
</div>
<span id='${website}'>
<i class="fas fa-circle-o-notch fa-spin"></i>
</span>
</p>
</div>`)
});

// iterate over all the websites and call
// call request_api each of the wesbite
sites.forEach(website => {
request_api(website, signup);
});
}

function constructLogoElement (website, logos) {
// defaults to font awesome icons
var logoElement = {
attributeValue: `fab fa-${website}`,
htmlAttribute: 'class',
htmlElement: 'i',
};

if (logos[website]) {
// the key defined in the yml. e.g., url, fontawesome
var ymlKey = Object.keys(logos[website])[0];
// determines html attribute to be used to display icon. e.g., src, class
logoElement.htmlAttribute = determineLogoHtmlAttribute(ymlKey);
// determines html element to be used based off of the attribute. e.g., i, img
logoElement.htmlElement = determineLogoHtmlElement(logoElement.htmlAttribute);
// gets the attribute value from the yml file.
logoElement.attributeValue = logos[website][ymlKey];
}
return logoElement;
}

function determineLogoHtmlElement(htmlAttribute) {
var element;
if (htmlAttribute === 'src') {
element = 'img';
} else if (htmlAttribute === 'class') {
element = 'i';
}
return element;
}

function determineLogoHtmlAttribute(key) {
var attribute;
if (key === 'url') {
attribute = 'src';
} else if (key === 'fontawesome') {
attribute = 'class';
} else {
console.error("Incorrect logo key in yml.")
}
return attribute;
}
</script>
</head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Expand Down