Skip to content

Commit 280fd53

Browse files
committed
add example
1 parent a702cbd commit 280fd53

File tree

2 files changed

+144
-0
lines changed

2 files changed

+144
-0
lines changed

pyscriptjs/examples/pylist.py

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
from datetime import datetime as dt
2+
from xml.dom.pulldom import END_ELEMENT
3+
from js import console, HTMLElement, document
4+
5+
6+
def add_classes(element, class_list):
7+
for klass in class_list.split(' '):
8+
element.classList.add(klass)
9+
10+
def create(what, id_=None, classes=''):
11+
element = document.createElement(what)
12+
if id_:
13+
element.id = id_
14+
add_classes(element, classes)
15+
return Element(id_, element)
16+
17+
18+
class PyList:
19+
def __init__(self, parent):
20+
self.parent = parent
21+
self._children = []
22+
self.id = self.parent.id
23+
24+
def connect(self):
25+
self.md = main_div = document.createElement('div');
26+
main_div.id = self.id + "-list-tasks-container"
27+
28+
for klass in "flex flex-col-reverse mt-4".split(' '):
29+
main_div.classList.add(klass)
30+
31+
self.parent.appendChild(main_div)
32+
33+
def add(self, data, labels):
34+
child = PyItem(self, data, labels)
35+
return self._add(child)
36+
37+
def _add(self, child_elem):
38+
self._children.append(child_elem)
39+
console.log("appending child", child_elem.element)
40+
self.md.appendChild(child_elem.create().element)
41+
return child_elem
42+
43+
class PyItem(Element):
44+
def __init__(self, parent, data, labels):
45+
self._parent = parent
46+
self.id = f"{self._parent.id}-c-{len(self._parent._children)}"
47+
self.data = data
48+
self.data['id'] = self.id
49+
self.labels = labels
50+
51+
super().__init__(self.id)
52+
53+
def create(self):
54+
console.log('creating section')
55+
new_child = create('section', self.id, "task bg-white my-1")
56+
console.log('creating values')
57+
values = ' - '.join([self.data[f] for f in self.labels])
58+
console.log('creating innerHtml')
59+
new_child._element.innerHTML = f"""
60+
<label for="flex items-center p-2 ">
61+
<input class="mr-2" type="checkbox" class="task-check">
62+
<p class="m-0 inline">{values}</p>
63+
</label>
64+
"""
65+
66+
check = new_child.select('input').element
67+
check.onclick = self.check_task
68+
console.log('returning')
69+
return new_child
70+
71+
def check_task(self, evt=None):
72+
self.data['done'] = not self.data['done']
73+
if self.data['done']:
74+
self.add_class("line-through")
75+
else:
76+
self.remove_class("line-through")
77+
78+
79+
def add_task(*ags, **kws):
80+
console.log(new_task_content.value)
81+
console.log('adding', myList)
82+
task = {
83+
"content": new_task_content.value,
84+
"done": False,
85+
"created_at": dt.now()
86+
}
87+
myList.add(task, ['content'])
88+
new_task_content.clear()

pyscriptjs/examples/todo-pylist.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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+
7+
<title>Todo App</title>
8+
9+
<link rel="icon" type="image/png" href="favicon.png" />
10+
<link rel="stylesheet" href="/build/pyscript.css" />
11+
12+
<script defer src="/build/pyscript.js"></script>
13+
<py-env>
14+
- paths:
15+
- /utils.py
16+
</py-env>
17+
<py-register-widget src="/pylist.py" name="py-list" klass="PyList"></py-widget>
18+
</head>
19+
20+
<body class="container">
21+
<!-- <py-repl id="my-repl" auto-generate="true"> </py-repl> -->
22+
<!-- <py-script src="/todo.py"> </py-script> -->
23+
24+
25+
<main class="max-w-xs mx-auto mt-4">
26+
<section>
27+
28+
<py-list id="mylist"></py-list>
29+
30+
<div class="text-center w-full mb-8">
31+
<h1 class="text-3xl font-bold text-gray-800 uppercase tracking-tight">To Do List</h1>
32+
</div>
33+
<div>
34+
<input id="new-task-content" class="border flex-1 mr-3 border-gray-300 p-2 rounded" type="text" py-mount>
35+
<button id="new-task-btn" class="p-2 text-white bg-blue-600 border border-blue-600 rounded" type="submit" pys-onClick="add_task">
36+
Add task
37+
</button>
38+
</div>
39+
40+
<py-list id="myList"></py-list>
41+
<py-repl id="my-repl" auto-generate="true"> </py-repl>
42+
</div>
43+
44+
<template id="task-template">
45+
<section class="task bg-white my-1">
46+
<label for="flex items-center p-2 ">
47+
<input class="mr-2" type="checkbox" class="task-check">
48+
<p class="m-0 inline"></p>
49+
</label>
50+
</section>
51+
</template>
52+
53+
</section>
54+
</main>
55+
</body>
56+
</html>

0 commit comments

Comments
 (0)