nicegui/website/more_documentation/page_documentation.py

from nicegui import ui

from ..documentation_tools import text_demo


def main_demo() -> None:
    @ui.page('/other_page')
    def other_page():
        ui.label('Welcome to the other side')
        ui.link('Back to main page', '/documentation#page')

    @ui.page('/dark_page', dark=True)
    def dark_page():
        ui.label('Welcome to the dark side')
        ui.link('Back to main page', '/documentation#page')

    ui.link('Visit other page', other_page)
    ui.link('Visit dark page', dark_page)


def more() -> None:
    @text_demo('Pages with Path Parameters', '''
        Page routes can contain parameters like [FastAPI](https://fastapi.tiangolo.com/tutorial/path-params/>).
        If type-annotated, they are automatically converted to bool, int, float and complex values.
        If the page function expects a `request` argument, the request object is automatically provided.
        The `client` argument provides access to the websocket connection, layout, etc.
    ''')
    def page_with_path_parameters_demo():
        @ui.page('/repeat/{word}/{count}')
        def page(word: str, count: int):
            ui.label(word * count)

        ui.link('Say hi to Santa!', 'repeat/Ho! /3')

    @text_demo('Wait for Client Connection', '''
        To wait for a client connection, you can add a `client` argument to the decorated page function
        and await `client.connected()`.
        All code below that statement is executed after the websocket connection between server and client has been established.

        For example, this allows you to run JavaScript commands; which is only possible with a client connection (see [#112](https://github.com/zauberzeug/nicegui/issues/112)).
        Also it is possible to do async stuff while the user already sees some content.
    ''')
    def wait_for_connected_demo():
        import asyncio

        from nicegui import Client

        @ui.page('/wait_for_connection')
        async def wait_for_connection(client: Client):
            ui.label('This text is displayed immediately.')
            await client.connected()
            await asyncio.sleep(2)
            ui.label('This text is displayed 2 seconds after the page has been fully loaded.')
            ui.label(f'The IP address {client.ip} was obtained from the websocket.')

        ui.link('wait for connection', wait_for_connection)