220 lines
11 KiB
HTML
220 lines
11 KiB
HTML
{{template "header"}}
|
|
<div class="container">
|
|
<div class="row" style="margin-top: 5%">
|
|
<div class="col s8 offset-s3">
|
|
<ul class="tabs" id="tab">
|
|
<li class="tab col s3"><a class="active" href="#tab1">{{.Locale.TabSettings}}</a></li>
|
|
<li class="tab col s3"><a href="#tab2">{{.Locale.TabBots}}</a></li>
|
|
<li class="tab col s3"><a href="#tab3">{{.Locale.TabMapping}}</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col s8 offset-s3">
|
|
<p id="msg"></p>
|
|
</div>
|
|
<div id="tab1" class="col s12">
|
|
<div class="row" style="margin-top: 5%">
|
|
<form id="save" class="col s8 offset-s2" action="/save/" method="POST">
|
|
<input name="clientId" type="hidden" value="{{.Conn.ClientID}}">
|
|
<div class="row">
|
|
<div class="input-field col s12">
|
|
<input placeholder="API Url" id="api_url" name="api_url" type="text" class="validate" value="{{.Conn.APIURL}}">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="input-field col s12">
|
|
<input placeholder="API Key" id="api_key" name="api_key" type="text" class="validate" value="{{.Conn.APIKEY}}">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="input-field col s6 offset-s5">
|
|
<button class="btn waves-effect waves-light red lighten-1" type="submit" name="action">
|
|
{{.Locale.ButConnect}}
|
|
<i class="material-icons right">sync</i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div id="tab2" class="col s12">
|
|
<div class="row" style="margin-top: 5%">
|
|
<form id="add-bot" class="col s8 offset-s2" action="/add-bot/" method="POST">
|
|
<input name="clientId" type="hidden" value="{{.Conn.ClientID}}">
|
|
<div class="row">
|
|
<div class="input-field col s11">
|
|
<input placeholder="{{.Locale.TableToken}}" id="token" name="token" type="text" class="validate">
|
|
</div>
|
|
<div class="input-field col s1">
|
|
<button class="btn btn-meddium waves-effect waves-light red" type="submit" name="action">
|
|
<i class="material-icons">add</i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{{if .Bots}}
|
|
<table class="col s8 offset-s2">
|
|
<thead>
|
|
<tr>
|
|
<th>{{.Locale.TableName}}</th>
|
|
<th>{{.Locale.TableToken}}</th>
|
|
<th style="text-align: right">{{.Locale.TableActivity}}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{range .Bots}}
|
|
<tr>
|
|
<td>{{.Name}}</td>
|
|
<td>{{.Token}}</td>
|
|
<td>
|
|
<button class="activity-bot btn btn-meddium waves-effect waves-light red" type="submit" name="action" style="float: right"
|
|
data-activity="{{.Active}}" data-id="{{.Token}}">
|
|
<i class="material-icons">{{if .Active}}stop{{else}}play_arrow{{end}}</i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
<div id="tab3" class="col s12">
|
|
<div class="row" style="margin-top: 5%">
|
|
{{ $sites := .Sites }}
|
|
{{ $bots := .Bots }}
|
|
{{ $locale := .Locale }}
|
|
{{if and $sites $bots}}
|
|
<table class="col s8 offset-s2">
|
|
<thead>
|
|
<tr>
|
|
<th>{{.Locale.MapSites}}</th>
|
|
<th>{{.Locale.TabBots}}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{range $site := $sites}}
|
|
<tr>
|
|
<td>{{$site.Name}}</td>
|
|
<td>
|
|
<select class="browser-default">
|
|
<option value="" disabled selected>{{$locale.MapOption}}</option>
|
|
{{range $bot := $bots}}
|
|
<option data-code="{{$site.Code}}" data-bot="{{$bot.ID}}">{{$bot.Name}}</option>
|
|
{{end}}
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="row">
|
|
<div class="input-field col s6 offset-s5">
|
|
<button class="btn btn-meddium waves-effect waves-light red" type="submit" id="map-bot">
|
|
{{.Locale.ButConnect}}
|
|
<i class="material-icons">save</i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$("#save").on("submit", function(e) {
|
|
e.preventDefault();
|
|
send(
|
|
$(this).attr('action'),
|
|
formDataToObj($(this).serializeArray()),
|
|
function (data) {
|
|
return 0;
|
|
}
|
|
)
|
|
});
|
|
|
|
$("#add-bot").on("submit", function(e) {
|
|
e.preventDefault();
|
|
send(
|
|
$(this).attr('action'),
|
|
formDataToObj($(this).serializeArray()),
|
|
function (data) {
|
|
location.reload();
|
|
}
|
|
)
|
|
});
|
|
|
|
$('.activity-bot').on("click", function(e) {
|
|
let but = $(this);
|
|
send("/activity-bot/",
|
|
{
|
|
token: but.attr("data-id"),
|
|
active: (but.attr("data-activity") == 'true'),
|
|
clientId: $('input[name=clientId]').val(),
|
|
},
|
|
function (data) {
|
|
if (but.attr("data-activity") == 'true') {
|
|
but.find('i').replaceWith('<i class="material-icons">play_arrow</i>');
|
|
but.attr("data-activity", "false")
|
|
} else {
|
|
but.find('i').replaceWith('<i class="material-icons">stop</i>');
|
|
but.attr("data-activity", "true")
|
|
}
|
|
}
|
|
)
|
|
});
|
|
|
|
$('#map-bot').on("click", function(e) {
|
|
let mapping = [];
|
|
|
|
$('select option:selected').each(function() {
|
|
let site_code = $(this).attr("data-code");
|
|
let bot_id = $(this).attr("data-bot");
|
|
if (site_code && bot_id) {
|
|
mapping.push({site_code: site_code, bot_id: bot_id});
|
|
}
|
|
});
|
|
|
|
if (!$.isEmptyObject(mapping)) {
|
|
send("/map-bot/", mapping);
|
|
}
|
|
});
|
|
|
|
function send(url, data, callback) {
|
|
$('#msg').empty();
|
|
$.ajax({
|
|
url: url,
|
|
data: JSON.stringify(data),
|
|
type: "POST",
|
|
success: callback,
|
|
error: function (res){
|
|
if (res.status < 400) {
|
|
if (res.responseText) {
|
|
document.location.replace(
|
|
location.protocol.concat("//").concat(window.location.host) + res.responseText
|
|
);
|
|
}
|
|
} else {
|
|
$('#msg').text(res.responseText);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function formDataToObj(formArray) {
|
|
let obj = {};
|
|
for (let i = 0; i < formArray.length; i++){
|
|
obj[formArray[i]['name']] = formArray[i]['value'];
|
|
}
|
|
return obj;
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
M.Tabs.init(document.getElementById("tab"));
|
|
});
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|