merge master into develop - CscListRForm.jsp FAQ 아코디언 버그 수정
This commit is contained in:
jilee4unity
21
build/resources/main/static/sopmall/mobile/js/bnft/stepcnt/Chart.bundle.min.js
vendored
Normal file
21
build/resources/main/static/sopmall/mobile/js/bnft/stepcnt/Chart.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -0,0 +1,278 @@
|
||||
//만보기달력 추가 encomms
|
||||
function loadImages() {
|
||||
console.log('이미지 로딩 시작');
|
||||
loadImage('representative', screenInfo.representativeImagePath, $('#representativeImage'));
|
||||
loadImage('reward', screenInfo.rewardImagePath, $('.product_img img'));
|
||||
}
|
||||
|
||||
function loadImage(imageType, imagePath, $img) {
|
||||
if (!imagePath) {
|
||||
console.warn(`${imageType} 이미지 경로가 없습니다`);
|
||||
return;
|
||||
}
|
||||
|
||||
if ($img.length) {
|
||||
$.ajax({
|
||||
url: '/sopmal/bnft/image',
|
||||
method: 'GET',
|
||||
data: { path: imagePath, type: imageType },
|
||||
xhrFields: { responseType: 'blob' },
|
||||
success: function(data) {
|
||||
const imageUrl = URL.createObjectURL(data);
|
||||
$img.attr('src', imageUrl);
|
||||
console.log(`${imageType} 이미지 로드 성공`);
|
||||
|
||||
if (imageType === 'reward') {
|
||||
updateRewardLink();
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
console.error(`${imageType} 이미지 로드 실패`);
|
||||
$img.attr('src', '/path/to/fallback-image.jpg');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.warn(`${imageType} 이미지 요소를 찾을 수 없습니다`);
|
||||
}
|
||||
}
|
||||
|
||||
function updateRewardLink() {
|
||||
const $rewardLink = $('.stepStampBox2 a');
|
||||
if ($rewardLink.length && screenInfo.scrRwdLinkUrl) {
|
||||
$rewardLink.attr('href', screenInfo.scrRwdLinkUrl);
|
||||
console.log('보상 링크 URL 업데이트:', screenInfo.scrRwdLinkUrl);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
loadImages();
|
||||
|
||||
const daysContainer = document.querySelector(".stepDays");
|
||||
const daysInMonth = 31; // May 2024 has 31 days
|
||||
const currentDate = new Date();
|
||||
let currentDay = currentDate.getDate();
|
||||
const firstDayOfMonth = new Date(2024, 4, 1).getDay(); // May is the 5th month (zero-based index)
|
||||
|
||||
// 만보기 데이터를 임의로 생성 (예: 각 날마다 무작위 값)
|
||||
const stepsData = Array.from({ length: daysInMonth }, () => Math.floor(Math.random() * 20000));
|
||||
|
||||
// Generate empty cells for the days before the first day of the month
|
||||
for (let i = 0; i < firstDayOfMonth; i++) {
|
||||
const emptyCell = document.createElement("div");
|
||||
daysContainer.appendChild(emptyCell);
|
||||
}
|
||||
|
||||
// Generate calendar days
|
||||
for (let day = 1; day <= daysInMonth; day++) {
|
||||
const calendarDay = document.createElement("div");
|
||||
calendarDay.textContent = day;
|
||||
|
||||
// Add 'today' class to the current date
|
||||
if (day === currentDay) {
|
||||
calendarDay.classList.add("today");
|
||||
}
|
||||
|
||||
// 만보기 숫자 기능 추가
|
||||
const stepsCount = document.createElement("div");
|
||||
stepsCount.textContent = `${stepsData[day - 1] || 0}`; // steps 텍스트 제거
|
||||
stepsCount.classList.add("steps"); // Add 'steps' class to the steps count element
|
||||
calendarDay.appendChild(stepsCount);
|
||||
|
||||
// 만 보가 넘으면 success 클래스를 추가
|
||||
if (stepsData[day - 1] > 10000) {
|
||||
calendarDay.classList.add("success");
|
||||
}
|
||||
|
||||
// 7500 보가 넘으면 success3 클래스를 추가
|
||||
if (stepsData[day - 1] >= 7500 && stepsData[day - 1] < 10000) {
|
||||
calendarDay.classList.add("success2");
|
||||
}
|
||||
|
||||
// 5000 보가 넘으면 success 클래스를 추가
|
||||
if (stepsData[day - 1] >= 5000 && stepsData[day - 1] < 7500) {
|
||||
calendarDay.classList.add("success2");
|
||||
}
|
||||
|
||||
// 2500 보가 넘으면 success 클래스를 추가
|
||||
if (stepsData[day - 1] >= 2500 && stepsData[day - 1] < 5000) {
|
||||
calendarDay.classList.add("success2");
|
||||
}
|
||||
|
||||
daysContainer.appendChild(calendarDay);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//만보기 도넛차트
|
||||
// round corners
|
||||
Chart.pluginService.register({
|
||||
afterUpdate: function(chart) {
|
||||
if (chart.config.options.elements.arc.roundedCornersFor !== undefined) {
|
||||
var arc = chart.getDatasetMeta(0).data[chart.config.options.elements.arc.roundedCornersFor];
|
||||
arc.round = {
|
||||
x: (chart.chartArea.left + chart.chartArea.right) / 2,
|
||||
y: (chart.chartArea.top + chart.chartArea.bottom) / 2,
|
||||
radius: (chart.outerRadius + chart.innerRadius) / 2,
|
||||
thickness: (chart.outerRadius - chart.innerRadius) / 2 - 1,
|
||||
backgroundColor: arc._model.backgroundColor
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
afterDraw: function(chart) {
|
||||
if (chart.config.options.elements.arc.roundedCornersFor !== undefined) {
|
||||
var ctx = chart.chart.ctx;
|
||||
var arc = chart.getDatasetMeta(0).data[chart.config.options.elements.arc.roundedCornersFor];
|
||||
var startAngle = Math.PI / 2 - arc._view.startAngle;
|
||||
var endAngle = Math.PI / 2 - arc._view.endAngle;
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(arc.round.x, arc.round.y);
|
||||
console.log(arc.round.startAngle)
|
||||
ctx.fillStyle = arc.round.backgroundColor;
|
||||
ctx.beginPath();
|
||||
ctx.arc(arc.round.radius * Math.sin(startAngle), arc.round.radius * Math.cos(startAngle), arc.round.thickness, 0, 2 * Math.PI);
|
||||
ctx.arc(arc.round.radius * Math.sin(endAngle), arc.round.radius * Math.cos(endAngle), arc.round.thickness, 0, 2 * Math.PI);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// write text plugin
|
||||
Chart.pluginService.register({
|
||||
afterUpdate: function(chart) {
|
||||
if (chart.config.options.elements.center) {
|
||||
var helpers = Chart.helpers;
|
||||
var centerConfig = chart.config.options.elements.center;
|
||||
var globalConfig = Chart.defaults.global;
|
||||
var ctx = chart.chart.ctx;
|
||||
|
||||
var fontStyle = helpers.getValueOrDefault(centerConfig.fontStyle, globalConfig.defaultFontStyle);
|
||||
var fontFamily = helpers.getValueOrDefault(centerConfig.fontFamily, globalConfig.defaultFontFamily);
|
||||
|
||||
if (centerConfig.fontSize)
|
||||
var fontSize = centerConfig.fontSize;
|
||||
// figure out the best font size, if one is not specified
|
||||
else {
|
||||
ctx.save();
|
||||
var fontSize = helpers.getValueOrDefault(centerConfig.minFontSize, 1);
|
||||
var maxFontSize = helpers.getValueOrDefault(centerConfig.maxFontSize, 256);
|
||||
var maxText = helpers.getValueOrDefault(centerConfig.maxText, centerConfig.text);
|
||||
|
||||
do {
|
||||
ctx.font = helpers.fontString(fontSize, fontStyle, fontFamily);
|
||||
var textWidth = ctx.measureText(maxText).width;
|
||||
|
||||
// check if it fits, is within configured limits and that we are not simply toggling back and forth
|
||||
if (textWidth < chart.innerRadius * 2 && fontSize < maxFontSize)
|
||||
fontSize += 1;
|
||||
else {
|
||||
// reverse last step
|
||||
fontSize -= 1;
|
||||
break;
|
||||
}
|
||||
} while (true)
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
// save properties
|
||||
chart.center = {
|
||||
font: helpers.fontString(fontSize, fontStyle, fontFamily),
|
||||
fillStyle: helpers.getValueOrDefault(centerConfig.fontColor, globalConfig.defaultFontColor)
|
||||
};
|
||||
}
|
||||
},
|
||||
afterDraw: function(chart) {
|
||||
if (chart.center) {
|
||||
var centerConfig = chart.config.options.elements.center;
|
||||
var ctx = chart.chart.ctx;
|
||||
|
||||
ctx.save();
|
||||
ctx.font = chart.center.font;
|
||||
ctx.fillStyle = chart.center.fillStyle;
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
var centerX = (chart.chartArea.left + chart.chartArea.right) / 2;
|
||||
var centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2;
|
||||
ctx.fillText(centerConfig.text, centerX, centerY);
|
||||
ctx.restore();
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
var config = {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: [
|
||||
"오늘 걸은 걸음",
|
||||
"목표 달성까지"
|
||||
],
|
||||
datasets: [{
|
||||
data: [67, 33],
|
||||
backgroundColor: [
|
||||
"#78b857",
|
||||
"#d9d9d9"
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
"#78b857",
|
||||
"#d9d9d9"
|
||||
]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
elements: {
|
||||
arc: {
|
||||
roundedCornersFor: 0
|
||||
},
|
||||
center: {
|
||||
// the longest text that could appear in the center
|
||||
maxText: '100%',
|
||||
text: '60%',
|
||||
fontColor: '#000',
|
||||
fontFamily: "'GmarketSans', 'Arial', sans-serif",
|
||||
fontStyle: 'bold',
|
||||
fontSize: 20,
|
||||
// if a fontSize is NOT specified, we will scale (within the below limits) maxText to take up the maximum space in the center
|
||||
// if these are not specified either, we default to 1 and 256
|
||||
minFontSize: 1,
|
||||
maxFontSize: 256,
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var ctx = document.getElementById("myChart").getContext("2d");
|
||||
var myChart = new Chart(ctx, config);
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
// 토글 상태 변경 이벤트 리스너 설정
|
||||
$('#stepcntToggle').change(function() {
|
||||
var isChecked = $(this).is(':checked');
|
||||
var status = isChecked ? 'Y' : 'N';
|
||||
|
||||
// AJAX 요청 보내기
|
||||
$.ajax({
|
||||
url: '/sopmal/bnft/insertStepcntAgreement', // 서버의 엔드포인트 URL
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify({
|
||||
agreAt: status
|
||||
// 필요한 추가 데이터가 있으면 여기에 추가
|
||||
}),
|
||||
success: function(response) {
|
||||
console.log('Success:', response);
|
||||
// 성공 시 추가 작업 (알림 표시 등)
|
||||
},
|
||||
error: function(error) {
|
||||
console.error('Error:', error);
|
||||
// 실패 시 추가 작업 (알림 표시 등)
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user