mirror of
https://git.hmsn.ink/kospo/helptalk/api.git
synced 2026-03-19 21:05:06 +09:00
223 lines
7.4 KiB
HTML
223 lines
7.4 KiB
HTML
<!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://devtalk.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://devtalk.kospo.co.kr:3000/static/js/talk.js';
|
|
|
|
|
|
const talk = new Talk({
|
|
workId: 'HB0037',
|
|
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()
|
|
|
|
|
|
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> |