dev.2ha.me/hoperun-custom-sign
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

🆗 由于默认密码变更，已无法后台登录，改为使用jsessionID登录

Browse Source 
🆗 兼容新的打卡
🆗 增加自动打卡开关
This commit is contained in:
jimlee
2023-03-22 18:10:03 +08:00
parent f69ec33050
commit becdffe1d4
13 changed files with 681 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/main/resources/static/index.0.html
View File

@@ -6,7 +6,7 @@
<link rel="stylesheet" href="./normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body><!--partial:index.partial.html-->
<body class="dark-mode"><!--partial:index.partial.html-->
<div class="job">
<div class="header">
<div class="logo">
@@ -32,9 +32,28 @@
<img class="user-profile" id="user-head" src="img/tx.png" alt="">
<div id="user-div">
<div id="username">未登陆</div>
<span id="login-span"><div class="alert-inline"><div><input class="login-input" id="employee-number"
type="text" placeholder="输入工号"></div><div><button
class="random-buttons" id="login">登陆</button></div></div></span>
<span id="login-span">
<div class="alert-inline">
<div>
<input class="login-input" id="employee-number" type="text" placeholder="输入工号">
</div>
<div>
<input class="login-input" style="width: 280px" id="jsessionId" type="text" placeholder="输入SESSIONID">
</div>
<div>
<div id="autodaka">自动打卡开关</div>
</div>
<div>
<div class="toggle toggle--switch">
<input type="checkbox" id="toggle--switch" class="toggle--checkbox">
<label class="toggle--btn" for="toggle--switch"><span class="toggle--feature" data-label-on="on" data-label-off="off"></span></label>
</div>
</div>
<div>
<button class="random-buttons" id="login">登陆</button>
</div>
</div>
</span>
<div id="logout-div" style="display: none">
<button class="random-buttons" id="logout">登出</button>
</div>
@@ -59,9 +78,9 @@
<button class="search-buttons card-buttons begin-buttons" id="save-sign">保存</button>
</div>
</div>
<div class="login_dialog" style="display: none">
<div class="userinfo_dialog" style="display: none">
<div class="alert">
<div class="job-card-title" ><span style="font-size: 24px">打卡信息</span></div>
<div class="job-card-title"><span style="font-size: 24px">打卡信息</span></div>
<div class="alert-inline">
<div>
<label for="_user_input">用 户 名 : </label>

2
src/main/resources/static/index.html
View File

@@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>打卡</title><link rel="stylesheet"href="./normalize.min.css"><link rel="stylesheet"href="./style.css"></head><body><!--partial:index.partial.html--><div class="job"><div class="header"><div class="logo"><svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512"><path xmlns="http://www.w3.org/2000/svg"d="M512 503.5H381.7a48 48 0 01-45.3-32.1L265 268.1l-9-25.5 2.7-124.6L338.2 8.5l23.5 67.1L512 503.5z"fill="#0473ff"data-original="#28b446"/><path xmlns="http://www.w3.org/2000/svg"fill="#0473ff"data-original="#219b38"d="M361.7 75.6L265 268.1l-9-25.5 2.7-124.6L338.2 8.5z"/><path xmlns="http://www.w3.org/2000/svg"d="M338.2 8.5l-82.2 234-80.4 228.9a48 48 0 01-45.3 32.1H0l173.8-495h164.4z"fill="#0473ff"data-original="#518ef8"/></svg>打卡</div><div class="user-settings"><div class="dark-light"><svg viewBox="0 0 24 24"stroke="currentColor"stroke-width="1.5"fill="none"stroke-linecap="round"stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path></svg></div><img class="user-profile"id="user-head"src="img/tx.png"alt=""><div id="user-div"><div id="username">未登陆</div><span id="login-span"><div class="alert-inline"><div><input class="login-input"id="employee-number"type="text"placeholder="输入工号"></div><div><button class="random-buttons"id="login">登陆</button></div></div></span><div id="logout-div"style="display: none"><button class="random-buttons"id="logout">登出</button></div></div></div></div><div class="dialog"style="display: none"><div class="alert"><div class="job-card-title"id="sign-date"><span style="font-size: 24px"></span></div><div class="alert-inline"><div><input id="sign-begin-time"type="text"placeholder="输入上班时间"></div><div><button class="random-buttons"id="sign-begin-random">随机</button></div></div><div class="alert-inline"><div><input id="sign-end-time"type="text"placeholder="输入下班时间"></div><div><button class="random-buttons"id="sign-end-random">随机</button></div></div><button class="search-buttons card-buttons begin-buttons"id="save-sign">保存</button></div></div><div class="login_dialog"style="display: none"><div class="alert"><div class="job-card-title"><span style="font-size: 24px">打卡信息</span></div><div class="alert-inline"><div><label for="_user_input">用 户 名 :</label><input id="_user_input"readonly="readonly"type="text"></div></div><div class="alert-inline"><div><label for="_project_id_input">项 目 I D:</label><input id="_project_id_input"readonly="readonly"type="text"></div></div><div class="alert-inline"><div><label for="_project_name_input">项目名称:</label><input id="_project_name_input"readonly="readonly"type="text"></div></div><div class="alert-inline"><div><label for="_area_input">打卡地区:</label><input id="_area_input"readonly="readonly"type="text"></div></div><div class="alert-inline"><div><label for="_device_input">设备信息:</label><input id="_device_input"readonly="readonly"type="text"></div></div></div></div><div class="wrapper"><div class="main-container"><div class="searched-jobs"><div class="searched-bar"><div class="searched-show">打卡记录</div><!--<button class="search-button">餐补<span class="canbu-span"></span></button>--></div><div class="job-cards"></div></div></div></div><script src="./coco-message.js"></script><script src="./jquery.min.js"></script><script src="./script.js"></script></div></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>打卡</title><link rel="stylesheet"href="./normalize.min.css"><link rel="stylesheet"href="./style.css"></head><body class="dark-mode"><!--partial:index.partial.html--><div class="job"><div class="header"><div class="logo"><svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512"><path xmlns="http://www.w3.org/2000/svg"d="M512 503.5H381.7a48 48 0 01-45.3-32.1L265 268.1l-9-25.5 2.7-124.6L338.2 8.5l23.5 67.1L512 503.5z"fill="#0473ff"data-original="#28b446"/><path xmlns="http://www.w3.org/2000/svg"fill="#0473ff"data-original="#219b38"d="M361.7 75.6L265 268.1l-9-25.5 2.7-124.6L338.2 8.5z"/><path xmlns="http://www.w3.org/2000/svg"d="M338.2 8.5l-82.2 234-80.4 228.9a48 48 0 01-45.3 32.1H0l173.8-495h164.4z"fill="#0473ff"data-original="#518ef8"/></svg>打卡</div><div class="user-settings"><div class="dark-light"><svg viewBox="0 0 24 24"stroke="currentColor"stroke-width="1.5"fill="none"stroke-linecap="round"stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path></svg></div><img class="user-profile"id="user-head"src="img/tx.png"alt=""><div id="user-div"><div id="username">未登陆</div><span id="login-span"><div class="alert-inline"><div><input class="login-input"id="employee-number"type="text"placeholder="输入工号"></div><div><input class="login-input"style="width: 280px"id="jsessionId"type="text"placeholder="输入SESSIONID"></div><div><div id="autodaka">自动打卡开关</div></div><div><div class="toggle toggle--switch"><input type="checkbox"id="toggle--switch"class="toggle--checkbox"><label class="toggle--btn"for="toggle--switch"><span class="toggle--feature"data-label-on="on"data-label-off="off"></span></label></div></div><div><button class="random-buttons"id="login">登陆</button></div></div></span><div id="logout-div"style="display: none"><button class="random-buttons"id="logout">登出</button></div></div></div></div><div class="dialog"style="display: none"><div class="alert"><div class="job-card-title"id="sign-date"><span style="font-size: 24px"></span></div><div class="alert-inline"><div><input id="sign-begin-time"type="text"placeholder="输入上班时间"></div><div><button class="random-buttons"id="sign-begin-random">随机</button></div></div><div class="alert-inline"><div><input id="sign-end-time"type="text"placeholder="输入下班时间"></div><div><button class="random-buttons"id="sign-end-random">随机</button></div></div><button class="search-buttons card-buttons begin-buttons"id="save-sign">保存</button></div></div><div class="userinfo_dialog"style="display: none"><div class="alert"><div class="job-card-title"><span style="font-size: 24px">打卡信息</span></div><div class="alert-inline"><div><label for="_user_input">用户名:</label><input id="_user_input"readonly="readonly"type="text"></div></div><div class="alert-inline"><div><label for="_project_id_input">项目I D:</label><input id="_project_id_input"readonly="readonly"type="text"></div></div><div class="alert-inline"><div><label for="_project_name_input">项目名称:</label><input id="_project_name_input"readonly="readonly"type="text"></div></div><div class="alert-inline"><div><label for="_area_input">打卡地区:</label><input id="_area_input"readonly="readonly"type="text"></div></div><div class="alert-inline"><div><label for="_device_input">设备信息:</label><input id="_device_input"readonly="readonly"type="text"></div></div></div></div><div class="wrapper"><div class="main-container"><div class="searched-jobs"><div class="searched-bar"><div class="searched-show">打卡记录</div><!--<button class="search-button">餐补<span class="canbu-span"></span></button>--></div><div class="job-cards"></div></div></div></div><script src="./coco-message.js"></script><script src="./jquery.min.js"></script><script src="./script.js"></script></div></body></html>

2
src/main/resources/static/normalize.min.css vendored
View File

@@ -187,4 +187,6 @@ summary {
display: none
}
button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} menu,article,aside,details,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{}button,select{text-transform:none}[type=submit], [type=reset],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}/*# sourceMappingURL=normalize.min.css.map */
/*# sourceMappingURL=normalize.min.css.map */

60
src/main/resources/static/script.js
View File

@@ -1,5 +1,4 @@
const toggleButton = document.querySelector(".dark-light");
toggleButton.addEventListener("click", () => {
document.body.classList.toggle("dark-mode");
});
@@ -25,15 +24,15 @@ let employeeNumberInput = document.querySelector('#employee-number');
if ($('#login-span').css('display') !== 'none') {
employeeNumberInput.focus()
}
employeeNumberInput.addEventListener("keypress", (e) => {
if (e.keyCode === 13) {
window.localStorage.setItem("employeeNo", employeeNumberInput.value);
loginAndLoadRecord();
}
})
let jsessonIdInput = document.querySelector('#jsessionId');
let autoDaka = document.querySelector("#toggle--switch")
document.querySelector('#login').addEventListener("click", () => {
window.localStorage.setItem("employeeNo", employeeNumberInput.value);
window.localStorage.setItem("jsessionId", jsessonIdInput.value);
window.localStorage.setItem("autodaka", autoDaka.checked);
loginAndLoadRecord();
})
@@ -41,10 +40,13 @@ function loginAndLoadRecord() {
$.ajax({
method: "get",
url: "/api/daka/username/" + window.localStorage.getItem("employeeNo"),
url: "/api/daka/username/" + window.localStorage.getItem("employeeNo") + "/" + window.localStorage.getItem("jsessionId") + "/" + window.localStorage.getItem("autodaka") ,
success: function (result) {
if (result.success) {
$("#login-span").css("display", "none");
// $("#login-span").css("display", "none");
$("#login").css("display", "none");
$("#jsessionId").css("display", "none");
$("#employee-number").css("display", "none");
$('#username').text(result.data.username);
window.localStorage.setItem("username", result.data.username);
$("#logout-div").css("display", "block");
@@ -55,18 +57,18 @@ function loginAndLoadRecord() {
$('#_project_name_input').val(result.data.projectname)
$('#_area_input').val(result.data.area)
$('#_device_input').val(result.data.device)
let loginDialog = $('.login_dialog')
loginDialog.show();
let userInfoDialog = $('.userinfo_dialog')
userInfoDialog.show();
setTimeout(
() => {
loginDialog.hide();
userInfoDialog.hide();
}, 3000
)
$('#user-head').off('click').on("click", () => {
if (loginDialog.css("display") === 'block') {
$('.login_dialog').hide()
if (userInfoDialog.css("display") === 'block') {
$('.userinfo_dialog').hide()
} else {
$('.login_dialog').show()
$('.userinfo_dialog').show()
}
})
loadDakaList();
@@ -122,6 +124,7 @@ function loadDakaList() {
bindRandomBeginTime();
bindRandomEndTime();
bindSaveDakaTime();
bindAutoDakaToggle();
} else {
cocoMessage.error("加载打卡记录失败！" + result.message, 3000);
}
@@ -200,6 +203,25 @@ function bindSaveDakaTime() {
})
}
function bindAutoDakaToggle() {
document.querySelectorAll("#toggle--switch").forEach((dakaButton) => {
$(dakaButton).off('change').on('change', function (e) {
$.ajax({
method: "get",
url: "/api/daka/auto/" + window.localStorage.getItem("employeeNo") + "/" + autoDaka.checked,
success: function (result) {
if (!result.success) {
cocoMessage.error("登陆失败！" + result.message, 3000);
}
},
error: function (e) {
cocoMessage.error("请求失败！", 3000);
}
})
})
})
}
function saveDakaTime(signDate, beginTime, endTime) {
let messageType = 0;
let beginTimeMessage = dateBeginTimeMap[signDate] !== beginTime;
@@ -284,10 +306,10 @@ function randomBeginTime() {
}
function randomEndTime() {
let hourArray = [20, 21, 22, 23, 20, 21, 22, 20, 20, 21];
let hourArray = [18, 19, 20, 21, 22, 23, 20, 21, 22, 20, 20, 21];
let randomHour = hourArray[Math.round(Math.random() * 9)];
let randomMinute = 0;
if (randomHour === 20) {
if (randomHour === 18) {
randomMinute = Math.round(Math.random() * 30) + 29;
} else {
randomMinute = Math.round(Math.random() * 59);
@@ -304,7 +326,7 @@ $(document).click(function(e) {
if (!$target.is('.dialog *') && !$target.is('.daka-buttons')) {
$('.dialog').hide();
}
if (!$target.is('.login_dialog *') && !$target.is('#user-head')) {
$('.login_dialog').hide();
if (!$target.is('.userinfo_dialog *') && !$target.is('#user-head')) {
$('.userinfo_dialog').hide();
}
})

188
src/main/resources/static/style.css
View File

@@ -291,7 +291,7 @@ body {
color: var(--button-color);
background-color: var(--active-color);
padding: 8px 10px;
border-radius: 0 8px 8px 0;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
}
@@ -363,7 +363,7 @@ body {
position: absolute;
}
.login_dialog {
.userinfo_dialog {
width: 50%;
opacity: 1;
visibility: visible;
@@ -375,19 +375,19 @@ body {
position: absolute;
}
.login_dialog > div > .alert-inline {
.userinfo_dialog > div > .alert-inline {
display: flex;
padding: 2px 0;
}
.login_dialog > div > div > div > label {
.userinfo_dialog > div > div > div > label {
font-weight: 600;
font-size: 16px;
align-self: center;
padding-right: 10px;
}
body > div > div.login_dialog > div > div > div {
body > div > div.userinfo_dialog > div > div > div {
display: inline-flex;
width: 100%;
}
@@ -396,6 +396,12 @@ body > div > div.login_dialog > div > div > div {
padding: 11px;
}
#autodaka {
padding: 11px;
}
.alert {
background-color: var(--alert-bg-color);
padding: 24px 24px;
@@ -430,7 +436,7 @@ body > div > div.login_dialog > div > div > div {
color: var(--body-color)
}
body > div > div.login_dialog > div > div > div input {
body > div > div.userinfo_dialog > div > div > div input {
width: 85%;
padding: 10px;
display: block;
@@ -444,8 +450,9 @@ body > div > div.login_dialog > div > div > div input {
.login-input {
width: 85px;
padding: 10px;
margin-right: 8px;
display: block;
border-radius: 8px 0 0 8px;
border-radius: 8px;
background-color: var(--header-bg-color);
border: none;
font-size: 13px;
@@ -1113,4 +1120,171 @@ body > div > div.login_dialog > div > div > div input {
.header {
padding: 0 20px;
}
}
@import url(https://fonts.googleapis.com/css?family=Francois+One);
@import url(https://fonts.googleapis.com/css?family=PT+Sans);
@font-face {
font-family: 'Audiowide';
font-style: normal;
font-weight: 400;
src: local("Audiowide"), local("Audiowide-Regular"), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format("woff");
}
body {
font-size: 62.5%;
background-color: #fff;
margin: 10px;
border: 1px solid #333;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
h1, h2, h3 {
font-family: 'PT Sans', sans-serif;
text-transform: uppercase;
}
h1 {
font-size: 2.4em;
background-color: #292929;
text-align: center;
padding: 20px;
margin: 0;
color: #fff;
}
h1 a {
display: block;
margin-top: 10px;
text-transform: none;
color: #aaa;
font-size: 16px;
text-decoration: none;
}
.headingOuter {
background: #f1f1f1;
text-align: center;
margin-top: 50px;
margin-bottom: 0;
padding: 10px;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
font-size: 1.6em;
}
.headingOuter:first-child {
margin-top: 0;
}
h1 + .headingOuter {
margin-top: 0;
}
/* =====================================================
Some defaults across all toggle demos
===================================================== */
.toggle {
display: block;
text-align: center;
user-select: none;
margin-right: 5px;
}
.toggle--checkbox {
display: none;
}
.toggle--btn {
display: block;
margin: 0 auto;
font-size: 1.4em;
transition: all 350ms ease-in;
}
.toggle--btn:hover {
cursor: pointer;
}
.toggle--btn, .toggle--btn:before, .toggle--btn:after,
.toggle--checkbox,
.toggle--checkbox:before,
.toggle--checkbox:after,
.toggle--feature,
.toggle--feature:before,
.toggle--feature:after {
transition: all 250ms ease-in;
}
.toggle--btn:before, .toggle--btn:after,
.toggle--checkbox:before,
.toggle--checkbox:after,
.toggle--feature:before,
.toggle--feature:after {
content: '';
display: block;
}
/* =====================================================
Toggle - switch stylee
===================================================== */
.toggle--switch .toggle--btn {
position: relative;
width: 100px;
height: 35px;
font-family: 'PT Sans', Sans Serif;
text-transform: uppercase;
color: #fff;
background: linear-gradient(90deg, #a4bf4d 0%, #a4bf4d 50%, #ca5046 50%, #ca5046 200%);
background-position: -80px 0;
background-size: 200% 100%;
box-shadow: inset 0 0px 22px -8px #111;
}
.toggle--switch .toggle--btn, .toggle--switch .toggle--btn:before {
border-radius: 4px;
}
.toggle--switch .toggle--btn:before {
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 52px;
height: 41px;
border: 2px solid #202027;
background-image: linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.15) 100%);
background-color: #2b2e3a;
background-size: 5px 5px;
text-indent: -100%;
}
.toggle--switch .toggle--feature {
position: relative;
display: block;
overflow: hidden;
height: 44px;
text-shadow: 0 1px 2px #666;
}
.toggle--switch .toggle--feature:before, .toggle--switch .toggle--feature:after {
position: absolute;
top: 45%;
transform: translateY(-50%);
}
.toggle--switch .toggle--feature:before {
content: attr(data-label-on);
left: -60%;
}
.toggle--switch .toggle--feature:after {
content: attr(data-label-off);
right: 9%;
}
.toggle--switch .toggle--checkbox:checked + .toggle--btn {
background-position: 0 0;
}
.toggle--switch .toggle--checkbox:checked + .toggle--btn:before {
left: calc(100% - 52px);
}
.toggle--switch .toggle--checkbox:checked + .toggle--btn .toggle--feature:before {
left: 10%;
}
.toggle--switch .toggle--checkbox:checked + .toggle--btn .toggle--feature:after {
right: -60%;
}