node-red-contrib-line-messaging-api/nodes/loading/loading.html

Node-RED nodes for LINE Messaging API integration. Build LINE Bots easily with visual programming.

<script>
    RED.nodes.registerType('Loading',{
        category: 'LINE',
        color: '#01B301',
        defaults: {
            name: {value:""},
            targetId: {value:"", required:true},
            lineConfig: {value: "", type:"lineConfig", required:true}, //共通のlineConfigを使う
            loadingSeconds: {value: 20}
        },
        inputs:1,
        outputs:1,
        icon: "timer.png",
        align: "right",
        label: function() {
            return this.name||"Loading";
        }
    });
</script>

<script type="text/html" data-template-name="Loading">
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> <span data-i18n="loading.label.name">名前</span></label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>

    <!-- LINE Config -->
    <div class="form-row">
        <label for="node-input-lineConfig">
            <i class="fa fa-tag"></i>
            <span data-i18n="loading.label.lineConfig">LINE Bot設定</span>
        </label> <input type="text" id="node-input-lineConfig" data-i18n="[placeholder]getProfile.desc.lineConfig">
    </div>

    <!-- chat ID / User ID -->
    <div class="form-row">
        <label for="node-input-targetId"><i class="icon-tag"></i> <span data-i18n="loading.label.targetId">ユーザーID</span></label>
        <input type="text" id="node-input-targetId" placeholder="User Id">
    </div>

    <div class="form-row">
        <label for="node-input-loadingSeconds">
            <i class="icon-timer"></i> <span data-i18n="loading.label.loadingSeconds">ローディング秒数</span>
        </label>
        <select id="node-input-loadingSeconds">
            <option value="5">5</option>
            <option value="10">10</option>
            <option value="15">15</option>
            <option value="20" selected>20</option>
            <option value="25">25</option>
            <option value="30">30</option>
            <option value="35">35</option>
            <option value="40">40</option>
            <option value="45">45</option>
            <option value="50">50</option>
            <option value="55">55</option>
            <option value="60">60</option>
        </select>
    </div>

    <p>
        Displays a loading indicator for the specified duration. Currently supports individual chats only (user IDs starting with 'U'). 
        See <a href="https://developers.line.biz/ja/reference/messaging-api/#display-a-loading-indicator" target="_blank">official documentation</a> for details.
    </p>
</script>

<script type="text/html" data-help-name="Loading">
    <p>Displays a loading indicator animation to LINE users.</p>
</script>