mirror of
https://git.hmsn.ink/kospo/helptalk/api.git
synced 2026-03-20 02:42:58 +09:00
first
This commit is contained in:
225
sample/prod/index.html
Normal file
225
sample/prod/index.html
Normal file
@@ -0,0 +1,225 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
|
||||
<title>Dashboard - NiceAdmin Bootstrap Template</title>
|
||||
<meta content="" name="description">
|
||||
<meta content="" name="keywords">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link href="assets/img/favicon.png" rel="icon">
|
||||
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
|
||||
|
||||
|
||||
<!-- Vendor CSS Files -->
|
||||
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
|
||||
<!-- Template Main CSS File -->
|
||||
<link href="assets/css/style.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="http://talk.kospo.co.kr:3000/static/css/talk.css">
|
||||
|
||||
<!-- =======================================================
|
||||
* Template Name: NiceAdmin
|
||||
* Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/
|
||||
* Updated: Apr 20 2024 with Bootstrap v5.3.3
|
||||
* Author: BootstrapMade.com
|
||||
* License: https://bootstrapmade.com/license/
|
||||
======================================================== -->
|
||||
<script>
|
||||
const works = [
|
||||
{
|
||||
"work_id": "0020",
|
||||
"work_nm": "EP포탈"
|
||||
},
|
||||
{
|
||||
"work_id": "0040",
|
||||
"work_nm": "코스모스"
|
||||
},
|
||||
{
|
||||
"work_id": "0010",
|
||||
"work_nm": "정보보안포탈"
|
||||
},
|
||||
{
|
||||
"work_id": "0060",
|
||||
"work_nm": "외부계정신청"
|
||||
},
|
||||
{
|
||||
"work_id": "0000",
|
||||
"work_nm": "디지털기술도서관"
|
||||
},
|
||||
{
|
||||
"work_id": "0030",
|
||||
"work_nm": "인사노무"
|
||||
},
|
||||
{
|
||||
"work_id": "0050",
|
||||
"work_nm": "연구개발"
|
||||
}
|
||||
]
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<main id="main" class="main">
|
||||
|
||||
<div class="pagetitle">
|
||||
<h1>Dashboard</h1>
|
||||
<nav>
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
|
||||
<li class="breadcrumb-item active">Dashboard</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div><!-- End Page Title -->
|
||||
|
||||
<section class="section dashboard">
|
||||
<div class="row">
|
||||
|
||||
<!-- Left side columns -->
|
||||
<div class="col-lg-12">
|
||||
<div class="row">
|
||||
<div class="col-xxl-3 col-md-3">
|
||||
<div class="card info-card" id="start-wrap">
|
||||
<input type="text" id="talkId" class="form-control" placeholder="톡방 아이디"/>
|
||||
<button type="button" id="talk-start-btn" class="btn btn-primary">시작하기</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-3 col-md-3">
|
||||
<div class="card info-card" id="change-wrap">
|
||||
<input type="text" id="talkId" class="form-control" placeholder="톡방 아이디"/>
|
||||
<select id="work" class="form-control"></select>
|
||||
<button type="button" id="talk-change-btn" class="btn btn-success" >업무변경</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-3 col-md-3">
|
||||
<div class="card info-card" id="sm-change-wrap">
|
||||
<input type="text" id="talkId" class="form-control" placeholder="톡방 아이디"/>
|
||||
<input type="text" id="chgSabun" class="form-control" placeholder="변경될 담당자 사번"/>
|
||||
<button type="button" id="talk-sm-change-btn" class="btn btn-success" >담당자변경</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-3 col-md-3">
|
||||
<div class="card info-card" id="close-wrap">
|
||||
<input type="text" id="talkId" class="form-control" placeholder="톡방 아이디"/>
|
||||
<button type="button" id="talk-close-btn" class="btn btn-warning">종료하기</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main><!-- End #main -->
|
||||
|
||||
<script type="module">
|
||||
import {Talk} from 'http://talk.kospo.co.kr:3000/static/js/talk.js';
|
||||
|
||||
|
||||
const talk = new Talk({
|
||||
workId: 'HB0241',
|
||||
position: 'br', // 헬프톡 위치(tl | tr | bl | br)
|
||||
button: {
|
||||
offsetX :30,
|
||||
offsetY: 30,
|
||||
color: '#007DC3', // optional
|
||||
hoverColor: '#0068A3', // optional
|
||||
},
|
||||
container : {
|
||||
offsetX: 100,
|
||||
offsetY: 30,
|
||||
color: '#007DC3', // optional
|
||||
hoverColor: '#0068A3', // optional
|
||||
activeColor: '#fff', // optional
|
||||
},
|
||||
serviceWorkerLocation: `./service-worker.js?v=1.05`, // 서비스워커 교체시 v=1.06 버전 변경
|
||||
encSabun: 'h0VFCEwCVSn9SBCunLhGPWMgqQjf7h8CQ+ca7q43GRTmdr8QT1LK1uWOGZnDE6JzG/GULHGarfrOUve6qUOQAoOqOlYg2quU4Zy9bM1TG5jMH4aMp+yo5cRBXM5eJr+7oI78XE7m3pmebFZf6YEi77Xm5BtxSW436jrrOzfeEbHDDYVxOMd9Km5fOcNuLtDLDGKdhllA4w0Zv/xBfgQLJ1oC1+zo3PxGWOI5ypXDnDqUOmAldnHZEx4wM+gf7ZqHX4qiJ4tV+0baXrUuy43iA5XbnJ17s/gAk1oafG2MBL5N0n2aOJ6+367CKE2yditqEUPronrNWqwAHZiG5K8dHg=='
|
||||
})
|
||||
talk.run().then(() => {
|
||||
console.log(1)
|
||||
})
|
||||
|
||||
|
||||
const startBtn = document.querySelector('#talk-start-btn');
|
||||
const changeBtn = document.querySelector('#talk-change-btn');
|
||||
const smChangeBtn = document.querySelector('#talk-sm-change-btn');
|
||||
const workList = document.querySelectorAll('#work');
|
||||
const closeBtn = document.querySelector('#talk-close-btn');
|
||||
|
||||
let html = '';
|
||||
works.forEach((work) => {
|
||||
html += `<option value="${work.work_id}">${work.work_nm}</option>`
|
||||
})
|
||||
workList.forEach((work) => {
|
||||
work.insertAdjacentHTML("afterbegin", html)
|
||||
})
|
||||
|
||||
startBtn.addEventListener('click', function(e) {
|
||||
const global = talk.getGlobal()
|
||||
const startWrap = document.querySelector('#start-wrap')
|
||||
const talkId = startWrap.querySelector('#talkId').value
|
||||
const msgObj = {
|
||||
"type": "START",
|
||||
"talkId": talkId,
|
||||
}
|
||||
global.stomp.send(`/pub/talk.start.${msgObj.talkId}`, {}, JSON.stringify(msgObj))
|
||||
})
|
||||
|
||||
changeBtn.addEventListener('click', function(e) {
|
||||
const global = talk.getGlobal()
|
||||
const changeWrap = document.querySelector('#change-wrap')
|
||||
const talkId = changeWrap.querySelector('#talkId').value
|
||||
const workId = changeWrap.querySelector('#work').value
|
||||
const newTalkId = talkEvent.generateUUID();
|
||||
const msgObj = {
|
||||
"type": "CHANGE",
|
||||
"talkId": talkId,
|
||||
"changeTalk" : {
|
||||
talkId: newTalkId,
|
||||
workId: workId
|
||||
}
|
||||
}
|
||||
global.stomp.send(`/pub/talk.change.${talkId}`, {}, JSON.stringify(msgObj))
|
||||
})
|
||||
|
||||
smChangeBtn.addEventListener('click', function(e) {
|
||||
const global = talk.getGlobal()
|
||||
const changeWrap = document.querySelector('#sm-change-wrap')
|
||||
const chgSabun = changeWrap.querySelector('#chgSabun').value
|
||||
const talkId = changeWrap.querySelector('#talkId').value
|
||||
const newTalkId = talkEvent.generateUUID();
|
||||
const msgObj = {
|
||||
"type": "CHANGE",
|
||||
"talkId": talkId,
|
||||
"changeTalk" : {
|
||||
talkId: newTalkId,
|
||||
sabun: chgSabun, /*변경자 사번*/
|
||||
}
|
||||
}
|
||||
global.stomp.send(`/pub/talk.sm.change.${talkId}`, {}, JSON.stringify(msgObj))
|
||||
})
|
||||
|
||||
closeBtn.addEventListener('click', function(e) {
|
||||
const global = talk.getGlobal()
|
||||
const closeWrap = document.querySelector('#close-wrap')
|
||||
const talkId = closeWrap.querySelector('#talkId').value
|
||||
console.log(global)
|
||||
const msgObj = {
|
||||
"type": "CLOSE",
|
||||
"talkId": talkId,
|
||||
}
|
||||
global.stomp.send(`/pub/talk.close.${msgObj.talkId}`, {}, JSON.stringify(msgObj))
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user