Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

adding a contacts web application example #103

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

adding a contacts web application example #103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ef951c9
adding a contacts web application example
meg-1 Mar 25, 2023
7694dc6
fixing bugs in contacts web application
meg-1 Apr 1, 2023
76c9450
psc module not found
meg-1 Apr 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 57 additions & 0 deletions src/psc/gallery/examples/contacts_web_application/contacts.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

42 changes: 42 additions & 0 deletions src/psc/gallery/examples/contacts_web_application/contacts.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
""" Contacts Web Application """
from js import add_to_list, clear_search_area, add_found_contact
import re
contacts_list = {}
output = Element("output")

search_res = []

def search_by_value(query):
global search_res
search_res = []
clear_search_area()
for number, name in contacts_list.items():
temp = re.findall(query, name)
if temp:
contact = {"contact_name": name, "contact_number": number}
add_found_contact(name, number)
search_res.append(contact)
return search_res

def contact_book(*args, **kwargs):
"""Contact book function."""
# Signal that PyScript is alive by setting the ``Save Contact``
# disabled attribute
save_button = Element("save")
# Now get the various inputs
contact_name = Element("contact_name").value
phone_number = Element("phone_number").value

if phone_number not in contacts_list.keys():
contacts_list[phone_number] = contact_name
last_val = list(contacts_list.keys())[-1]
add_to_list(str(last_val), str(contacts_list[last_val]))


def setup():
"""When Pyodide starts up, enable the Save button."""
save_button = Element("save") # noqa
save_button.element.removeAttribute("disabled")
output = Element("output")

setup()
136 changes: 136 additions & 0 deletions src/psc/gallery/examples/contacts_web_application/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
<!-- Powered by PyScript
author's github': https://github.com/meg-1
license: MIT
tags: PyScript Contacts JavaScript Python Bootstrap Web Application -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Contact Book</title>
<link rel="icon" type="image/png" href="../../../favicon.png">
<link rel="stylesheet" href="styles.css" />
<script defer src="pyscript.js"></script>
<script defer src="contacts.js"></script>
<!--<script defer src="https://pyscript.net/latest/pyscript.js"></script>-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
</head>
<body>
<section class="contacts-demo">
<section class="contacts-inner">

<div class="container-fluid h-100" style="height: 100vh !important;">
<div class="row">

<div class="col-lg-6 col-sm-12">

<div class="container-fluid row">
<div class="col-md-8 col-sm-12">
<div class="flexelement" id="first_div">
<p id="first_p">
<h5 id="welcome">Welcome to the "PyScript Contacts Web Application"</h5>
<strong>"how does it work?"</strong>
<ul>
<li>enter a contact name and number in the form area</li>
<li>click the "save contact" button</li>
<li>you will see the contact appear in the "name" and "number" area</li>
<li>enter as many contacts as you wish</li>
<li>
after adding one or more contacts, you can enter a query in the "enter your query"
area. this area is used as a search box. you can enter contact names, and easily find
the contacts name and number combined!
</li>
<li>Have fun!</li>
</ul>
</p>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div id="form">
<div>
<center><h5>Add Your Contacts</h5></center>
<label>
Contact Name
<input id="contact_name" type="text" step="0.1" style="color: black; min-height: 60px;"
placeholder="Name" />
</label>
<br>
<br />

<label>
Phone Number
<input id="phone_number" type="text" step="1" min="0" style="color: black; min-height: 60px;"
placeholder="Number" />
</label>
<br> <br />

<p id="output"></p>
<button py-click="contact_book()" id="save" disabled
style="min-height: 60px; background-color: #B0C7BD;
color: white; font-weight: bold; font-size: 18px;">
Save Contact
</button>

</div>

</div>
</div>
</div>

<div id="search_area_div">
<center><h5 style="padding: 10px;">Search Box</h5></center>
<input class="w-100" type="text" id="search_area"
placeholder="enter a contact name" />
<div id="contact_card_template" class="row" style="display: none;">
<div class="col-6 name_template d-flex justify-content-center p-1">
</div>

<div class="col-6 number_template d-flex justify-content-center p-1">

</div>

</div>
<div id="found_contacts_list" style="overflow: scroll; height: 280px;">
</div>
</div>
</div>

<div class="col-lg-6 col-sm-12 justify-content-center"
style="height: 100vh !important;">
<h1 class="d-flex justify-content-center">Contacts List</h1>
<div class="row d-flex justify-content-center w-100" id="contacts_list_grid">
<h1 class="d-flex justify-content-center h-10 w-50 row ">name</h1>
<h1 class="d-flex justify-content-center h-10 w-50 row">number</h1>
</div>
</div>


</div>

</div>


<py-config src="./py_config.toml"></py-config>
<py-script src="./contacts.py"></py-script>

</section>
</section>

<footer>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<p id="footer_p">
Thank you for using the "PyScript Contacts Web Application",
powered by PyScript!
</p>
</div>
</div>
</div>

</footer>

</body>

</html>
10 changes: 10 additions & 0 deletions src/psc/gallery/examples/contacts_web_application/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
title: PyScript Contacts Web Application
subtitle: Enter some contacts, get some contacts.
author: meg-1
linked_files:
- contacts.py
- styles.css
---
The *body* description.
this project is intended to show interaction between Pyscript and JavaScript
Empty file added src/psc/gallery/examples/contacts_web_application/py_config.toml
View file
Open in desktop
Empty file.
Loading