sgammon/GUST

/*
 * Copyright © 2020, The Gust Framework Authors. All rights reserved.
 *
 * The Gust/Elide framework and tools, and all associated source or object computer code, except where otherwise noted,
 * are licensed under the Zero Prosperity license, which is enclosed in this repository, in the file LICENSE.txt. Use of
 * this code in object or source form requires and implies consent and agreement to that license in principle and
 * practice. Source or object code not listing this header, or unless specified otherwise, remain the property of
 * Elide LLC and its suppliers, if any. The intellectual and technical concepts contained herein are proprietary to
 * Elide LLC and its suppliers and may be covered by U.S. and Foreign Patents, or patents in process, and are protected
 * by trade secret and copyright law. Dissemination of this information, or reproduction of this material, in any form,
 * is strictly forbidden except in adherence with assigned license requirements.
 */
{namespace todolist.home requirecss="todolist.styles,todolist.mdl"}


/**
 * Render the layout shared by all Todolist pages. This adds the page navigation, the header, and the main app footer.
 * Most of the interaction here is static.
 */
{template .layout visibility="private"}
  {@param page: html} /** Content to inject for this individual page. */

  {let $title kind="text"}
      {msg desc='Homepage title.'}Todolist{/msg}
  {/let}

  {call gust.page.wrap}
    {param bodyClass: css('todolist') /}
    {param content kind="html"}
        <div id="{xid('wrap')}" class="{css('mdl-layout')} {css('mdl-js-layout')}">
          <header class="{css('mdl-layout__header')} {css('mdl-layout__header--transparent')}">
            <div class="{css('mdl-layout__header-row')}">
              <span class="{css('mdl-layout-title')}">{$title}</span>
              <div class="{css('mdl-layout-spacer')}"></div>
              <nav class="{css('mdl-navigation')}">
                <a class="{css('mdl-navigation__link')}" href="#{xid('link')}">Link</a>
                <a class="{css('mdl-navigation__link')}" href="#{xid('link')}">Link</a>
                <a class="{css('mdl-navigation__link')}" href="#{xid('link')}">Link</a>
                <a class="{css('mdl-navigation__link')}" href="#{xid('link')}">Link</a>
              </nav>
            </div>
          </header>
          <div class="{css('mdl-layout__drawer')}">
            <span class="{css('mdl-layout-title')}">{$title}</span>
            <nav class="{css('mdl-navigation')}">
              <a class="{css('mdl-navigation__link')}" href="#{xid('link')}">Link</a>
              <a class="{css('mdl-navigation__link')}" href="#{xid('link')}">Link</a>
              <a class="{css('mdl-navigation__link')}" href="#{xid('link')}">Link</a>
              <a class="{css('mdl-navigation__link')}" href="#{xid('link')}">Link</a>
            </nav>
          </div>
          <main class="{css('mdl-layout__content')}">
              {$page}
          </main>
        </div>
    {/param}
  {/call}
{/template}


/**
 * Render the homepage for Todolist. There are a few modes to the homepage, depending on the user's authentication
 * state. If they are logged-in when they visit the page, we render their current list of tasks - if not, we render a
 * toy sample that is usable anonymously.
 *
 * The client-side app handles re-hydration and state transitions from anonymous-to-logged-in, and vice-versa. This
 */
{template .page}
    {@param? name: string}  /** Name to say hello to for our simple salutation. Defaults to 'World'. */

    {call .layout}
        {param page kind="html"}
            <b>Hello, <span id="name">{$name ?: 'World'}</span>!</b>
            <b id="result">Running ping...</b>
        {/param}
    {/call}
{/template}