@ -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" s rc="../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>