Last active
April 27, 2021 18:21
-
-
Save mtanco/90997444b56d87f5380612b27a14abb5 to your computer and use it in GitHub Desktop.
The example application creates a new card from user text, all past cards stay on the page, and cards can be cleared with an additional button
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
from datetime import datetime | |
from h2o_wave import main, app, Q, ui, on, handle_on | |
from loguru import logger | |
def on_startup(): | |
logger.info('http://localhost:10101') | |
@app('/', on_startup=on_startup) | |
async def serve(q: Q): | |
logger.info(q.args) | |
if not q.client.initialized: # first time a tab comes this is app | |
if not q.app.initialized: # first time the app is ever used | |
logger.info('Initializing the app for the first time') | |
q.app.comments = [] # hold comments of all users | |
q.app.initialized = True | |
logger.info('Initializing the app for a new browser tab.') | |
q.page['meta'] = ui.meta_card( | |
box='', | |
title='My Commenting App', | |
layouts=[ | |
ui.layout( | |
breakpoint='xs', | |
width='1200px', | |
zones=[ui.zone('top'), ui.zone('comments', direction=ui.ZoneDirection.COLUMN)] | |
) | |
] | |
) | |
q.page['comment_card'] = ui.form_card( | |
box='top', | |
items=[ | |
ui.textbox(name='user_comment', placeholder='Write some text here'), | |
ui.buttons([ | |
ui.button(name='comment_submit', label='Submit', primary=True), | |
ui.button(name='comments_update', label='Get Latest Comments', primary=False), | |
]) | |
] | |
) | |
render_all_comments(q) | |
q.client.initialized = True # Document that this browser is setup | |
else: # if a tab is already active | |
logger.info('Handling a user interaction') | |
await handle_on(q) # calls all "on" functions in order of q.args and stops after first match | |
await q.page.save() # Save changes to the screen | |
@on() | |
async def comment_submit(q: Q): | |
logger.info('Rending user comment') | |
comment = Comment(q.username, datetime.now(), q.args.user_comment) | |
q.app.comments.append(comment) # add to our shared-user list of all comments | |
i = len(q.app.comments) - 1 # card number of this comment | |
q.page[f'comment_{i}'] = ui.form_card( | |
box=ui.box('comments', order=i), # use -q.client.card_count if you want new comments on top | |
items=[ | |
ui.text(f'{comment.date} - {comment.user} - {comment.comment}') | |
] | |
) | |
@on() | |
async def comments_update(q: Q): | |
logger.info('Re-printing all comments, unless there are new ones from other users') | |
render_all_comments(q) | |
def render_all_comments(q: Q): | |
logger.info('Adding any existing comments to the screen') | |
for i in range(len(q.app.comments)): | |
comment = q.app.comments[i] | |
q.page[f'comment_{i}'] = ui.form_card( | |
box=ui.box('comments', order=i), | |
# use -q.client.card_count if you want new comments on top | |
items=[ | |
ui.text(f'{comment.date} - {comment.user} - {comment.comment}') | |
] | |
) | |
class Comment: | |
def __init__(self, user: str, date: datetime, comment: str): | |
self.user = user | |
self.date = date | |
self.comment = comment |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks Michelle! This is awesome help.