line-simulator
Version:
LINE Simulator for Bot developer
717 lines (705 loc) • 40.2 kB
HTML
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/site.css">
<title>LINE Simulator</title>
</head>
<body>
<div class="col-md-12">
<!-- menu -->
<div class="menu">
<div>
<i class="fa fa-search-plus fa-inverse fa-3x" onclick="zoomin();">
<span>zoom in</span>
</i>
</div>
<div>
<i class="fa fa-search-minus fa-inverse fa-3x" onclick=zoomout();>
<span>zoom out</span>
</i>
</div>
<div>
<i class="fa fa-refresh fa-inverse fa-3x" onclick=refresh();>
<span>clear the chat item</span>
</i>
</div>
<div>
<i class="fa fa-gear fa-inverse fa-3x" onclick=toggleSettings();>
<span>change settings such as user id, server address.</span>
</i>
</div>
<div>
<i class="fa fa-keyboard-o fa-inverse fa-3x" onclick="toggleKeyboard();">
<span>Open/Close keyboard.</span>
</i>
</div>
<div>
<i class="fa fa-caret-square-o-right fa-inverse fa-3x" onclick="toggleMoreMenu();">
<span>Send non-text messages.</span>
</i>
</div>
<div>
<i class="fa fa-picture-o fa-inverse fa-3x" onclick="toggleRichMenu();">
<span>Display Rich Menu for the user.</span>
</i>
</div>
<div>
<i class="fa fa-download fa-inverse fa-3x" onclick="saveChat();">
<span>Save Chat Data</span>
</i>
</div>
<div>
<i class="fa fa-upload fa-inverse fa-3x" onclick="openFileDialogForLoadJson();">
<span>Load Chat Data</span>
</i>
<input type=file id="loadJsonFile" style="display:none" />
</div>
</div>
<!-- LINE client simulator -->
<div class="simulator">
<div class="chat-area">
<div class="chat-header">
<div>
<div class="col-xs-4">line
<span>
<i class="fa fa-wifi"></i>
</span>
</div>
<div class="col-xs-4 time"></div>
<div class="col-xs-4 icon-right">
<span>
<i class="fa fa-location-arrow header-icon"></i>
<i class="fa fa-bluetooth-b header-icon"></i>
<i class="fa fa-battery-2 header-icon"></i>
</span>
</div>
</div>
<div>
<div class="col-xs-3 icon-left">
<span>
<i class="fa fa-angle-left fa-2x header-icon"></i>
</span>
</div>
<div class="col-xs-6 bot-title">
bot
</div>
<div class="col-xs-3 icon-right">
<span>
<i class="fa fa-home header-icon"></i>
<i class="fa fa-angle-down fa-2x header-icon"></i>
</span>
</div>
</div>
</div>
<div class="chat-thread">
<!-- <ul class="chat-body"> -->
<ul>
<li class="chat-top-space"></li>
</ul>
</div>
<div class="chat-richmenu">
</div>
<div class="chat-box">
<div class="chat-bar visible">
<i class="fa fa-keyboard-o fa-inverse fa-lg" onclick="toggleKeyboard();"></i>
<span class="fa-stack" onclick="toggleMoreMenu();">
<i class="fa fa-square fa-stack-2x fa-inverse"></i>
<i class="fa fa-angle-right fa-stack-1x"></i>
</span>
<span>
<input type="text" class="chat-textarea" id="message-to-send" placeholder="Enter a message"></input>
</span>
<a onclick="sendFromChatBox()">
<i class="fa fa-paper-plane fa-inverse"></i>
</a>
</div>
<div class="chat-bar-richmenu">
<i class="fa fa-keyboard-o fa-inverse fa-lg" onclick="toggleKeyboard();"></i>
<div class="chat-bar-richmenu-item" onclick="toggleRichMenu();"></div>
<div class="chat-bar-richmenu-item">Menu</div>
</div>
</div>
<div class="chat-keyboard">
<img src="/img/keyboard.png" />
</div>
<!-- end chat-message -->
</div>
</div>
<!-- Send media, location, sticker, etc. -->
<div class="moreMenu hide">
<h4>Send media, location, system event, etc</h4>
<hr>
<div class="row">
<h4>Send file</h4>
<div class="col-md-10">
<input type=file id="filename" directory />
</div>
<a class="col-md-2 btn btn-sm btn-success" onclick="uploadFile()">Upload</a>
</div>
<div class="row">
<h4>Send Sticker</h4>
<div class="col-md-10">
<div class="col-md-3 row">PackageId: </div>
<div class="col-md-9">
<input type=text placeholder="PackageId" id="packageId" value="" />
</div>
<div class="col-md-3 row">StickerId: </div>
<div class="col-md-9">
<input type=text placeholder="StickerId" id="stickerId" value="" />
</div>
</div>
<a class="col-md-2 btn btn-sm btn-success" onclick="sendSticker()">Send</a>
</div>
<div class="row">
<h4>Send Address</h4>
<div class="col-md-10">
<div class="col-md-3 row">Title: </div>
<div class="col-md-9">
<input type=text placeholder="Title" id="title" value="" />
</div>
<div class="col-md-3 row">Address: </div>
<div class="col-md-9">
<input type=text placeholder="Address" id="address" value="" />
</div>
<div class="col-md-3 row">Latitude: </div>
<div class="col-md-9">
<input type=text placeholder="Latitude" id="latitude" value="" />
</div>
<div class="col-md-3 row">Longitude: </div>
<div class="col-md-9">
<input type=text placeholder="Longitude" id="longitude" value="" />
</div>
</div>
<a class="col-md-2 btn btn-sm btn-success" onclick="sendAddress()">Send</a>
</div>
<div class="row">
<h4>System Messages</h4>
<div class="col-md-12">
<a class="btn btn-primary" onclick="sendFollow()">Follow</a>
<a class="btn btn-primary" onclick="sendUnfollow()">Unfollow</a>
<a class="btn btn-primary" onclick="sendJoin()">Join</a>
<a class="btn btn-primary" onclick="sendLeave()">Leave</a>
</div>
</div>
<div class="row">
<h4>Beacon</h4>
<div class="col-md-10">
<div class="col-md-3 row">HWID: </div>
<div class="col-md-9">
<input type=text placeholder="HWID" id="beacon_hwid" value="" />
</div>
<div class="col-md-3 row">Type: </div>
<select class="col-md-8" name="beacon_hwid" size="1" style="font-size:18px;margin-left:15px;color:blacK">
<option value="enter">enter</option>
<option value="leave">leave</option>
<option value="banner">banner</option>
</select>
</div>
<a class="col-md-2 btn btn-sm btn-success" onclick="sendBeacon()">Send</a>
</div>
</div>
<!-- Seeting area -->
<div class="settings">
<h4>You can get UserId, channelSecret and channelToken from
<a style="color:white" href="https://developers.line.me/console/" target="_blank">LINE Developer Console</a>
</h4>
<div class="row">
<h4>UserId:</h4>
<div class="col-md-8">
<input type=text placeholder="U21d2cd1795be4caa1a32dxxxxxxxx" id="userId" value="" />
</div>
</div>
<div class="row">
<h4>channelSecret:</h4>
<div class="col-md-8">
<input type=text placeholder="Channel Secret" id="channelSecret" value="" />
</div>
</div>
<div class="row">
<h4>channelToken:</h4>
<div class="col-md-8">
<input type=text placeholder="Channel Token" id="channelToken" value="" />
</div>
</div>
<div class="row">
<h4>Bot API Server Address:</h4>
<div class="col-md-8">
<input type=text placeholder="http://localhost:1590/api/linebot" id="botAPIAddress" value="" />
</div>
</div>
<div class="update">
<a class="col-md-2 btn btn-success" onclick="setSettings()">CONNECT</a>
<a class="col-md-2 col-md-offset-1 btn btn-primary" onclick="setPocMode(true)">POC Mode</a>
<div class="col-md-12 warning"></div>
</div>
</div>
<!-- JSON Raw Data -->
<div class="chat-raw hide" tabindex="0">
<i class="fa fa-window-close fa-inverse fa-2x" onclick="closeChatRaw();"></i>
<pre id="rawdata">
</pre>
</div>
<!-- Poc Send from Bot -->
<div class="bot-chat hide">
<h4>[Send message as bot. POC only]</h4>
<!-- menus -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#text" aria-controls="home" role="tab" data-toggle="tab">Text</a>
</li>
<li role="presentation">
<a href="#media" aria-controls="profile" role="tab" data-toggle="tab">Media</a>
</li>
<li role="presentation">
<a href="#sticker" aria-controls="messages" role="tab" data-toggle="tab">Sticker</a>
</li>
<li role="presentation">
<a href="#location" aria-controls="messages" role="tab" data-toggle="tab">Location</a>
</li>
<li role="presentation">
<a href="#confirm" aria-controls="settings" role="tab" data-toggle="tab">Confirm</a>
</li>
<li role="presentation">
<a href="#buttons" aria-controls="settings" role="tab" data-toggle="tab">Buttons</a>
</li>
<li role="presentation">
<a href="#carousel" aria-controls="settings" role="tab" data-toggle="tab">Carousel</a>
</li>
<li role="presentation">
<a href="#imagecarousel" aria-controls="settings" role="tab" data-toggle="tab">Image Carousel</a>
</li>
</ul>
<!-- content -->
<div class="bot-chat-body tab-content">
<!-- Send Text -->
<div role="tabpanel" class="tab-pane active bot-chat-box" id="text">
<div>
<span>
<input type="text" class="chat-textarea" id="message-from-bot" placeholder="Enter a message"></input>
</span>
<a onclick="sendTextFromBot()">
<i class="fa fa-paper-plane fa-inverse"></i>
</a>
</div>
</div>
<!-- Send Media -->
<div role="tabpanel" class="tab-pane bot-chat-box" id="media">
<div class="col-md-10">
<input type=file id="filename-from-bot" directory />
</div>
<a class="col-md-2 btn btn-sm btn-success" onclick="uploadFileFromBot()">Upload</a>
</div>
<!-- Send Sticker -->
<div role="tabpanel" class="tab-pane bot-chat-box" id="sticker">
<div class="col-md-10">
<div class="col-md-3 row">PackageId: </div>
<div class="col-md-9">
<input type=text placeholder="PackageId" id="packageId-from-bot" value="" />
</div>
<div class="col-md-3 row">StickerId: </div>
<div class="col-md-9">
<input type=text placeholder="StickerId" id="stickerId-from-bot" value="" />
</div>
</div>
<a class="col-md-2 btn btn-sm btn-success" onclick="sendStickerFromBot()">Send</a>
</div>
<!-- Send Sticker -->
<div role="tabpanel" class="tab-pane bot-chat-box" id="location">
<div class="col-md-10">
<div class="col-md-3 row">Title: </div>
<div class="col-md-9">
<input type=text placeholder="Title" id="title-from-bot" value="" />
</div>
<div class="col-md-3 row">Address: </div>
<div class="col-md-9">
<input type=text placeholder="Address" id="address-from-bot" value="" />
</div>
<div class="col-md-3 row">Latitude: </div>
<div class="col-md-9">
<input type=text placeholder="Latitude" id="latitude-from-bot" value="" />
</div>
<div class="col-md-3 row">Longitude: </div>
<div class="col-md-9">
<input type=text placeholder="Longitude" id="longitude-from-bot" value="" />
</div>
</div>
<a class="col-md-2 btn btn-sm btn-success" onclick="sendAddressFromBot()">Send</a>
</div>
<!-- Send Confirm -->
<div role="tabpanel" class="tab-pane bot-chat-box" id="confirm">
<div>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2">Confirm Title</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="confirm-title" placeholder="Enter Title">
</div>
</div>
<div class="form-group">
<label class="col-sm-2">Text for Yes</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="confirm-yes" placeholder="Enter Yes Text">
</div>
</div>
<div class="form-group">
<label class="col-sm-2">Text for No</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="confirm-no" placeholder="Enter No Text">
</div>
</div>
</form>
<div>
<a class="btn btn-sm btn-success" onclick="sendConfirmFromBot()">Send</a>
</div>
<hr>
<div class="chat-bot chat-template chat-template-confirm">
<div class="chat-template-confirm-text" id="preview-confirm-title">Title</div>
<div class="chat-template-confirm-yes" id="preview-confirm-yes">Yes</div>
<div class="chat-template-confirm-no" id="preview-confirm-no">No</div>
</div>
</div>
</div>
<!-- Send Buttons -->
<div role="tabpanel" class="tab-pane bot-chat-box" id="buttons">
<div>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2">Buttons Image</label>
<div class="col-sm-8">
<input type=file id="buttons-image" directory />
</div>
<a class="col-sm-2 btn btn-sm btn-success" onclick="removePreviewImage('buttons-image')">Remove</a>
</div>
<div class="form-group">
<label class="col-sm-2">Buttons Title</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="buttons-title" placeholder="Enter Title">
</div>
</div>
<div class="form-group">
<label class="col-sm-2">Buttons Text</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="buttons-text" placeholder="Enter Text">
</div>
</div>
<div class="form-group buttons-actions">
<label class="col-sm-4">Actions 1 Label</label>
<label class="col-sm-4">Actions 1 Data</label>
<label class="col-sm-4">Actions 1 Type</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="buttons-action-1" placeholder="text">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="buttons-action-1-data" placeholder="data">
</div>
<div class="col-sm-4">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="buttons-action-1-type" data-toggle="dropdown">
message
</button>
<ul class="dropdown-menu">
<li>
<a href="#">message</a>
</li>
<li>
<a href="#">postback</a>
</li>
<li>
<a href="#">uri</a>
</li>
</ul>
</div>
</div>
</div>
<div class="form-group buttons-actions">
<label class="col-sm-4">Actions 2 Label</label>
<label class="col-sm-4">Actions 2 Data</label>
<label class="col-sm-4">Actions 2 Type</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="buttons-action-2" placeholder="text">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="buttons-action-2-data" placeholder="data">
</div>
<div class="col-sm-4">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="buttons-action-2-type" data-toggle="dropdown">
message
</button>
<ul class="dropdown-menu">
<li>
<a href="#">message</a>
</li>
<li>
<a href="#">postback</a>
</li>
<li>
<a href="#">uri</a>
</li>
</ul>
</div>
</div>
</div>
<div class="form-group buttons-actions">
<label class="col-sm-4">Actions 3 Label</label>
<label class="col-sm-4">Actions 3 Data</label>
<label class="col-sm-4">Actions 3 Type</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="buttons-action-3" placeholder="text">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="buttons-action-3-data" placeholder="data">
</div>
<div class="col-sm-4">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="buttons-action-3-type" data-toggle="dropdown">
message
</button>
<ul class="dropdown-menu">
<li>
<a href="#">message</a>
</li>
<li>
<a href="#">postback</a>
</li>
<li>
<a href="#">uri</a>
</li>
</ul>
</div>
</div>
</div>
<div class="form-group buttons-actions">
<label class="col-sm-4">Actions 4 Label</label>
<label class="col-sm-4">Actions 4 Data</label>
<label class="col-sm-4">Actions 4 Type</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="buttons-action-4" placeholder="text">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="buttons-action-4-data" placeholder="data">
</div>
<div class="col-sm-4">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="buttons-action-4-type" data-toggle="dropdown">
message
</button>
<ul class="dropdown-menu">
<li>
<a href="#">message</a>
</li>
<li>
<a href="#">postback</a>
</li>
<li>
<a href="#">uri</a>
</li>
</ul>
</div>
</div>
</div>
</form>
<div>
<a class="btn btn-sm btn-success" onclick="sendButtonsFromBot()">Send</a>
</div>
<hr>
<div class="chat-bot chat-template chat-template-buttons">
<div class="chat-template-buttons-image hide" id="preview-buttons-image"></div>
<div class="chat-template-buttons-title hide" id="preview-buttons-title">Button Title</div>
<div class="chat-template-buttons-text" id="preview-buttons-text">Button Text</div>
<div class="chat-template-buttons-button" id="preview-buttons-action-1">action</div>
<div class="chat-template-buttons-button hide" id="preview-buttons-action-2"></div>
<div class="chat-template-buttons-button hide" id="preview-buttons-action-3"></div>
<div class="chat-template-buttons-button hide" id="preview-buttons-action-4"></div>
</div>
</div>
</div>
<!-- Send Carousel -->
<div role="tabpanel" class="tab-pane bot-chat-box" id="carousel">
<div>
<form class="form-horizontal">
<div class="form-group">
<i class="fa fa-plus-square fa-inverse fa-2x" onclick="addColumn();"></i>
<label>Add new column</label>
<i class="fa fa-minus-square fa-inverse fa-2x" onclick="removeColumn();"></i>
<label>Delete selected</label>
</div>
<div class="form-group">
<label class="col-sm-2">Carousel Image</label>
<div class="col-sm-8">
<input type=file id="carousel-image" directory />
</div>
<a class="col-sm-2 btn btn-sm btn-success" onclick="removeCarouselPreviewImage('carousel-image')">Remove</a>
</div>
<div class="form-group">
<label class="col-sm-2">Carousel Title</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="carousel-title" placeholder="Enter Title">
</div>
</div>
<div class="form-group">
<label class="col-sm-2">Carousel Text</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="carousel-text" placeholder="Enter Text">
</div>
</div>
<div class="form-group buttons-actions">
<label class="col-sm-4">Actions 1 Label</label>
<label class="col-sm-4">Actions 1 Data</label>
<label class="col-sm-4">Actions 1 Type</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="carousel-action-1" placeholder="text">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="carousel-action-1-data" placeholder="data">
</div>
<div class="col-sm-4">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="carousel-action-1-type" data-toggle="dropdown">
message
</button>
<ul class="dropdown-menu">
<li>
<a href="#">message</a>
</li>
<li>
<a href="#">postback</a>
</li>
<li>
<a href="#">uri</a>
</li>
</ul>
</div>
</div>
</div>
<div class="form-group buttons-actions">
<label class="col-sm-4">Actions 2 Label</label>
<label class="col-sm-4">Actions 2 Data</label>
<label class="col-sm-4">Actions 2 Type</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="carousel-action-2" placeholder="text">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="carousel-action-2-data" placeholder="data">
</div>
<div class="col-sm-4">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="carousel-action-2-type" data-toggle="dropdown">
message
</button>
<ul class="dropdown-menu">
<li>
<a href="#">message</a>
</li>
<li>
<a href="#">postback</a>
</li>
<li>
<a href="#">uri</a>
</li>
</ul>
</div>
</div>
</div>
<div class="form-group buttons-actions">
<label class="col-sm-4">Actions 3 Label</label>
<label class="col-sm-4">Actions 3 Data</label>
<label class="col-sm-4">Actions 3 Type</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="carousel-action-3" placeholder="text">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="carousel-action-3-data" placeholder="data">
</div>
<div class="col-sm-4">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="carousel-action-3-type" data-toggle="dropdown">
message
</button>
<ul class="dropdown-menu">
<li>
<a href="#">message</a>
</li>
<li>
<a href="#">postback</a>
</li>
<li>
<a href="#">uri</a>
</li>
</ul>
</div>
</div>
</div>
</form>
<a class="btn btn-sm btn-success" onclick="sendCarouselFromBot()">Send</a>
<hr>
<div class="chat-bot chat-icon-only"></div>
<div class="chat-template-carousel" id="preview-chat-template-carousel">
</div>
</div>
</div>
<!-- Send Image Carousel -->
<div role="tabpanel" class="tab-pane bot-chat-box" id="imagecarousel">
<div>
<form class="form-horizontal">
<div class="form-group">
<i class="fa fa-plus-square fa-inverse fa-2x" onclick="addImageColumn();"></i>
<label>Add new image</label>
<i class="fa fa-minus-square fa-inverse fa-2x" onclick="removeImageColumn();"></i>
<label>Delete selected</label>
</div>
<div class="form-group">
<label class="col-sm-2">Carousel Image</label>
<div class="col-sm-8">
<input type=file id="image-carousel-image" directory />
</div>
<a class="col-sm-2 btn btn-sm btn-success" onclick="removeCarouselPreviewImage('carousel-image')">Remove</a>
</div>
<div class="form-group buttons-actions">
<label class="col-sm-4">Actions Label</label>
<label class="col-sm-4">Actions Data</label>
<label class="col-sm-4">Actions Type</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="image-carousel-action" placeholder="text">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="image-carousel-action-data" placeholder="data">
</div>
<div class="col-sm-4">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="image-carousel-action-type" data-toggle="dropdown">
message
</button>
<ul class="dropdown-menu">
<li>
<a href="#">message</a>
</li>
<li>
<a href="#">postback</a>
</li>
<li>
<a href="#">uri</a>
</li>
</ul>
</div>
</div>
</div>
</form>
<a class="btn btn-sm btn-success" onclick="sendImageCarouselFromBot()">Send</a>
<hr>
<div class="chat-bot chat-icon-only"></div>
<div class="chat-template-carousel" id="preview-chat-template-image-carousel">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://use.fontawesome.com/3a3680e4e7.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="js/linesimulator.js"></script>
</body>
</html>