From c33157ec78aa6fa7a779ced98f631d5abe875c0b Mon Sep 17 00:00:00 2001 From: Norm Rasmussen Date: Sat, 5 Oct 2024 16:39:30 -0400 Subject: [PATCH] Cleaned up the look of ui.display and the modal for submitting a verse. There was an issue with the way python looks at for loops and a frontend ui, but thankfully the devs had answered a question on stack overflow. See here: https://stackoverflow.com/questions/76726671/im-populating-some-cards-using-for-loop-in-nicegui-each-has-a-label-and-a-butto. Set it to refresh as well so complete/incomplete shows the correct color as expected. Need to account for duplicates with a utility func. --- main.py | 51 +++++++++++++++++++++++++++------------------------ 1 file changed, 27 insertions(+), 24 deletions(-) diff --git a/main.py b/main.py index 728cf0f..a350a08 100644 --- a/main.py +++ b/main.py @@ -11,12 +11,14 @@ cur = db.cursor() APIKEY = "Token f562cf2d890151d682065696dacdc0f86938a18e" HEADERS = { 'Authorization': APIKEY} +card = "card" @ui.page('/') def index_page() -> None: with theme.frame('Homepage'): - pass + with ui.dialog().props('persistent') as addverse: + pass - with ui.grid(columns=1).classes('self-center justify-items-center content-center p-2 m-2'): + with ui.grid(columns=1).classes('self-center justify-items-center content-center p-2 m-2 rounded-xl'): toggle = ui.toggle(["Hannah", "Fiona", "Liam"], clearable=True, on_change=lambda: show_person(toggle)) with ui.row().classes('absolute bottom-0 left-0 p-2 m-2'): with ui.element('q-fab').props('icon=navigation color=green'): @@ -25,18 +27,12 @@ def index_page() -> None: with ui.row().style('justify-content: center') as showperson: pass - with ui.grid(columns=1).classes('grid gap-4 place-items-stretch') as showoptions: - optionstoggle = ui.toggle(["Completed", "Pin Verse"], clearable=True) - - with ui.card().style('border: orange solid 3px').classes('flex self-center justify-self-auto') as addverse: - pass showperson.set_visibility(False) - showoptions.set_visibility(False) - addverse.set_visibility(False) @ui.refreshable def show_person(person): + showperson.clear() if person.value is not None: res = cur.execute(f"select verse,verse_passage,status from tasks where person='{person.value.lower()}'") dbinfo = res.fetchall() @@ -45,38 +41,45 @@ def index_page() -> None: ui.notify(f"{person.value} doesn't have any verses saved under her name! Start adding some by clicking the green arrow in the bottom left.") else: showperson.set_visibility(True) #False if showperson.visible else True) - showoptions.set_visibility(True) - with showperson: - with ui.grid(columns=3): + # showoptions.set_visibility(True) + with showperson.classes('border-8'): + with ui.grid(columns=5).classes('rounded-md items-center border-8'): for item in dbinfo: - ui.chip(item[0], icon='ads_click', on_click=lambda: ui.notify(item[1])) - ui.label(item[1].title()).classes('text-wrap') - if item[2] == 0: - ui.chip("Incomplete", selectable=True, icon="add", color="orange", on_selection_change=lambda: toggle_completion(item[0], person, status=1)) + label_verse = ui.label(text=item[0]).classes('hidden') + label_passage = ui.label(text=item[1]).classes('hidden') + label_status = ui.label(text=item[2]).classes('hidden') + ui.chip(label_verse.text, icon='ads_click', on_click=lambda: ui.notify(label_passage.text)) + ui.label(label_passage.text).classes('text-wrap') + if label_status.text == '0': + ui.chip("Incomplete", selectable=True, icon="add", color="orange", on_selection_change=lambda: toggle_completion(label_verse.text, person, status=1)) else: - ui.chip("Complete", selectable=True, icon="add", color="green", on_selection_change=lambda: toggle_completion(item[0], person, status=0)).props('dark') + ui.chip("Complete", selectable=True, icon="add", color="green", on_selection_change=lambda: toggle_completion(label_verse.text, person, status=0)) + ui.checkbox('Pin Verse')#.bind_visibility_from(card, 'value') + ui.checkbox('Mark as Completed')#.bind_value(item[2]) else: showperson.clear() def toggle_completion(verse, person, status): ins = cur.execute(f"update tasks set status = '{status}' where person = '{person.value.lower()}' and verse = '{verse}'") - # values('{person.value.lower()}', '{result.value}', '{zpassage}', 'incomplete', 'incomplete', 'none');") + print(f"update tasks set status = '{status}' where person = '{person.value.lower()}' and verse = '{verse}'") db.commit() - # show_person(person) + show_person.refresh + show_person(person) def add_verse(person): if person.value is None: ui.notify("Oops! You haven't selected a person") else: - addverse.set_visibility(True) + addverse.open() with addverse: - result = ui.input(label="Add Verse Here") - ui.button().props('icon=book color=grey-5').on('click', lambda: submit_verse(result, person)) + with ui.card().classes('flex-wrap items-center'): + result = ui.input(label="Add Verse Here") + with ui.row().classes('justify-content-center'): + ui.button().props('push glossy icon=add_circle color=indigo-5').on('click', lambda: submit_verse(result, person)) + ui.button().props('push glossy icon=cancel color=orange-3').on('click', lambda: addverse.close()) def submit_verse(result, person): - # addverse.set_visibility(False) - print(result) # Verify the format of a Bible Verse if not re.match(r'((^\d\s\w{1,}\s|^\w{1,}\s)(\d{1,2}:)(\d{1,2}-\d{1,2}|\d{1,2}))', result.value): ui.notify("Verse was input incorrectly.")