Skip to content

Commit 672d57b

Browse files
steelthedevsteelthedev
committed
Added Django example
1 parent a1c74fe commit 672d57b

34 files changed

+506
-0
lines changed

‎examples/django/frontend/css/bootstrap.min.css

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/django/frontend/css/style.css

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
body{
2+
background: #eeeeee;
3+
}
4+
5+
.todo{
6+
padding: 30px 0;
7+
}
8+
9+
.todo-card{
10+
border-radius: 4px;
11+
background: #fff;
12+
height: 100%;
13+
padding: 20px;
14+
}
15+
16+
17+
.todo-box{
18+
padding: 10px;
19+
}
20+
21+
.todo-box h6{
22+
padding: 30px;
23+
border: 2px solid #000;
24+
margin-top: 5px;
25+
}
26+
27+
.todo-box .btn-delete{
28+
padding: 10px;
29+
width: 100px;
30+
height: 80px;
31+
margin-top: 5px;
32+
}
33+
34+
.todo-box .btn-add{
35+
padding: 10px;
36+
width: 100px;
37+
height: 50px;
38+
margin-top: 4px;
39+
40+
}
41+

‎examples/django/frontend/index.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Pyscript Todo</title>
7+
<link rel="stylesheet" href="css/bootstrap.min.css">
8+
<link rel="stylesheet" href="css/style.css">
9+
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
10+
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
11+
12+
13+
</head>
14+
<body>
15+
<py-env>
16+
- autoclose_loader: true
17+
- runtimes:
18+
-
19+
src: "/pyodide.js"
20+
name: pyodide-0.20
21+
lang: python
22+
- paths:
23+
- script/app.py
24+
</py-env>
25+
<section class="todo">
26+
<div class="container">
27+
<div class="row justify-content-center mt-5">
28+
<div class="col-lg-8 text-center">
29+
<h2 class="lead">Pyscript App</h2>
30+
</div>
31+
32+
<div class="col-lg-6 mt-5">
33+
<div class="todo-card">
34+
<div class="t-line">
35+
<div class="todo-box" >
36+
<div class="row" id="todo-row">
37+
<div class="form-group">
38+
<input type="text" name="addtodo" id="taskadd" class="form-control">
39+
<button pys-onClick="create" id="add" type="button" class="btn shadow-none mt-2 btn-outline-light btn-add btn-primary" >Add</button>
40+
</div>
41+
42+
</div>
43+
</div>
44+
</div>
45+
46+
</div>
47+
</div>
48+
49+
</div>
50+
</div>
51+
</section>
52+
<py-script>
53+
from app import GetTasks,delete,create
54+
from pyodide import create_proxy
55+
56+
</py-script>
57+
58+
</body>
59+
</html>

‎examples/django/frontend/script/app.py

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import json
2+
import asyncio
3+
from pyodide.http import pyfetch
4+
from pyodide import JsException,create_proxy
5+
import js
6+
7+
8+
9+
async def GetTasks():
10+
response = await pyfetch(
11+
url="http://127.0.0.1:8000/",
12+
method="GET",
13+
headers={"Content-Type": "application/json"},
14+
)
15+
if response.ok:
16+
data = await response.json()
17+
parent = js.document.querySelector("#todo-row")
18+
js.document.querySelector('#taskadd').value =""
19+
before_child = js.document.querySelectorAll(".task-test")
20+
before_child2 = js.document.querySelectorAll("#del")
21+
if before_child and before_child2:
22+
for b in before_child:
23+
b.remove()
24+
for c in before_child2:
25+
c.remove()
26+
i=0
27+
for t in data:
28+
i +=1
29+
html_data =js.document.createElement("h6")
30+
html_data.className = "task-test col-8"
31+
html_data.innerHTML = t["task"]
32+
parent.appendChild(html_data)
33+
button=js.document.createElement("button")
34+
button.className = "btn btn-delete btn-outline-light btn-danger col-4"
35+
button.innerHTML = "Delete"
36+
button.value = t["id"]
37+
button.setAttribute("id", "del")
38+
button.addEventListener("click", create_proxy(delete))
39+
parent.appendChild(button)
40+
41+
42+
43+
44+
45+
async def create(e):
46+
task = js.document.querySelector('#taskadd').value
47+
response = await pyfetch(
48+
url=f"http://127.0.0.1:8000/",
49+
method="POST",
50+
headers={"Content-Type": "application/json"},
51+
body = json.dumps({
52+
"task":task
53+
})
54+
)
55+
loop = asyncio.get_event_loop()
56+
loop.run_until_complete(GetTasks())
57+
58+
59+
async def delete(e):
60+
id = e.target.value
61+
response = await pyfetch(
62+
url=f"http://127.0.0.1:8000/delete/{id}",
63+
method="DELETE",
64+
headers={"Content-Type": "application/json"},
65+
66+
)
67+
loop = asyncio.get_event_loop()
68+
loop.run_until_complete(GetTasks())
69+
70+
71+
72+
loop = asyncio.get_event_loop()
73+
loop.run_until_complete(GetTasks())

‎examples/django/todo/app/__init__.py

Whitespace-only changes.

‎examples/django/todo/app/__pycache__/__init__.cpython-310.pyc

150 Bytes
Binary file not shown.

‎examples/django/todo/app/__pycache__/admin.cpython-310.pyc

261 Bytes
Binary file not shown.

‎examples/django/todo/app/__pycache__/apps.cpython-310.pyc

412 Bytes
Binary file not shown.

‎examples/django/todo/app/__pycache__/models.cpython-310.pyc

581 Bytes
Binary file not shown.

‎examples/django/todo/app/__pycache__/serializers.cpython-310.pyc

647 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)