Skip to content

Commit a0c4107

Browse files
andreburgaudandreburgaud
committed
Added Vuewjs example
1 parent 71d51e4 commit a0c4107

File tree

4 files changed

+127
-57
lines changed

4 files changed

+127
-57
lines changed

‎brython/hashes/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html >
2+
<html>
3+
<head>
4+
<meta charset="utf-8"/>
5+
<link
6+
rel="stylesheet"
7+
href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.3/pure-min.min.css"
8+
integrity="sha256-jYujp4Kf07YDuUF9i1MHo4AnpXUKuHxIUXH7CrHxdKw="
9+
crossorigin="anonymous"
10+
async>
11+
</script>
12+
<script
13+
src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.9/brython.min.js"
14+
integrity="sha256-U56d9Sn/Gtf1meSBXazW81LM1bUeyc1jFuoY3CBu6A8="
15+
crossorigin="anonymous"
16+
defer>
17+
</script>
18+
<script
19+
src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.9/brython_stdlib.min.js"
20+
integrity="sha256-twMHOlRBOpBkpyGFeXIBWoJqTpqf76Zp8HExOelwyRc="
21+
crossorigin="anonymous"
22+
async>
23+
</script>
24+
<script src="main.py" type="text/python" defer></script>
25+
<style>
26+
body { padding: 30px; }
27+
</style>
28+
</head>
29+
<body onload="brython()">
30+
<form class="pure-form" onsubmit="return false;">
31+
<fieldset>
32+
<legend>Hash Calculator</legend>
33+
<input type="text" id="text-src" placeholder="Text to Encode" autocomplete="off"/>
34+
<select name="algo" id="algo">
35+
<option value="sha-1">SHA-1</option>
36+
<option value="sha-256">SHA-256</option>
37+
<option value="sha-512">SHA-512</option>
38+
</select>
39+
<button type="submit" id="submit" class="pure-button pure-button-primary">Ok</button>
40+
</fieldset>
41+
</form>
42+
<div id="hash-display"></div>
43+
</body>
44+
</html>

‎brython/hashes/main.py‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
from browser import document, prompt, html, alert
2+
import json, hashlib
3+
4+
hashes = {
5+
"sha-1": hashlib.sha1,
6+
"sha-256": hashlib.sha256,
7+
"sha-512": hashlib.sha512
8+
}
9+
10+
def compute_hash(evt):
11+
value = document["text-src"].value
12+
if not value:
13+
alert("You need to enter a value")
14+
return
15+
algo_dropdown = document["algo"]
16+
algo = algo_dropdown.options[algo_dropdown.selectedIndex].value
17+
hash_object = hashes[algo]()
18+
hash_object.update(value.encode())
19+
hex_value = hash_object.hexdigest()
20+
display_hash(hex_value)
21+
22+
def clear_map(evt):
23+
hash_map.clear()
24+
storage[LOCAL_STORAGE] = json.dumps({})
25+
document["hash-display"].clear()
26+
27+
def display_hash(hex_value):
28+
text = html.P(hex_value)
29+
hash_display = document["hash-display"]
30+
hash_display.clear()
31+
hash_display <= text
32+
33+
document["submit"].bind("click", compute_hash)
34+
35+

‎brython/vuejs/index.html‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@
77
href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.3/pure-min.min.css"
88
integrity="sha256-jYujp4Kf07YDuUF9i1MHo4AnpXUKuHxIUXH7CrHxdKw="
99
crossorigin="anonymous"
10-
async/>
10+
defer/>
1111
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"
1212
integrity="sha256-ngFW3UnAN0Tnm76mDuu7uUtYEcG3G5H1+zioJw3t+68="
1313
crossorigin="anonymous"
14-
async>
14+
defer>
1515
</script>
1616
<script
1717
src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.9/brython.min.js"
@@ -23,22 +23,30 @@
2323
src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.9/brython_stdlib.min.js"
2424
integrity="sha256-twMHOlRBOpBkpyGFeXIBWoJqTpqf76Zp8HExOelwyRc="
2525
crossorigin="anonymous"
26-
async>
26+
defer>
2727
</script>
2828
<script src="main.py" type="text/python" defer></script>
2929
<style>
3030
body { padding: 30px; }
31+
/* [v-cloak] { display: none; } */
32+
[v-cloak] { visibility: hidden; }
3133
</style>
3234
</head>
33-
<body onload="brython()">
34-
<form class="pure-form" onsubmit="return false;">
35-
<fieldset>
36-
<legend>SHA-256 Calculator</legend>
37-
<input type="text" id="text-src" placeholder="Text to Encode" autocomplete="off"/>
38-
<button type="submit" id="submit" class="pure-button pure-button-primary">Ok</button>
39-
<button id="clear-btn" class="pure-button">Clear</button>
40-
</fieldset>
41-
</form>
42-
<div id="hash-display"></div>
35+
<body onload="brython(1)">
36+
<div id="app">
37+
<form class="pure-form" onsubmit="return false;">
38+
<fieldset>
39+
<legend>Hash Calculator</legend>
40+
<input type="text" v-model="input_text" placeholder="Text to Encode" autocomplete="off"/>
41+
<select v-model="algo" :clearable="false" v-cloak>
42+
<option v-for="algo in algos" v-bind:value="algo">
43+
{{ algo }}
44+
</option>
45+
</select>
46+
<button @click="compute_hash" type="submit" class="pure-button pure-button-primary">Ok</button>
47+
</fieldset>
48+
</form>
49+
<p v-cloak>{{ hash_value }}</p>
50+
</div>
4351
</body>
4452
</html>

‎brython/vuejs/main.py‎

Lines changed: 27 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,35 @@
1-
from browser import document, prompt, html, alert
2-
from browser.local_storage import storage
1+
from browser import alert, document, window
32
import json, hashlib
3+
from javascript import this
44

5-
LOCAL_STORAGE = 'hashdata'
5+
hashes = {
6+
"sha-1": hashlib.sha1,
7+
"sha-256": hashlib.sha256,
8+
"sha-512": hashlib.sha512
9+
}
610

7-
def load_data():
8-
data = storage.get(LOCAL_STORAGE)
9-
if data:
10-
hash_map = json.loads(data)
11-
else:
12-
storage[LOCAL_STORAGE] = json.dumps({})
13-
hash_map = {}
14-
return hash_map
11+
Vue = window.Vue
1512

16-
def compute(evt):
17-
value = document["text-src"].value
13+
def compute_hash(evt):
14+
value = this().input_text
1815
if not value:
1916
alert("You need to enter a value")
2017
return
21-
if value in hash_map:
22-
alert(f"The SHA-256 value of '{value}' already exists: '{sha_map[value]}'")
23-
return
24-
hash = hashlib.sha256()
25-
hash.update(value.encode())
26-
hash_hex = hash.hexdigest()
27-
hash_map[value] = hash_hex
28-
storage[LOCAL_STORAGE] = json.dumps(hash_map)
29-
display_map()
30-
31-
def clear_map(evt):
32-
hash_map.clear()
33-
storage[LOCAL_STORAGE] = json.dumps({})
34-
document["hash-display"].clear()
35-
36-
def display_map():
37-
if not hash_map:
38-
return
39-
table = html.TABLE(Class="pure-table")
40-
table <= html.THEAD(html.TR(html.TH("Text") + html.TH("SHA-256")))
41-
table <= (html.TR(html.TD(key) + html.TD(hash_map[key])) for key in hash_map)
42-
hash_display = document["hash-display"]
43-
hash_display.clear()
44-
hash_display <= table
45-
document["text-src"].value = ""
46-
47-
hash_map = load_data()
48-
display_map()
49-
document["submit"].bind("click", compute)
50-
document["clear-btn"].bind("click", clear_map)
51-
18+
hash_object = hashes[this().algo]()
19+
hash_object.update(value.encode())
20+
hex_value = hash_object.hexdigest()
21+
this().hash_value = hex_value
22+
23+
app = Vue.new({
24+
"el": "#app",
25+
"data": {
26+
"hash_value": "",
27+
"algos": [ "sha-1", "sha-256", "sha-512" ],
28+
"algo": "sha-1",
29+
"input_text": ""
30+
},
31+
"methods": {
32+
"compute_hash": compute_hash
33+
}
34+
})
5235

0 commit comments

Comments
 (0)