체크리스트 수정 - 메모리 1

# 미수정 사항
공유하기 버튼 동그라미 아이콘으로 변환
타임라인, 일간, 주간 - ooo 모두 똑같이 보이게 수정

# 수정된 사항
타임라인 최신 것이 위로 가도록 수정
주간 - (날짜 기간으로 변경),  날짜 스크롤 안되는 오류 수정
타임라인의 공유하기 삭제
(일간/주간)의 공유하기 로그인 안해도 볼 수 있도록 수정
메모리 하단에 기능 설명 붙이기 (카테고리를 클릭하면 해당사항만 볼 수 있습니다.)
그래프 클릭 시 해당 부분 색만 볼 수 있는 기능 주간에도 추가(일간에만 있음)
메모리 상세 카테고리들 외 전체 버튼도 추가하여 클릭 시 볼 수 있는 기능 추가
주간 주차별 (일~토)로 할 지 오늘 기준으로 할 지 결정
dev_bert
정이솔 3 years ago
parent bc87866466
commit 65336854cc

@ -22,6 +22,9 @@ import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.List;
/**
@ -305,6 +308,11 @@ public class M_MemoryController extends AbstractControllerManager{
String currDate = paramMap.getString("currDate");
String redirect_url = "m/memory/memory_week";
String today = ""; //날짜선택 화면 표시용 날짜형식
String startDay = ""; // 쿼리 조회 시작 날짜
String endDay = ""; // 쿼리 조회 끝 날짜
String thisWeekend = ""; // 날짜선택 화면 표시용(이번주)
try {
boolean is_login = gmUtil.setSessionForMobileMember(request, paramMap);
@ -315,16 +323,29 @@ public class M_MemoryController extends AbstractControllerManager{
//메모리 > 주간에서 이전일 눌렀을 경우
// today = DateUtil.getTodayAddDate(-7,"yyyy-MM-dd(E)");
// today2 = DateUtil.getTodayAddDate(-7,"yyyy-MM-dd");
Calendar cal = Calendar.getInstance();
SimpleDateFormat dataFmt = new SimpleDateFormat("yyyy-MM-dd");
// 일 ~ 토 계산
cal.set(Calendar.DAY_OF_WEEK, Calendar.SATURDAY);
endDay = dataFmt.format(cal.getTime());
startDay = DateUtil.getTodayAddDateWithBaseDate(-6, endDay, "yyyy-MM-dd");
if(currDate.equals("")) {
today = DateUtil.getTodayAddDate(-7,"yyyy-MM-dd");
} else {
if(dayFlag.equals("plus")) {
today = DateUtil.getTodayAddDateWithBaseDate(7, currDate,"yyyy-MM-dd");
endDay = DateUtil.getTodayAddDateWithBaseDate(13, currDate,"yyyy-MM-dd");
startDay = DateUtil.getTodayAddDateWithBaseDate(7, currDate,"yyyy-MM-dd");
} else {
today = DateUtil.getTodayAddDateWithBaseDate(-7, currDate,"yyyy-MM-dd");
endDay = DateUtil.getTodayAddDateWithBaseDate(-1, currDate,"yyyy-MM-dd");
startDay = DateUtil.getTodayAddDateWithBaseDate(-7, currDate,"yyyy-MM-dd");
}
}
thisWeekend = startDay + " ~ " + endDay;
HttpSession session = request.getSession(false);
DataMap rm_mem = (DataMap) session.getAttribute(ConstantSystem.SESSION_RM_MEMBER);
@ -349,8 +370,13 @@ public class M_MemoryController extends AbstractControllerManager{
rm_mem.put("day", DateUtil.getDay(today, "yyyy-MM-dd"));
rm_mem.put("dayFlag", dayFlag);
rm_mem.put("currDate", currDate);
paramMap.put("startDate", today + " 00:00:00");
paramMap.put("endDate", today + " 23:59:59");
//-------------------------
rm_mem.put("startDay", startDay);
rm_mem.put("endDay", endDay);
rm_mem.put("thisWeekend", thisWeekend);
//-------------------------
paramMap.put("startDate", startDay + " 00:00:00");
paramMap.put("endDate", endDay + " 23:59:59");
List<DataMap> time_list = memoryBO.select_week(paramMap);
DataMap dayList = memoryBO.select_day_week(paramMap);
@ -382,18 +408,35 @@ public class M_MemoryController extends AbstractControllerManager{
String currDate = paramMap.getString("currDate");
String redirect_url = "m/memory/memory_week_share";
String today = ""; //날짜선택 화면 표시용 날짜형식
String startDay = ""; // 쿼리 조회 시작 날짜
String endDay = ""; // 쿼리 조회 끝 날짜
String thisWeekend = ""; // 날짜선택 화면 표시용(이번주)
DataMap rm_mem = new DataMap();
try {
Calendar cal = Calendar.getInstance();
SimpleDateFormat dataFmt = new SimpleDateFormat("yyyy-MM-dd");
// 일 ~ 토 계산
cal.set(Calendar.DAY_OF_WEEK, Calendar.SATURDAY);
endDay = dataFmt.format(cal.getTime());
startDay = DateUtil.getTodayAddDateWithBaseDate(-6, endDay, "yyyy-MM-dd");
if(currDate.equals("")) {
today = DateUtil.getTodayAddDate(-7,"yyyy-MM-dd");
} else {
if(dayFlag.equals("plus")) {
today = DateUtil.getTodayAddDateWithBaseDate(7, currDate,"yyyy-MM-dd");
endDay = DateUtil.getTodayAddDateWithBaseDate(13, currDate,"yyyy-MM-dd");
startDay = DateUtil.getTodayAddDateWithBaseDate(7, currDate,"yyyy-MM-dd");
} else {
today = DateUtil.getTodayAddDateWithBaseDate(-7, currDate,"yyyy-MM-dd");
endDay = DateUtil.getTodayAddDateWithBaseDate(-1, currDate,"yyyy-MM-dd");
startDay = DateUtil.getTodayAddDateWithBaseDate(-7, currDate,"yyyy-MM-dd");
}
}
thisWeekend = startDay + " ~ " + endDay;
//세션에 선택된 아이정보가 있을 경우
paramMap.put("smc_no", paramMap.get("smc_no"));
@ -406,8 +449,11 @@ public class M_MemoryController extends AbstractControllerManager{
rm_mem.put("today", today);
rm_mem.put("day", DateUtil.getDay(today, "yyyy-MM-dd"));
paramMap.put("startDate", today + " 00:00:00");
paramMap.put("endDate", today + " 23:59:59");
rm_mem.put("startDay", startDay);
rm_mem.put("endDay", endDay);
rm_mem.put("thisWeekend", thisWeekend);
paramMap.put("startDate", startDay + " 00:00:00");
paramMap.put("endDate", endDay + " 23:59:59");
List<DataMap> time_list = memoryBO.select_week(paramMap);
DataMap dayList = memoryBO.select_day_week(paramMap);

@ -340,7 +340,7 @@
and b.nutirition_cd_no != ''
) XA
WHERE XA.time_val is not NULL
ORDER BY XA.reg_dt
ORDER BY XA.reg_dt desc
</select>
<select id="select_timeline_color_cd" resultClass="dataMap" parameterClass="dataMap">

@ -41,16 +41,25 @@
<div class="main_cont_kinds active" style="border: none">
<div class="swiper-container">
<div class="swiper-wrapper">
<#list model['category_list'] as item>
<div id="${item['color_cd']?replace("#", "")}" onclick="fncShowCategory(this)" class="swiper-slide">
<a style="cursor:pointer;background-color: ${item['color_cd']}"><span>${item['title']!}</span></a>
</div>
</#list>
<div id="B7E5DD" class="swiper-slide">
<a href="javascript:fncAllShowCategory()" style="cursor:pointer;background-color: #B7E5DD">
<span>전체보기</span>
</a>
</div>
<#list model['category_list'] as item>
<div id="${item['color_cd']?replace("#", "")}" onclick="fncShowCategory(this)" class="swiper-slide">
<a style="cursor:pointer;background-color: ${item['color_cd']}"><span>${item['title']!}</span></a>
</div>
</#list>
</div>
</div>
</div>
<!-- //컬러 박스 -->
<div style="text-align: center;">
카테고리를 클릭하면 해당사항만 볼 수 있습니다.
</div>
<!-- 날짜 -->
<div class="memory_date">
<a href="javascript:fncMoveDay('minus')"><img src="../img/xxxx_sprites/arrow_01_left.png" alt=""></a>
@ -124,6 +133,10 @@
$("div[name='p_pie_color']").hide();
$("#p_" + attr_id).show();
}
function fncAllShowCategory(e) {
$("div[name='p_pie_color']").show();
}
//카카오톡 공유 및 클립보드 복사 URL
var param = "member_id=${model['rm_mem']['member_id']!}&smc_no=${model['rm_child']['smc_no']}&birthday=${model['rm_child']['birthday']}&dayFlag=${model['rm_mem']['dayFlag']!}&currDate=${model['rm_mem']['currDate']!}";

@ -40,6 +40,11 @@
<div class="main_cont_kinds active" style="border: none">
<div class="swiper-container">
<div class="swiper-wrapper">
<div id="B7E5DD" class="swiper-slide">
<a href="javascript:fncAllShowCategory()" style="cursor:pointer;background-color: #B7E5DD">
<span>전체보기</span>
</a>
</div>
<#list model['category_list'] as item>
<div class="swiper-slide">
<a style="cursor:pointer;background-color: ${item['color_cd']}"><span>${item['title']!}</span></a>
@ -50,6 +55,10 @@
</div>
<!-- //컬러 박스 -->
<div style="text-align: center;">
카테고리를 클릭하면 해당사항만 볼 수 있습니다.
</div>
<!-- 날짜 -->
<div class="memory_date">
<a href="#"><img src="../img/xxxx_sprites/arrow_01_left.png" alt=""></a>
@ -91,12 +100,38 @@
</div>
<!-- //pie chart -->
<div class="fix_icon">
<!--<div class="fix_icon">
<button type="button"><img src="../../img/ico_image_grey_24.png" alt=""></button>
<button type="button"><img src="../../img/ico_share_grey_24.png" alt=""></button>
</div>
</div>-->
</div>
<!-- //wrap -->
</body>
<script>
function fncShowCategory(e) {
var attr_id = $(e).attr("id");
$("div[name='p_pie_color']").hide();
$("#p_" + attr_id).show();
}
function fncAllShowCategory(e) {
$("div[name='p_pie_color']").show();
}
var swiper = new Swiper('.swiper-container', {
slidesPerView: 5,
slidesPerGroup: 1,
spaceBetween: 10,
loopFillGroupWithBlank: true,
pagination: {
loop: false,
el: '.swiper-pagination',
clickable: true
}
});
</script>
</html>

@ -103,10 +103,10 @@
</div>
<!-- //타임라인 -->
<div class="fix_icon">
<#-- <button type="button"><img src="../img/ico_image_grey_24.png" alt=""></button>-->
<!--<div class="fix_icon">
<button type="button"><img src="../img/ico_image_grey_24.png" alt=""></button>
<button id="share-list" type="button"><img style="cursor:pointer" src="../img/ico_share_grey_24.png" alt=""></button>
</div>
</div>-->
</div>
<!-- //wrap -->

@ -41,20 +41,25 @@
<div class="main_cont_kinds active" style="border: none">
<div class="swiper-container">
<div class="swiper-wrapper">
<div id="B7E5DD" class="swiper-slide">
<a href="javascript:fncAllShowCategory()" style="cursor:pointer;background-color: #B7E5DD">
<span>전체보기</span>
</a>
</div>
<#list model['category_list'] as item>
<div id="${item['color_cd']?replace("#", "")}" onclick="fncShowCategory(this)" class="swiper-slide">
<a style="cursor:pointer;background-color: ${item['color_cd']}"><span>${item['title']!}</span></a>
<div id="${item['color_cd']?replace("#", "")}" class="swiper-slide">
<a onclick="fncShowCategory(this)" class="category_item" style="cursor:pointer;background-color: ${item['color_cd']}"><span>${item['title']!}</span></a>
</div>
</#list>
</div>
</div>
</div>
<!-- //컬러 박스 -->
<!-- 날짜 -->
<div class="memory_date" style="height:106px">
<a href="javascript:fncMoveDay('minus')"><img src="../img/xxxx_sprites/arrow_01_left02.png" alt=""></a>
${model['rm_mem']['today']!}(${model['rm_mem']['day']!})
${model['rm_mem']['thisWeekend']!}
<a href="javascript:fncMoveDay('plus')"><img src="../img/xxxx_sprites/arrow_01_right.png" alt=""></a></div>
<!-- //날짜 -->
@ -197,7 +202,7 @@
<script>
function fncMoveDay(dayFlag) {
location.href = "${URL_ROOT}/m/memory/memory_week.do?dayFlag=" + dayFlag + "&currDate=" + "${model['rm_mem']['today']!}";
location.href = "${URL_ROOT}/m/memory/memory_week.do?dayFlag=" + dayFlag + "&currDate=" + "${model['rm_mem']['startDay']!}";
<#--location.href = "${URL_ROOT}/m/memory/memory_week.do";-->
}
</script>
@ -206,9 +211,10 @@
<#include "/m/memory/memory_common.ftl">
<script>
function fncShowCategory(e) {
var attr_id = $(e).attr("id");
$("span[name='p_timeline_color']").hide();
console.log("fncShowCategory()");
var attr_id = $(e).parents("div").attr("id");
console.log("attr_id: ", attr_id);
$('span[name="p_timeline_color"]').hide();
$("span[name=p_timeline_color]").each(function(index, item){
item_key = $(item).attr("key");
if(item_key == attr_id) {
@ -217,6 +223,11 @@
});
}
function fncAllShowCategory(e) {
console.log("fncAllShowCategory()");
$("span[name='p_timeline_color']").show();
}
//카카오톡 공유 및 클립보드 복사 URL
var param = "member_id=${model['rm_mem']['member_id']!}&smc_no=${model['rm_child']['smc_no']}&dayFlag=${model['rm_mem']['dayFlag']!}&currDate=${model['rm_mem']['currDate']!}";
var shareURL = window.location.protocol + "//" + window.location.host + "${URL_ROOT}" + "/m/memory/memory_week_share?" + param;

@ -40,9 +40,14 @@
<div class="main_cont_kinds active" style="border: none">
<div class="swiper-container">
<div class="swiper-wrapper">
<div id="B7E5DD" class="swiper-slide">
<a href="javascript:fncAllShowCategory()" style="cursor:pointer;background-color: #B7E5DD">
<span>전체보기</span>
</a>
</div>
<#list model['category_list'] as item>
<div class="swiper-slide">
<a style="cursor:pointer;background-color: ${item['color_cd']}"><span>${item['title']!}</span></a>
<div id="${item['color_cd']?replace("#", "")}" class="swiper-slide">
<a onclick="fncShowCategory(this)" class="category_item" style="cursor:pointer;background-color: ${item['color_cd']}"><span>${item['title']!}</span></a>
</div>
</#list>
</div>
@ -50,121 +55,91 @@
</div>
<!-- //컬러 박스 -->
<div style="text-align: center;">
카테고리를 클릭하면 해당사항만 볼 수 있습니다.
</div>
<!-- 날짜 -->
<div class="memory_date">
<a href="#"><img src="../img/xxxx_sprites/arrow_01_left.png" alt=""></a>
${model['rm_mem']['today']!}(${model['rm_mem']['day']!})
<a href="#"><img src="../img/xxxx_sprites/arrow_01_right.png" alt=""></a>
</div>
<div class="memory_date" style="height:106px">
<a href="javascript:fncMoveDay('minus')"><img src="../img/xxxx_sprites/arrow_01_left02.png" alt=""></a>
${model['rm_mem']['thisWeekend']!}
<a href="javascript:fncMoveDay('plus')"><img src="../img/xxxx_sprites/arrow_01_right.png" alt=""></a></div>
<!-- //날짜 -->
<!-- 그래프 -->
<div class="week_chart">
<div class="week_chart" onclick="moveTimeLine(event)">
<div class="gray_box_div">
<!-- 가로열 -->
<ul class="gray_box">
<li>
<#assign pre_date = model['dayList']['day1'] + ''>
<#assign idx = 0>
<#assign pre_hour = ''>
<#list model['time_list'] as item>
<#if item['day'] == pre_date>
<#if (item['hour'] + '') == pre_hour>
<#assign idx = idx + 0.5>
</#if>
<#assign topP = item['hour'] + idx>
<#assign topP = item['hour']>
<#assign pre_hour = item['hour'] + ''>
<span title="${item.title}" style="top:${topP}%;height:${item['add_degree']!}px;background-color: ${item['color_cd']}"></span>
<span key="${item['color_cd']?replace("#", "")}" name="p_timeline_color" title="${item.title}" style="top:${topP}%;height:${item['add_degree']!}px;background-color: ${item['color_cd']}"></span>
</#if>
</#list>
</li>
<li>
<#assign pre_date = model['dayList']['day2'] + ''>
<#assign idx = 0>
<#assign pre_hour = ''>
<#list model['time_list'] as item>
<#if item['day'] == pre_date>
<#if (item['hour'] + '') == pre_hour>
<#assign idx = idx + 0.5>
</#if>
<#assign topP = item['hour'] + idx>
<#assign topP = item['hour']>
<#assign pre_hour = item['hour'] + ''>
<span title="${item.title}" style="top:${topP}%;height:${item['add_degree']!}px;background-color: ${item['color_cd']}"></span>
<span key="${item['color_cd']?replace("#", "")}" name="p_timeline_color" title="${item.title}" style="top:${topP}%;height:${item['add_degree']!}px;background-color: ${item['color_cd']}"></span>
</#if>
</#list>
</li>
<li>
<#assign pre_date = model['dayList']['day3'] + ''>
<#assign idx = 0>
<#assign pre_hour = ''>
<#list model['time_list'] as item>
<#if item['day'] == pre_date>
<#if (item['hour'] + '') == pre_hour>
<#assign idx = idx + 0.5>
</#if>
<#assign topP = item['hour'] + idx>
<#assign topP = item['hour']>
<#assign pre_hour = item['hour'] + ''>
<span title="${item.title}" style="top:${topP}%;height:${item['add_degree']!}px;background-color: ${item['color_cd']}"></span>
<span key="${item['color_cd']?replace("#", "")}" name="p_timeline_color" title="${item.title}" style="top:${topP}%;height:${item['add_degree']!}px;background-color: ${item['color_cd']}"></span>
</#if>
</#list>
</li>
<li>
<#assign pre_date = model['dayList']['day4'] + ''>
<#assign idx = 0>
<#assign pre_hour = ''>
<#list model['time_list'] as item>
<#if item['day'] == pre_date>
<#if (item['hour'] + '') == pre_hour>
<#assign idx = idx + 0.5>
</#if>
<#assign topP = item['hour'] + idx>
<#assign topP = item['hour']>
<#assign pre_hour = item['hour'] + ''>
<span title="${item.title}" style="top:${topP}%;height:${item['add_degree']!}px;background-color: ${item['color_cd']}"></span>
<span key="${item['color_cd']?replace("#", "")}" name="p_timeline_color" title="${item.title}" style="top:${topP}%;height:${item['add_degree']!}px;background-color: ${item['color_cd']}"></span>
</#if>
</#list>
</li>
<li>
<#assign pre_date = model['dayList']['day5'] + ''>
<#assign idx = 0>
<#assign pre_hour = ''>
<#list model['time_list'] as item>
<#if item['day'] == pre_date>
<#if (item['hour'] + '') == pre_hour>
<#assign idx = idx + 0.5>
</#if>
<#assign topP = item['hour'] + idx>
<#assign topP = item['hour']>
<#assign pre_hour = item['hour'] + ''>
<span title="${item.title}" style="top:${topP}%;height:${item['add_degree']!}px;background-color: ${item['color_cd']}"></span>
<span key="${item['color_cd']?replace("#", "")}" name="p_timeline_color" title="${item.title}" style="top:${topP}%;height:${item['add_degree']!}px;background-color: ${item['color_cd']}"></span>
</#if>
</#list>
</li>
<li>
<#assign pre_date = model['dayList']['day6'] + ''>
<#assign idx = 0>
<#assign pre_hour = ''>
<#list model['time_list'] as item>
<#if item['day'] == pre_date>
<#if (item['hour'] + '') == pre_hour>
<#assign idx = idx + 0.5>
</#if>
<#assign topP = item['hour'] + idx>
<#assign topP = item['hour']>
<#assign pre_hour = item['hour'] + ''>
<span title="${item.title}" style="top:${topP}%;height:${item['add_degree']!}px;background-color: ${item['color_cd']}"></span>
<span key="${item['color_cd']?replace("#", "")}" name="p_timeline_color" title="${item.title}" style="top:${topP}%;height:${item['add_degree']!}px;background-color: ${item['color_cd']}"></span>
</#if>
</#list>
</li>
<li>
<#assign pre_date = model['dayList']['day7'] + ''>
<#assign idx = 0>
<#assign pre_hour = ''>
<#list model['time_list'] as item>
<#if item['day'] == pre_date>
<#if (item['hour'] + '') == pre_hour>
<#assign idx = idx + 0.5>
</#if>
<#assign topP = item['hour'] + idx>
<#assign topP = item['hour']>
<#assign pre_hour = item['hour'] + ''>
<span title="${item.title}" style="top:${topP}%;height:${item['add_degree']!}px;background-color: ${item['color_cd']}"></span>
<span key="${item['color_cd']?replace("#", "")}" name="p_timeline_color" title="${item.title}" style="top:${topP}%;height:${item['add_degree']!}px;background-color: ${item['color_cd']}"></span>
</#if>
</#list>
</li>
@ -183,15 +158,15 @@
<div class="time_bar" style="top:-9px;">
<span></span>
<div class="time_bar_number">
<img src="../../img/time_bar02.png" alt="">
<img src="../img/time_bar02.png" alt="">
<p>00:00</p>
</div>
</div>
<div class="time_bar02" style="top:57%;">
<span></span>
<img src="../../img/time_bar.png" alt="">
</div>
<#-- <div class="time_bar02" style="top:57%;">-->
<#-- <span></span>-->
<#-- <img src="../img/time_bar.png" alt="">-->
<#-- </div>-->
</div>
@ -219,11 +194,75 @@
</div>
<!--// 그래프 -->
<div class="fix_icon">
<button type="button"><img src="../../img/ico_image_grey_24.png" alt=""></button>
<button type="button"><img src="../../img/ico_share_grey_24.png" alt=""></button>
</div>
<!--<div class="fix_icon">
<button type="button"><img src="../img/ico_image_grey_24.png" alt=""></button>
<button id="share-list" type="button"><img style="cursor:pointer" src="../img/ico_share_grey_24.png" alt=""></button>
</div>-->
</div>
<!-- //wrap -->
</body>
<script>
function fncShowCategory(e) {
console.log("fncShowCategory()");
var attr_id = $(e).parents("div").attr("id");
console.log("attr_id: ", attr_id);
$('span[name="p_timeline_color"]').hide();
$("span[name=p_timeline_color]").each(function(index, item){
item_key = $(item).attr("key");
if(item_key == attr_id) {
$(item).show();
}
});
}
function fncAllShowCategory(e) {
console.log("fncAllShowCategory()");
$("span[name='p_timeline_color']").show();
}
// main_cont_kinds
$(".main_cont_kinds .swiper-slide a").click(function(e) {
e.stopPropagation();
if (!$(this).hasClass("on")) {
$(".main_cont_kinds li a.on").removeClass("on");
$(this).addClass("on");
}
});
var swiper = new Swiper('.swiper-container', {
slidesPerView: 5,
slidesPerGroup: 1,
spaceBetween: 10,
loopFillGroupWithBlank: true,
pagination: {
loop: false,
el: '.swiper-pagination',
clickable: true
}
});
function moveTimeLine(event) {
let y = event.clientY;
let num = y - 270;
let hour = Math.floor((num + 10) / (43/3));
let minute = Math.floor((((num + 10) % (43/3))/(43/3.001)*60)%60);
if (num < -9) {
num = -9;
hour = 0;
minute = 00;
}
if (num > 331) {
num = 331;
hour = 24;
minute = 00;
}
let coords = "num: " + num + " hour: " + hour + " min: " + minute;
$(".time_bar").css("top", num + "px");
$(".time_bar_number > p").text(hour+":"+(minute<10?"0":"")+minute);
}
</script>
</html>

Loading…
Cancel
Save