gemstone-tool-generator/template-frontend-project/src/ui/canvas.html

Gemstone Tool plugin for Generator Tools of Gemstone JavaScript Technology Stack

<!--
    {{ name }} ~ {{ description }}
    Copyright {{ creation_date | date("YYYY") }} (c) {{ authorName }} ({{ authorUrl }})
    Licensed under {{ license }} (https://spdx.org/licenses/{{ license }})
-->

<div class="canvas" scope="canvas">
    <img class="logo" src="../app.svg" alt="Gemstone Logo"/>
    <div>Hello, Gemstone World!</div>
    <form class="form-inline">
        <span class="input">{{ '{{ $t("input") }}' }}:
            <input type="text" class="form-control" v-model="dataInput"/>
        </span> &rarr;
        <span class="output">{{ '{{ $t("output") }}' }}:
            {{ '{{ dataOutput }}' }}
        </span>
    </form>
    <table class="params">
        <tr><td><i class="fa fa-home"></i>    </td><td>config-env:       </td><td><tt>{{ '{{ gsConfig.env }}' }}</tt></td></tr>
        <tr><td><i class="fa fa-tags"></i>    </td><td>config-tag:       </td><td><tt>{{ '{{ gsConfig.tag || "(none)" }}' }}</tt></td></tr>
        <tr><td><i class="fa fa-hashtag"></i> </td><td>config-hash:      </td><td><tt>{{ '{{ gsConfig.hash }}' }}</tt></td></tr>
        <tr><td><i class="fa fa-calendar"></i></td><td>config-time:      </td><td><tt>{{ '{{ gsConfig.time }}' }}</tt></td></tr>
        <tr><td><i class="fa fa-compass"></i> </td><td>stage-orientation:</td><td><tt>{{ '{{ gsStage.orientation }}' }}</tt></td></tr>
        <tr><td><i class="fa fa-expand"></i>  </td><td>stage-size:       </td><td><tt>{{ '{{ gsStage.size }}' }}</tt></td></tr>
        <tr><td><i class="fa fa-eye"></i>     </td><td>theme:            </td><td><tt>{{ '{{ gsTheme }}' }}</tt></td></tr>
        <tr><td><i class="fa fa-language"></i></td><td>lang:             </td><td>
            <select v-model="gsLang">
                <option value="en"><tt>en</tt>: English</option>
                <option value="de"><tt>de</tt>: German</option>
            </select>
        </td></tr>
    </table>
    <button class="btn btn-default shutdown" v-on:click="eventShutdown">
        {{ '{{ $t("shutdown") }}' }}
    </button>
</div>