mirror of
https://github.com/pyscript/pyscript.git
synced 2022-05-01 19:47:48 +03:00
add example
This commit is contained in:
Fabio Pliger
88
pyscriptjs/examples/pylist.py
Normal file
88
pyscriptjs/examples/pylist.py
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
from datetime import datetime as dt
|
||||||
|
from xml.dom.pulldom import END_ELEMENT
|
||||||
|
from js import console, HTMLElement, document
|
||||||
|
|
||||||
|
|
||||||
|
def add_classes(element, class_list):
|
||||||
|
for klass in class_list.split(' '):
|
||||||
|
element.classList.add(klass)
|
||||||
|
|
||||||
|
def create(what, id_=None, classes=''):
|
||||||
|
element = document.createElement(what)
|
||||||
|
if id_:
|
||||||
|
element.id = id_
|
||||||
|
add_classes(element, classes)
|
||||||
|
return Element(id_, element)
|
||||||
|
|
||||||
|
|
||||||
|
class PyList:
|
||||||
|
def __init__(self, parent):
|
||||||
|
self.parent = parent
|
||||||
|
self._children = []
|
||||||
|
self.id = self.parent.id
|
||||||
|
|
||||||
|
def connect(self):
|
||||||
|
self.md = main_div = document.createElement('div');
|
||||||
|
main_div.id = self.id + "-list-tasks-container"
|
||||||
|
|
||||||
|
for klass in "flex flex-col-reverse mt-4".split(' '):
|
||||||
|
main_div.classList.add(klass)
|
||||||
|
|
||||||
|
self.parent.appendChild(main_div)
|
||||||
|
|
||||||
|
def add(self, data, labels):
|
||||||
|
child = PyItem(self, data, labels)
|
||||||
|
return self._add(child)
|
||||||
|
|
||||||
|
def _add(self, child_elem):
|
||||||
|
self._children.append(child_elem)
|
||||||
|
console.log("appending child", child_elem.element)
|
||||||
|
self.md.appendChild(child_elem.create().element)
|
||||||
|
return child_elem
|
||||||
|
|
||||||
|
class PyItem(Element):
|
||||||
|
def __init__(self, parent, data, labels):
|
||||||
|
self._parent = parent
|
||||||
|
self.id = f"{self._parent.id}-c-{len(self._parent._children)}"
|
||||||
|
self.data = data
|
||||||
|
self.data['id'] = self.id
|
||||||
|
self.labels = labels
|
||||||
|
|
||||||
|
super().__init__(self.id)
|
||||||
|
|
||||||
|
def create(self):
|
||||||
|
console.log('creating section')
|
||||||
|
new_child = create('section', self.id, "task bg-white my-1")
|
||||||
|
console.log('creating values')
|
||||||
|
values = ' - '.join([self.data[f] for f in self.labels])
|
||||||
|
console.log('creating innerHtml')
|
||||||
|
new_child._element.innerHTML = f"""
|
||||||
|
<label for="flex items-center p-2 ">
|
||||||
|
<input class="mr-2" type="checkbox" class="task-check">
|
||||||
|
<p class="m-0 inline">{values}</p>
|
||||||
|
</label>
|
||||||
|
"""
|
||||||
|
|
||||||
|
check = new_child.select('input').element
|
||||||
|
check.onclick = self.check_task
|
||||||
|
console.log('returning')
|
||||||
|
return new_child
|
||||||
|
|
||||||
|
def check_task(self, evt=None):
|
||||||
|
self.data['done'] = not self.data['done']
|
||||||
|
if self.data['done']:
|
||||||
|
self.add_class("line-through")
|
||||||
|
else:
|
||||||
|
self.remove_class("line-through")
|
||||||
|
|
||||||
|
|
||||||
|
def add_task(*ags, **kws):
|
||||||
|
console.log(new_task_content.value)
|
||||||
|
console.log('adding', myList)
|
||||||
|
task = {
|
||||||
|
"content": new_task_content.value,
|
||||||
|
"done": False,
|
||||||
|
"created_at": dt.now()
|
||||||
|
}
|
||||||
|
myList.add(task, ['content'])
|
||||||
|
new_task_content.clear()
|
||||||
56
pyscriptjs/examples/todo-pylist.html
Normal file
56
pyscriptjs/examples/todo-pylist.html
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
|
|
||||||
|
<title>Todo App</title>
|
||||||
|
|
||||||
|
<link rel="icon" type="image/png" href="favicon.png" />
|
||||||
|
<link rel="stylesheet" href="/build/pyscript.css" />
|
||||||
|
|
||||||
|
<script defer src="/build/pyscript.js"></script>
|
||||||
|
<py-env>
|
||||||
|
- paths:
|
||||||
|
- /utils.py
|
||||||
|
</py-env>
|
||||||
|
<py-register-widget src="/pylist.py" name="py-list" klass="PyList"></py-widget>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="container">
|
||||||
|
<!-- <py-repl id="my-repl" auto-generate="true"> </py-repl> -->
|
||||||
|
<!-- <py-script src="/todo.py"> </py-script> -->
|
||||||
|
|
||||||
|
|
||||||
|
<main class="max-w-xs mx-auto mt-4">
|
||||||
|
<section>
|
||||||
|
|
||||||
|
<py-list id="mylist"></py-list>
|
||||||
|
|
||||||
|
<div class="text-center w-full mb-8">
|
||||||
|
<h1 class="text-3xl font-bold text-gray-800 uppercase tracking-tight">To Do List</h1>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input id="new-task-content" class="border flex-1 mr-3 border-gray-300 p-2 rounded" type="text" py-mount>
|
||||||
|
<button id="new-task-btn" class="p-2 text-white bg-blue-600 border border-blue-600 rounded" type="submit" pys-onClick="add_task">
|
||||||
|
Add task
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<py-list id="myList"></py-list>
|
||||||
|
<py-repl id="my-repl" auto-generate="true"> </py-repl>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template id="task-template">
|
||||||
|
<section class="task bg-white my-1">
|
||||||
|
<label for="flex items-center p-2 ">
|
||||||
|
<input class="mr-2" type="checkbox" class="task-check">
|
||||||
|
<p class="m-0 inline"></p>
|
||||||
|
</label>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user