alihan/pyscript-python-html
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2022-05-01 19:47:48 +03:00
Code Issues Projects Releases Wiki Activity

update examples to show loading modules into the environment

Browse Source
This commit is contained in:
Fabio Pliger
2022-04-12 19:04:53 -05:00
parent 67be46f224
commit 92613c06f5
4 changed files with 27 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
pyscriptjs/examples/repl2.html
View File

@@ -12,6 +12,13 @@
<script defer src="../build/pyscript.js"></script> <script defer src="../build/pyscript.js"></script>
</head> </head>
<py-env>
- bokeh
- numpy
- paths:
- /utils.py
</py-env>
<body> <body>
<div class="w-full h-full"> <div class="w-full h-full">
<div class="flex"> <div class="flex">

14
pyscriptjs/examples/simple_script2.html
View File

@@ -10,6 +10,10 @@
<link rel="stylesheet" href="../build/pyscript.css" /> <link rel="stylesheet" href="../build/pyscript.css" />
<script defer src="../build/pyscript.js"></script> <script defer src="../build/pyscript.js"></script>
<py-env>
- paths:
- /utils.py
</py-env>
</head> </head>
<body> <body>
@@ -17,20 +21,18 @@
<div id="outputDiv2" class="font-mono"></div> <div id="outputDiv2" class="font-mono"></div>
<div id="outputDiv3" class="font-mono"></div> <div id="outputDiv3" class="font-mono"></div>
<py-script target="outputDiv"> <py-script target="outputDiv">
from datetime import datetime import utils
now = datetime.now() utils.now()
now.strftime("%m/%d/%Y, %H:%M:%S")
</py-script> </py-script>
<py-script> <py-script>
from datetime import datetime from utils import now
import asyncio import asyncio
async def foo(): async def foo():
while True: while True:
await asyncio.sleep(1) await asyncio.sleep(1)
now = datetime.now() output = now()
output = now.strftime("%m/%d/%Y, %H:%M:%S")
pyscript.write("outputDiv2", output) pyscript.write("outputDiv2", output)
out3 = Element("outputDiv3") out3 = Element("outputDiv3")

8
pyscriptjs/examples/todo.html
View File

@@ -10,6 +10,10 @@
<link rel="stylesheet" href="/build/pyscript.css" /> <link rel="stylesheet" href="/build/pyscript.css" />
<script defer src="/build/pyscript.js"></script> <script defer src="/build/pyscript.js"></script>
<py-env>
- paths:
- /utils.py
</py-env>
</head> </head>
<body class="container"> <body class="container">
@@ -22,7 +26,8 @@
<div class="text-center w-full mb-8"> <div class="text-center w-full mb-8">
<h1 class="text-3xl font-bold text-gray-800 uppercase tracking-tight">To Do List</h1> <h1 class="text-3xl font-bold text-gray-800 uppercase tracking-tight">To Do List</h1>
</div> </div>
<py-button label="click me">
</py-button>
<div> <div>
<input id="new-task-content" class="border flex-1 mr-3 border-gray-300 p-2 rounded" type="text"> <input id="new-task-content" class="border flex-1 mr-3 border-gray-300 p-2 rounded" type="text">
<button id="new-task-btn" class="p-2 text-white bg-blue-600 border border-blue-600 rounded" type="submit" pys-onClick="add_task"> <button id="new-task-btn" class="p-2 text-white bg-blue-600 border border-blue-600 rounded" type="submit" pys-onClick="add_task">
@@ -30,6 +35,7 @@
</button> </button>
</div> </div>
<py-list id="myList"></py-list>
<div id="list-tasks-container" class="flex flex-col-reverse mt-4"> <div id="list-tasks-container" class="flex flex-col-reverse mt-4">
</div> </div>

8
pyscriptjs/examples/todo.py
View File

@@ -1,4 +1,5 @@
from datetime import datetime as dt from datetime import datetime as dt
from utils import add_class, remove_class
from js import console from js import console
tasks = [] tasks = []
@@ -11,7 +12,9 @@ new_task_content = Element("new-task-content")
def add_task(*ags, **kws): def add_task(*ags, **kws):
# create task # create task
task_id = f"task-{len(tasks)}" task_id = f"task-{len(tasks)}"
now = dt.now()
task = {"id": task_id, "content": new_task_content.element.value, "done": False, "created_at": dt.now()} task = {"id": task_id, "content": new_task_content.element.value, "done": False, "created_at": dt.now()}
tasks.append(task) tasks.append(task)
# add the task element to the page as new node in the list by cloning from a template # add the task element to the page as new node in the list by cloning from a template
@@ -24,14 +27,13 @@ def add_task(*ags, **kws):
def check_task(evt=None): def check_task(evt=None):
task['done'] = not task['done'] task['done'] = not task['done']
if task['done']: if task['done']:
taskHtmlContent.element.classList.add("line-through") add_class(taskHtmlContent, "line-through")
else: else:
taskHtmlContent.element.classList.remove("line-through") remove_class(taskHtmlContent, "line-through")
new_task_content.clear() new_task_content.clear()
taskHtmlCheck.element.onclick = check_task taskHtmlCheck.element.onclick = check_task
def add_task_event(e): def add_task_event(e):
console.log("im in")
if (e.key == "Enter"): if (e.key == "Enter"):
add_task() add_task()