mirror of
https://github.com/jwdeveloper/TikTokLiveJava.git
synced 2026-02-28 09:19:40 -05:00
Changes:
- TikTokHttpResponseEvent - Fixed User attributes in CommentEvent - Redesign .onMapper method
This commit is contained in:
JW
135
Tools-EventsWebViewer/src/main/resources/public/index.css
Normal file
135
Tools-EventsWebViewer/src/main/resources/public/index.css
Normal file
@@ -0,0 +1,135 @@
|
||||
body, html {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
color: whitesmoke;
|
||||
}
|
||||
.header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.connect-btn
|
||||
{
|
||||
width: 100%;
|
||||
}
|
||||
.dropdown
|
||||
{
|
||||
width: 100%;
|
||||
}
|
||||
.dropdown-toggle
|
||||
{
|
||||
background-color: #2c2c2c;
|
||||
border-color: #2c2c2c;
|
||||
width: 100%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.btn-primary
|
||||
{
|
||||
background-color: #2c2c2c;
|
||||
border-color: #2c2c2c;
|
||||
}
|
||||
.btn-primary:hover
|
||||
{
|
||||
background-color: #474747;
|
||||
border-color: #474747;
|
||||
}
|
||||
.margin
|
||||
{
|
||||
margin-top: 2em;
|
||||
}
|
||||
.form
|
||||
{
|
||||
|
||||
padding: 1em;
|
||||
|
||||
border-bottom: 2px solid #676767
|
||||
}
|
||||
.form-label
|
||||
{
|
||||
color: whitesmoke;
|
||||
}
|
||||
.editor-parent
|
||||
{
|
||||
height: 2000px;
|
||||
}
|
||||
.editor-container
|
||||
{
|
||||
resize: vertical;
|
||||
overflow: auto;
|
||||
}
|
||||
.list-group-item:hover
|
||||
{
|
||||
background-color: #474747;
|
||||
color: azure;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.list-group-item
|
||||
{
|
||||
background-color: #2c2c2c;
|
||||
color: azure;
|
||||
border-color: #252424;
|
||||
}
|
||||
.margin-left
|
||||
{
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
.content {
|
||||
flex-grow: 1; /* Takes up the remaining space */
|
||||
display: flex;
|
||||
}
|
||||
.col-md-10, .col-md-2 {
|
||||
padding: 0; /* Remove default padding */
|
||||
height: 100%;
|
||||
}
|
||||
.scrollable-element {
|
||||
|
||||
overflow-y: scroll; /* Enable vertical scrollbar */
|
||||
/* Other styles as needed */
|
||||
scrollbar-width: thin;
|
||||
height: 800px;
|
||||
scrollbar-color: #275c9c #000000; /* thumb and track color */
|
||||
}
|
||||
.dropdown-menu
|
||||
{
|
||||
width: 100%;
|
||||
background-color: #414040;
|
||||
color: whitesmoke;
|
||||
}
|
||||
.dropdown-item
|
||||
{
|
||||
-webkit-user-select: none; /* For webkit browsers */
|
||||
-moz-user-select: none; /* For Firefox */
|
||||
-ms-user-select: none; /* For Microsoft browsers */
|
||||
user-select: none; /* Standard syntax */
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
.dropdown-item:hover
|
||||
{
|
||||
background-color: #696868;
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
.dropdown-item:hover
|
||||
{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px; /* Set width of the scrollbar */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #1e1e23; /* Track color */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #123054; /* Thumb color */
|
||||
border-radius: 5px; /* Rounded corners */
|
||||
}
|
||||
@@ -3,252 +3,132 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
|
||||
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
|
||||
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
|
||||
crossorigin="anonymous"></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<title>Bootstrap Styled Javalin App</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js" type="text/javascript" charset="utf-8"></script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
|
||||
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js" type="text/javascript"
|
||||
charset="utf-8"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.30.1/min/vs/editor/editor.main.css">
|
||||
<link rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.30.1/min/vs/editor/editor.main.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.30.1/min/vs/loader.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #121212; /* Dark background */
|
||||
}
|
||||
#app {
|
||||
height: 100vh; /* 100% of the viewport height */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.btn-primary
|
||||
{
|
||||
background-color: #2c2c2c;
|
||||
border-color: #2c2c2c;
|
||||
}
|
||||
.btn-primary:hover
|
||||
{
|
||||
background-color: #474747;
|
||||
border-color: #474747;
|
||||
}
|
||||
|
||||
#editor {
|
||||
overflow-y: auto;
|
||||
white-space: pre-wrap;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.editor-container
|
||||
{
|
||||
|
||||
padding: 10em;
|
||||
}
|
||||
.list-group-item:hover
|
||||
{
|
||||
background-color: #474747;
|
||||
color: azure;
|
||||
cursor: pointer;
|
||||
}
|
||||
.list-group-item
|
||||
{
|
||||
background-color: #2c2c2c;
|
||||
color: azure;
|
||||
border-color: #252424;
|
||||
}
|
||||
.content {
|
||||
flex-grow: 1; /* Takes up the remaining space */
|
||||
display: flex;
|
||||
}
|
||||
.col-md-10, .col-md-2 {
|
||||
padding: 0; /* Remove default padding */
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.30.1/min/vs/editor/editor.main.css">
|
||||
|
||||
<!-- Load Monaco Editor's main loader script -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.30.1/min/vs/loader.min.js"></script>
|
||||
|
||||
<!-- Configure the loader -->
|
||||
<script>
|
||||
require.config({
|
||||
paths: {'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.30.1/min/vs'}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Load the editor -->
|
||||
<script>
|
||||
var editor;
|
||||
require(['vs/editor/editor.main'], function() {
|
||||
editor = monaco.editor.create(document.getElementById('editor'), {
|
||||
value: [
|
||||
'function x() {',
|
||||
'\tconsole.log("Hello world!");',
|
||||
'}'
|
||||
].join('\n'),
|
||||
language: 'json',
|
||||
theme: 'vs-dark'
|
||||
});
|
||||
editor.onDidChangeModelContent(function () {
|
||||
console.log("hello")
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.30.1/min/vs/editor/editor.main.css">
|
||||
<link rel="stylesheet" , href="index.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.30.1/min/vs/loader.min.js"></script>
|
||||
<script>
|
||||
require.config({
|
||||
paths: {'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.30.1/min/vs'}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
var editor;
|
||||
var editor2;
|
||||
require(['vs/editor/editor.main'], function () {
|
||||
editor = monaco.editor.create(document.getElementById('editor'), {
|
||||
value: [
|
||||
'Hello world!',
|
||||
].join('\n'),
|
||||
language: 'json',
|
||||
theme: 'vs-dark',
|
||||
automaticLayout: true
|
||||
});
|
||||
|
||||
editor2 = monaco.editor.create(document.getElementById('editor2'), {
|
||||
value: [
|
||||
'Hello world!',
|
||||
].join('\n'),
|
||||
language: 'json',
|
||||
theme: 'vs-dark',
|
||||
automaticLayout: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-dark">
|
||||
|
||||
<div id="app" class="container-fluid mt-5">
|
||||
<div >
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label">Name:</label>
|
||||
<input type="text" id="name" name="name" class="form-control">
|
||||
<body class="container-fluid bg-dark">
|
||||
|
||||
|
||||
<div class="row ">
|
||||
<div class="col-2 ">
|
||||
<div class="form margin">
|
||||
<h5 >Data collector</h5>
|
||||
<div class="form-group ">
|
||||
<label for="name" class="form-label">TikTok username</label>
|
||||
<input type="text" id="name" class="form-control">
|
||||
</div>
|
||||
<button type="button" onclick="connect()" class="btn btn-primary">Connect</button>
|
||||
<button type="button" onclick="disconnect()" class="btn btn-primary">Disconnect</button>
|
||||
<button onclick="showEvents()" class="btn btn-primary">Show Events</button>
|
||||
</div>
|
||||
|
||||
<div class="content row mt-5">
|
||||
|
||||
<div class="col-md-2 ">
|
||||
<ul id="eventList" class="list-group" style="max-height: 100%; overflow-y: auto;">
|
||||
<!-- List items will be added dynamically -->
|
||||
<div class="form-group ">
|
||||
<label class="form-label">SessionTag</label>
|
||||
<input type="text" id="sessionTag" class="form-control">
|
||||
</div>
|
||||
<button id="connectionButton" type="button" class="btn btn-primary mt-3 connect-btn">Connect </button>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="dropdown mt-3" id="usersDropDown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="usersDropDownButton"
|
||||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
User
|
||||
</button>
|
||||
<div id="userDropdownContent" class="dropdown-menu" aria-labelledby="usersDropDownButton">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown mt-3" id="sessionTagDropDown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="sessionTagDropDownButton"
|
||||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
SessionTag
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="sessionTagDropDownButton">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown mt-3" id="dataTypeDropDown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
|
||||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Data Type
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<ul id="dataList" class="list-group scrollable-element">
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-10 editor-container ">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul id="pages" class="pagination">
|
||||
<li class="page-item btn-primary"><a class="page-link" href="#">Previous</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div id="editor"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container mt-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
|
||||
<div class="col-10 margin">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul id="pages" class="pagination">
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="row editor-parent">
|
||||
<div class="col-6 editor-container" id="editor"></div>
|
||||
<div class="col-6 editor-container" id="editor2"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
async function connect() {
|
||||
let name = document.getElementById('name').value;
|
||||
// name = "bangbetmenygy"
|
||||
let response = await fetch(`http://localhost:8001/tiktok/connect?name=${name}`);
|
||||
let greeting = await response.text();
|
||||
console.log("connect",greeting);
|
||||
connected = true;
|
||||
}
|
||||
async function disconnect() {
|
||||
let response = await fetch(`http://localhost:8001/tiktok/disconnect`);
|
||||
let greeting = await response.text();
|
||||
console.log("disconnect",greeting);
|
||||
connected = false;
|
||||
}
|
||||
|
||||
async function loadMessage(event)
|
||||
{
|
||||
let response = await fetch(`http://localhost:8001/tiktok/events/message?eventName=${event}`);
|
||||
let json = await response.text();
|
||||
let root= JSON.parse(json);
|
||||
editor.setValue(root.content);
|
||||
}
|
||||
|
||||
async function loadMessageLink(link)
|
||||
{
|
||||
let response = await fetch(link);
|
||||
let json = await response.text();
|
||||
let root= JSON.parse(json);
|
||||
editor.setValue(root.content);
|
||||
}
|
||||
|
||||
async function loadPagination(event)
|
||||
{
|
||||
let response = await fetch(`http://localhost:8001/tiktok/events/pages?eventName=${event}`);
|
||||
let json = await response.text();
|
||||
let object = JSON.parse(json);
|
||||
let pages = object.links;
|
||||
console.log("PAGES: ",pages)
|
||||
$("#pages").empty();
|
||||
$.each(pages, function(index, element) {
|
||||
let content = $('<button>',{
|
||||
class: 'btn btn-primary',
|
||||
text: index
|
||||
}).click(async function()
|
||||
{
|
||||
await loadMessageLink(element);
|
||||
console.log(editor)
|
||||
});
|
||||
$("#pages").append(content);
|
||||
});
|
||||
}
|
||||
|
||||
async function showEvents() {
|
||||
let response = await fetch(`http://localhost:8001/tiktok/events`);
|
||||
let json = await response.text();
|
||||
console.log("events:",json);
|
||||
let events= JSON.parse(json);
|
||||
|
||||
$("#eventList").empty();
|
||||
$.each(events, function(index, event) {
|
||||
let listItem = $('<li>', {
|
||||
class: 'list-group-item',
|
||||
text: event
|
||||
}).click(async function()
|
||||
{
|
||||
await loadMessage(event);
|
||||
await loadPagination(event);
|
||||
});
|
||||
$("#eventList").append(listItem);
|
||||
});
|
||||
}
|
||||
|
||||
async function loop()
|
||||
{
|
||||
if(!connected)
|
||||
{
|
||||
return;
|
||||
}
|
||||
console.log("updating");
|
||||
await showEvents();
|
||||
}
|
||||
|
||||
var connected = false;
|
||||
var paginationIndex = 0;
|
||||
var maxPages = 10;
|
||||
var pages = [];
|
||||
setInterval(loop, 1000)
|
||||
showEvents()
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<script src="index.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
|
||||
210
Tools-EventsWebViewer/src/main/resources/public/index.js
Normal file
210
Tools-EventsWebViewer/src/main/resources/public/index.js
Normal file
@@ -0,0 +1,210 @@
|
||||
var dataType = "messages"
|
||||
var connected = false;
|
||||
var paginationIndex = 0;
|
||||
var maxPages = 10;
|
||||
var pages = [];
|
||||
var userName = "";
|
||||
|
||||
var port = 8002;
|
||||
var baseUrl = `http://localhost:${port}`
|
||||
|
||||
var data =
|
||||
{
|
||||
dataType: "event",
|
||||
dataName: "",
|
||||
user: "",
|
||||
sessionTag: "",
|
||||
page: 0,
|
||||
|
||||
collector:
|
||||
{
|
||||
connected: false,
|
||||
user: "",
|
||||
sessionTag: "",
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
dropDown("usersDropDown", () => `${baseUrl}/tiktok/users`, async (e) => {
|
||||
data.user = e;
|
||||
update();
|
||||
|
||||
})
|
||||
|
||||
dropDown("dataTypeDropDown", () => `${baseUrl}/tiktok/data-types`, async (e) => {
|
||||
data.dataType = e;
|
||||
update();
|
||||
})
|
||||
|
||||
dropDown("sessionTagDropDown", () => `${baseUrl}/tiktok/sessions?user=${data.user}`, async (e) => {
|
||||
data.sessionTag = e;
|
||||
update();
|
||||
})
|
||||
|
||||
|
||||
function update() {
|
||||
new Promise(async function (resolve, reject) {
|
||||
await updateAsync();
|
||||
resolve(true);
|
||||
});
|
||||
}
|
||||
|
||||
async function updateAsync() {
|
||||
console.log(data);
|
||||
await updateConnectionButton()
|
||||
await updateDataNamesList(async (dataName) => {
|
||||
data.dataName = dataName;
|
||||
data.page = 0;
|
||||
await updateContent();
|
||||
await updatePagination(async (page, link) => {
|
||||
data.page = page;
|
||||
let response = await fetch(link);
|
||||
let json = await response.text();
|
||||
console.log(link)
|
||||
let root = JSON.parse(json);
|
||||
editor.setValue(root.content);
|
||||
|
||||
if(data.dataType === 'message')
|
||||
{
|
||||
console.log("sending proto version")
|
||||
let response2 = await fetch(`${link}&asProto=true`);
|
||||
let json2 = await response2.text();
|
||||
let root2 = JSON.parse(json2);
|
||||
editor2.setValue(root2.content);
|
||||
}
|
||||
});
|
||||
});
|
||||
await fetch(`${baseUrl}/tiktok/update?user=${data.user}&session=${data.sessionTag}`);
|
||||
}
|
||||
|
||||
async function updatePagination(onSelect) {
|
||||
let response = await fetch(`${baseUrl}/tiktok/data/pages?name=${data.dataName}&type=${data.dataType}`);
|
||||
let json = await response.text();
|
||||
let object = JSON.parse(json);
|
||||
let pages = object.links;
|
||||
$("#pages").empty();
|
||||
let page = 0;
|
||||
$.each(pages, function (index, element) {
|
||||
|
||||
let currentPage = page;
|
||||
page++;
|
||||
let content = $('<button>', {
|
||||
class: 'btn btn-primary margin-left',
|
||||
text: index
|
||||
}).click(async function () {
|
||||
|
||||
await onSelect(currentPage, element);
|
||||
});
|
||||
$("#pages").append(content);
|
||||
});
|
||||
}
|
||||
|
||||
async function updateContent() {
|
||||
console.log("updating content", data)
|
||||
let response = await fetch(`${baseUrl}/tiktok/data?name=${data.dataName}&type=${data.dataType}&page=${data.page}`);
|
||||
let json = await response.text();
|
||||
let root = JSON.parse(json);
|
||||
editor.setValue(root.content);
|
||||
|
||||
|
||||
if(data.dataType === 'message')
|
||||
{
|
||||
console.log("sending proto version")
|
||||
let response2 = await fetch(`${baseUrl}/tiktok/data?name=${data.dataName}&type=${data.dataType}&page=${data.page}&asProto=true`);
|
||||
let json2 = await response2.text();
|
||||
let root2 = JSON.parse(json2);
|
||||
editor2.setValue(root2.content);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
async function updateDataNamesList(onSelect) {
|
||||
let response = await fetch(`${baseUrl}/tiktok/data/names?type=${data.dataType}`);
|
||||
let json = await response.text();
|
||||
let responce = JSON.parse(json);
|
||||
let element = $("#dataList");
|
||||
console.log(responce)
|
||||
element.empty();
|
||||
$.each(responce, function (index, dataName) {
|
||||
let listItem = $('<li>', {
|
||||
class: 'list-group-item',
|
||||
text: dataName
|
||||
}).click(async function () {
|
||||
onSelect(dataName)
|
||||
});
|
||||
element.append(listItem);
|
||||
});
|
||||
}
|
||||
|
||||
function dropDown(elementId, onUrl, onSelect) {
|
||||
let dropDown = $("#" + elementId);
|
||||
dropDown.on('show.bs.dropdown', async function (e, b) {
|
||||
let response = await fetch(onUrl());
|
||||
let json = await response.text();
|
||||
let values = JSON.parse(json);
|
||||
let optionsElement = dropDown.find("div")
|
||||
optionsElement.empty();
|
||||
let displayElement = dropDown.find("button")
|
||||
for (let value of values) {
|
||||
let dropDownItem = $('<p>', {
|
||||
class: 'dropdown-item',
|
||||
text: value
|
||||
}).click(async function () {
|
||||
displayElement.text(value)
|
||||
onSelect(value)
|
||||
});
|
||||
optionsElement.append(dropDownItem)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
setInterval(() => {
|
||||
new Promise(async (a, b) => {
|
||||
await updateConnectionButton()
|
||||
});
|
||||
}, 1000)
|
||||
|
||||
|
||||
$("#connectionButton").on('click', async (a) => {
|
||||
|
||||
if (!data.collector.connected) {
|
||||
console.log("connecting")
|
||||
await connect()
|
||||
} else {
|
||||
console.log("disconnecting")
|
||||
await disconnect()
|
||||
}
|
||||
});
|
||||
|
||||
async function updateConnectionButton() {
|
||||
let button = $("#connectionButton");
|
||||
let response = await fetch(`${baseUrl}/tiktok/status`);
|
||||
let json = await response.text();
|
||||
let values = JSON.parse(json);
|
||||
console.log(values)
|
||||
data.collector.connected = values;
|
||||
if (data.collector.connected) {
|
||||
button.text("disconnect");
|
||||
} else {
|
||||
button.text("connect");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
async function connect() {
|
||||
let name = document.getElementById('name').value;
|
||||
let session = document.getElementById('sessionTag').value;
|
||||
data.collector.name = name
|
||||
data.collector.sessionTag =session
|
||||
|
||||
let response = await fetch(`${baseUrl}/tiktok/connect?name=${data.collector.name}&session=${data.collector.sessionTag}`);
|
||||
let greeting = await response.text();
|
||||
}
|
||||
|
||||
async function disconnect() {
|
||||
let response = await fetch(`${baseUrl}/tiktok/disconnect`);
|
||||
let greeting = await response.text();
|
||||
}
|
||||
|
||||
update()
|
||||
Reference in New Issue
Block a user