You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

626 lines
23 KiB

<#include "/m/include/index_top.ftl">
<link href="../css/custom.css?2" rel="stylesheet" type="text/css" >
<script src="../js/jquery.bxslider.js"></script>
<script type="text/javascript" src="../js/masonry.pkgd.min.js"></script>
<link rel="stylesheet" href="../css/swiper.min.css">
<script src="../js/swiper.min.js"></script>
<style>
/* main_cont_camera 이미지 불러오기 */
/* .main_cont_camera { padding-top:50px; background: url(../img/main/main_cont_img_camera_bg01.png)no-repeat top center/18px auto; } */
/* .main_cont_camera li { width:100%; padding-bottom:40px; text-align:center; background: url(../img/main/main_cont_img_camera_bg02.png)no-repeat bottom center/18px auto; } */
/* .main_cont_camera li:last-child { padding-bottom:50px; background: url(../img/main/main_cont_img_camera_bg03.png)no-repeat bottom center/18px auto; } */
.main_cont_camera input { display:none; }
/* .main_cont_camera .img_preview { position:relative; overflow:hidden; width:180px; height:170px; margin:0 auto; background:#fff; border:5px solid #fff; border-radius:20px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.2); } */
.main_cont_camera .img_preview label { display:block; width:100%; height:auto; }
.main_cont_camera .img_preview img { position: absolute; width:100%; height:100%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* 퍼블리싱 수정 css */
.main_cont_camera { padding-top:50px; background: none; }
.main_cont_camera li { position:relative; width:100%; padding-bottom:200px; text-align:center; background: none; display: flex; }
.main_cont_camera li:last-child { padding-bottom:50px; background: none; }
.main_cont_camera .img_preview { position:relative; overflow:hidden; width: 70px; height: 70px; margin: 0 43px 0 20px; background:#fff; border:5px solid #fff; border-radius:20px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.2); }
.main_cont_camera .img_preview:after {
content: "";
display: block;
padding-bottom: 100%;
}
</style>
<body>
<!-- wrap -->
<div class="wrap">
<!-- header -->
<header class="header_wrapper">
<div class="left_btn_box">
<a href="${URL_ROOT}/m/member_env/setting_nm.do?view_nm=setting" class="side_Rbtn setting_btn hidden">설정</a>
</div>
<div class="center_btn_box">
<h1 class="brand_logo hidden">이유식당</h1>
</div>
<div class="right_btn_box">
<#if model['recent_notice_cnt'] gt 0 >
<a href="${URL_ROOT}/m/bf_notice/list_bf_notice.do" class="side_Rbtn noti_new_btn hidden">알림센터${model['recent_notice_cnt']}</a>
<#else>
<a href="${URL_ROOT}/m/bf_notice/list_bf_notice.do" class="side_Rbtn noti_btn hidden">알림센터</a>
</#if>
</div>
</header>
<!-- main -->
<div class="main">
<#if model['rm_child']['smc_no']?exists == false>
<#include "/m/index/include_nochild.ftl">
<#else>
<script>
function CMD_MEASUREMENT_HEIGHT(smc_no) {
var cmd = 'CMD_MEASUREMENT_HEIGHT';
var args = {
smc_no: smc_no,
};
try{
window.interface.executeInterface(function(r){console.log('sussess:', r);}, function(r){console.log('fail:', r);}, cmd, args);
}catch(e){
alert(e);
}
}
</script>
<form id="frm" name="frm" method="post" action="${URL_ROOT}/m/bf_daily_nutrition/insert_bf_daily_nutrition.do" enctype="multipart/form-data">
<input type="hidden" id="smc_no" name="smc_no" value="${model['rm_child']['smc_no']!}" />
<input type="hidden" id="nutirition_cd_no" name="nutirition_cd_no" />
<!-- main_top -->
<div class="main_top">
<!-- main_pofile -->
<div class="main_pofile">
<!-- main_pofile_slider -->
<div class="bxslider-wrapper" style="visibility: hidden; opacity: 0;">
<ul class="main_pofile_slider">
<#if (model['lm_child'])?has_content>
<!-- 현재 선택한 아이정보만 출력 -->
<#list model['lm_child'] as item>
<li>
<div class="main_pofile_txt" style="width: 100%; padding-right: 20px;">
<div class="cont">
<div>
<h2>${item['name']!} (${item['gender_ko']!})</h2>
<p>${(item['past_day'])!}일 (${(item['past_day']?number/7)!}주 ${(item['past_day']?number%7)!}일/${item['past_month']!}개월 ${(item['past_day']?number%7)!}일)</p>
</div>
<div class="main_pofile_img">
<p>
<a href ="${URL_ROOT}/m/bf_family_baby/view_bf_family_baby.do?smc_no=${item['smc_no']!}" ><img src="<#if item['append_300_img_file']?exists>${URL_ROOT}/file/get_img.do?mt_file_seq=${item['append_300_img_file']}<#else>${URL_STATIC_ROOT}/m/img/main/main_profile_img02.png</#if>" alt="프로필 사진" /></a>
</p>
</div>
</div>
<div class="cont">
<p class="d_day">
<#if item['d_day_year']? has_content>
<a style='color:white' href="${URL_ROOT}/m/member_env/setting_env_viewnm.do?return_url=setting&view_nm=view_d_day&viewYear=${item['d_day_year']}&viewMonth=${item['d_day_month']}">
<#else>
<a style='color:white' href="${URL_ROOT}/m/member_env/setting_env_viewnm.do?return_url=setting&view_nm=view_d_day">
</#if>
<#if item['day100'] gt 0>
<#if item['diff_d_day'] gt item['day100'] || item['diff_d_day'] lt 0>
100일 D-${(item['day100'])!}일,${item['day100date']!}
<#elseif item['diff_d_day'] gt 0>
${(item['d_title'])!} D-${(item['diff_d_day'])!}일,${item['d_day']!}
</#if>
<#elseif item['day200'] gt 0>
<#if item['diff_d_day'] gt item['day200'] || item['diff_d_day'] lt 0>
200일 D-${(item['day200'])!}일,${item['day200date']!}
<#elseif item['diff_d_day'] gt 0>
${(item['d_title'])!} D-${(item['diff_d_day'])!}일,${item['d_day']!}
</#if>
<#elseif item['day300'] gt 0>
<#if item['diff_d_day'] gt item['day300'] || item['diff_d_day'] lt 0>
300일 D-${(item['day300'])!}일,${item['day300date']!}
<#elseif item['diff_d_day'] gt 0>
${(item['d_title'])!} D-${(item['diff_d_day'])!}일,${item['d_day']!}
</#if>
<#elseif item['day365'] gt 0>
<#if item['diff_d_day'] gt item['day365'] || item['diff_d_day'] lt 0>
첫돌 D-${(item['day365'])!}일,${item['day365date']!}
<#elseif item['diff_d_day'] gt 0>
${(item['d_title'])!} D-${(item['diff_d_day'])!}일,${item['d_day']!}
</#if>
<#elseif item['day365'] lt 0>
<#if item['diff_d_day'] gt 0>
${(item['d_title'])!} D-${(item['diff_d_day'])!}일,${item['d_day']!}
<#else>
설정된 D-Day가 없습니다.
</#if>
</#if>
</a>
</p>
<a href="${URL_ROOT}/m/bf_growth_body/view_bf_growth_body_input.do?return_url=index"><p class="d_day">성장기록</p></a>
</div>
</div>
</li>
</#list>
</#if>
</ul>
</div>
<!-- //main_pofile_slider -->
<!-- main_pofile_info_wrap -->
<div class="main_pofile_info_wrap">
<!-- main_pofile_info -->
<div class="main_pofile_info main_pofile_info01">
<!-- main_pofile_info_txt -->
<div class="main_pofile_info_txt txt01 active">
<div class="main_pofile_info_txt02">
<strong id="l_height"><#if model['rm_last_h']['height']?exists>${model['rm_last_h']['height']!}<#else>-</#if></strong>cm
</div>
</div>
<!-- main_pofile_info_txt -->
<#if model['rm_last_w']?exists == true>
<div class="main_pofile_info_txt txt02">
<div class="main_pofile_info_txt02">
<strong id="l_weight"><#if model['rm_last_w']['weight']?exists>${model['rm_last_w']['weight']!}kg<#else>-</#if></strong></div>
</div>
</#if>
<div class="main_pofile_info_tit">
<span class="txt01 active">cm</span>
<span class="txt02">kg</span>
</div>
</div>
<!-- main_pofile_info -->
<div class="main_pofile_info main_pofile_info02">
<!-- main_pofile_info_txt -->
<div class="main_pofile_info_txt txt01 active">
<div class="main_pofile_info_txt02">
<#if model['rm_child']['totalNutrition']?exists == true>
<strong id="totalNutrition">${model['rm_child']['totalNutrition']}</strong>점
</#if>
<#if model['rm_child']['totalNutrition']?exists == false>
<strong id="totalNutrition">-</strong>
</#if>
</div>
</div>
<!-- main_pofile_info_txt -->
<div class="main_pofile_info_txt txt02">
<div class="main_pofile_info_txt02">
<#if model['rm_child']['totalFood']?exists == true>
<strong id="totalFood">${model['rm_child']['totalFood']}</strong>점
</#if>
<#if model['rm_child']['totalFood']?exists == false>
<strong id="totalFood">-</strong>
</#if>
</div>
</div>
<div class="main_pofile_info_tit">
<span class="txt01 active">영양</span>
<span class="txt02">식품</span>
</div>
</div>
</div>
<!-- //main_pofile_info_wrap -->
<!-- main_cont_kinds -->
<!-- class명 active 를 넣으면 display:block 처리, 빼면 none 처리입니다. -->
<div class="main_cont_kinds active">
<div class="swiper-container">
<div class="swiper-wrapper">
<#list model['category_list'] as item>
<#if item['view_yn'] == 'Y'>
<div class="swiper-slide">
<a href="javascript:void(0);" style="background-color:${item['color_cd']}" key="${item['val_1']!}"><span>${item['title']!}</span></a>
</div>
</#if>
</#list>
<div class="swiper-slide">
<a href="${URL_ROOT}/m/member_env/setting_env_viewnm.do?return_url=setting&view_nm=view_set_record_order"><span>수정<br>설정</span></a>
</div>
</div>
</div>
</div>
<!-- //main_cont_kinds -->
<!-- main_cont_last_status -->
<div class="main_cont_last_status">
<div>
<p>마지막 식사</p>
<#if (model['lm_last_meal'])?has_content>
<span id="last_meal">${model['lm_last_meal']['ago']!} / ${model['lm_last_meal']['time_val']!}</span>
</#if>
<#if (model['lm_last_meal'])?has_content == false>
<span id="last_meal">-</span>
</#if>
</div>
<div>
<p>마지막 수면</p>
<#if (model['lm_last_sleep'])?has_content>
<span id="last_sleep">${model['lm_last_sleep']['ago']!} / ${model['lm_last_sleep']['time_val']!}</span>
</#if>
<#if (model['lm_last_sleep'])?has_content == false>
<span id="last_sleep">-</span>
</#if>
</div>
<div>
<p>마지막 대소변</p>
<#if (model['lm_last_bedpan'])?has_content>
<span id="last_bedpan">${model['lm_last_bedpan']['ago']!} / ${model['lm_last_bedpan']['time_val']!}</span>
</#if>
<#if (model['lm_last_bedpan'])?has_content == false>
<span id="last_bedpan">-</span>
</#if>
</div>
</div>
<!-- //main_cont_last_status -->
</div>
<!-- //main_pofile -->
</div>
<!-- //main_top -->
<style>
.img_title{
position: absolute;
top:0%;
right:0%;
z-index:9999;
}
</style>
<!-- main_cont -->
<div class="main_cont">
<!-- 타임라인 line -->
<div class="main_cont_line"></div>
<!-- 이미지 업로드 main_cont_camera -->
<ul id="ul_photo" class="main_cont_camera">
<#assign nutirition_cd_no_title = ''>
<#assign ago = ''>
<#if (model['lm_nutrition'])?has_content>
<#list model['lm_nutrition'] as item>
<#assign nutirition_cd_no_title = ''>
<#assign ago = item['ago']>
<li name="li_img_preview" onclick="location.href='${URL_ROOT}/m/bf_daily_nutrition/view_bf_daily_nutrition.do?dn_no=${item['dn_no']}'" >
<div class="img_preview">
<#if (item['nutirition_cd_no_title'])?has_content>
<#assign nutirition_cd_no_title = item['nutirition_cd_no_title']>
<#assign memo = item['memo']!>
<#assign time_text = item['time_val']!>
</#if>
<img src="<#if item['file_seq']?exists>${URL_ROOT}/file/get_img.do?mt_file_seq=${item['file_seq']}<#else>${URL_STATIC_ROOT}/m/img/child/child_pic_02.png</#if>" alt="사진영역">
</div>
<div class="main_cont_circle" style="border-color: ${item['color_cd']};"></div>
<div class="main_cont_info">
<div class="info_title">
<p style="color: ${item['color_cd']};"><#if (model['lm_nutrition'])?has_content>${nutirition_cd_no_title}</#if></p>
<span class="info_time">${ago}</span>
</div>
<div class="info_amount">
<p>${time_text}</p>
</div>
<div class="info_recode" style="border-color: ${item['color_cd']};" onclick="location.href='${URL_ROOT}/m/bf_daily_nutrition/view_bf_daily_nutrition.do?dn_no=${item['dn_no']}'">
<p style="color: ${item['color_cd']};">순간의 기록</p>
<span>
${memo}<br/>
</span>
</div>
</div>
</li>
</#list>
</#if>
<li>
<div class="img_preview">
<p><label for="append_src_img_file"><img id="img_preview" src="../img/main/main_cont_img_camera.png" alt="사진영역"></label></p>
</div>
<input type="file" id="append_src_img_file" name="append_src_img_file">
</li>
</ul>
<!-- //main_cont_camera -->
</div>
<!-- //main_cont -->
</form>
</#if>
</div>
<!-- //main -->
<!-- float chatbot -->
<#if model[ 'rm_child']? has_content>
<a href="http://devops.lookylooks.ai:42110/browser_common_index.html?site_id=7973031d-157e-4140-914e-8f39059098d2&cb_id=31ef0fe4-3c2d-4d5a-b73b-76f7213b1737&ch_id=null&in=test_in_id&phone_num=${model['rm_mem']['phone_num']!}&name=${model['rm_child']['name']}&month=${(model['rm_child']['past_month'])}">
<div class="float_chatbot">
<img src="https://ccbot.hanaw.com/img/hana_icon.JPG">
</div>
</a>
<#else>
<a href="http://devops.lookylooks.ai:42110/browser_common_index.html?site_id=7973031d-157e-4140-914e-8f39059098d2&cb_id=31ef0fe4-3c2d-4d5a-b73b-76f7213b1737&ch_id=null&in=test_in_id&phone_num=${model['rm_mem']['phone_num']!}&name=null&month=null">
<div class="float_chatbot">
<img src="https://ccbot.hanaw.com/img/hana_icon.JPG">
</div>
</a>
</#if>
</div>
<!-- //wrap -->
<#if model['tutorial_cnt'] == 0>
<#include "/m/include/index_tutorial.ftl">
</#if>
<script>
let not_h = '아이 키 성장 기록이 없습니다';
let not_w = '아이 체중 성장 기록이 없습니다';
var arr_smc_no = [
<#if (model['lm_child'])?has_content>
<#list model['lm_child'] as item>
${item['smc_no']},
</#list>
</#if>
];
var ajax_child_info = function(idx){
let smc_no = arr_smc_no[idx];
$.ajax({
url:'${URL_ROOT}/m/index/ajax_index.do',
type:'get',
data: {
"smc_no" : smc_no
},
dataType:'json',
}).done(function(result) {
console.log(result);
if (result === undefined){
Swal.fire({text: '오류가 발생했습니다.'})
}else{
var URL_ROOT = result.URL_ROOT;
//키,체중
if(result.rm_last_h != null) {
$("#l_height").text(result.rm_last_h.height);
} else {
$("#l_height").text("-");
}
if(result.rm_last_w != null) {
$("#l_weight").text(result.rm_last_w.weight);
} else {
$("#l_weight").text("-");
}
//마지막 식사,수면,대소변
if(result.lm_last_meal != null) {
$("#last_meal").text(result.lm_last_meal.ago + "/" + result.lm_last_meal.time_val);
} else {
$("#last_meal").text("-");
}
if(result.lm_last_sleep != null) {
$("#last_sleep").text(result.lm_last_sleep.ago + "/" + result.lm_last_sleep.time_val);
} else {
$("#last_sleep").text("-");
}
if(result.lm_last_bedpan != null) {
$("#last_bedpan").text(result.lm_last_bedpan.ago + "/" + result.lm_last_bedpan.time_val);
} else {
$("#last_bedpan").text("-");
}
//영양점수
if(result.rm_child.totalNutrition != null) {
$("#totalNutrition").text(result.rm_child.totalNutrition);
} else {
$("#totalNutrition").text("-");
}
//식품점수
if(result.rm_child.totalFood != null) {
$("#totalFood").text(result.rm_child.totalFood);
} else {
$("#totalFood").text("-");
}
$("#ul_photo").html("");
var strRecordList = "";
if(result.lm_nutrition != null) {
for(var i=0;i<result.lm_nutrition.length;i++) {
var item = result.lm_nutrition[i];
// var img_href = "" + item.dn_no + "\"";
strRecordList += " <li name='li_img_preview' onclick='fncGoViewEdit(" + item.dn_no + ")'>";
strRecordList += " <div class='img_preview'>";
if(item.append_src_img_file == null) {
strRecordList += " <img src='" + URL_ROOT + "/bf/m/img/child/child_pic_02.png' alt='사진영역'>";
} else {
strRecordList += " <img src='/bf/file/get_img.do?mt_file_seq=" + item.append_src_img_file + "' alt='사진영역'>";
}
strRecordList += " </div>";
strRecordList += " <div class='main_cont_circle' style='border-color: " + item.color_cd + ";'></div>";
strRecordList += " <div class='main_cont_info'>";
strRecordList += " <div class='info_title'>";
strRecordList += " <p style='color: #A1D3E3;'>" + item.nutirition_cd_no_title + "</p>";
strRecordList += " <span class='info_time'>" + item.ago + "</span>";
strRecordList += " </div>";
strRecordList += " <div class='info_amount'>";
if(item.time_val != null) {
strRecordList += " <p>" + item.time_val + "</p>";
}
strRecordList += " </div>";
strRecordList += " <div class='info_recode' style='border-color: " + item.color_cd + ";' onclick='fncGoViewEdit(" + item.dn_no + ")'>";
strRecordList += " <p style='color: #A1D3E3;'>순간의 기록</p>";
strRecordList += " <span>";
if(item.memo != null) {
strRecordList += item.memo;
}
strRecordList += " </span>";
strRecordList += " </div>";
strRecordList += " </div>";
strRecordList += " </li>";
}
strRecordList += " <li>";
strRecordList += " <div class='img_preview'>";
strRecordList += " <p><label for='append_src_img_file'><img id='img_preview' src='../img/main/main_cont_img_camera.png' alt='사진영역'></label></p>";
strRecordList += " </div>";
strRecordList += " <input type='file' id='append_src_img_file' name='append_src_img_file'>";
strRecordList += " </li>";
$("#ul_photo").html(strRecordList);
}
}
}.bind(this))
}
//기록수정화면 이동
function fncGoViewEdit(dn_no) {
location.href = "/bf/m/bf_daily_nutrition/view_bf_daily_nutrition.do?dn_no=" + dn_no;
}
// main_pofile_slider 프로필 슬라이드
$(document).ready(function(){
$('.main_pofile_slider').bxSlider({
auto: false,
speed: 500,
pause: 4000,
mode:'horizontal',
autoControls: false,
controls: false,
pager:true,
infiniteLoop: false,
onSliderLoad: function(){
try {
$('.bxslider-wrapper').css('visibility', 'visible').animate({opacity: 1});
} catch(e) {}
},
onSlideAfter: function($slideElement, oldIndex, newIndex) {
// $(".main_cont_kinds").hide();
ajax_child_info(newIndex);
}
});
// $(".bx-pager-link").removeClass("active");
// $(".bx-pager-link").eq(smc_index).addClass("active");
init();
});
window.bxslider_mouse_over_slide=null;
$(function() {
// for desktop get link event
$('.main_pofile_slider li a').mouseover(function(event) {
window.bxslider_mouse_over_slide=$(this);
});
$('.main_pofile_slider li a').mouseleave(function(event) {
setTimeout(function(){
window.bxslider_mouse_over_slide = null;
}, 200);
});
// for mobile touch event
$('.main_pofile_slider li a').on('touchstart', function(event) {
window.bxslider_mouse_over_slide=$(this);
});
});
$('.main_pofile_slider ').parent().on('click', function (event) {
//Check if we've got a slide under the mouse
if ((window.bxslider_mouse_over_slide!=null)){
var hrefUrl = window.bxslider_mouse_over_slide.attr('href');
window.location.href = hrefUrl;
}
});
var init = function(){
// main_cont_camera 이미지 업로드
$('#append_src_img_file').on('change', function() {
ext = $(this).val().split('.').pop().toLowerCase(); //확장자
//배열에 추출한 확장자가 존재하는지 체크
if($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
resetFormElement($(this)); //폼 초기화
window.alert('이미지 파일이 아닙니다! (gif, png, jpg, jpeg 만 업로드 가능)');
} else {
file = $('#append_src_img_file').prop("files")[0];
blobURL = window.URL.createObjectURL(file);
$('#img_preview').attr('src', blobURL);
$('.img_preview').slideDown(); //업로드한 이미지 미리보기
$(this).slideUp(); //파일 양식 감춤
$(".main_cont_kinds").show();
//$(".main_cont_kinds").attr('class','main_cont_kinds active');
}
});
$(".main_pofile_info_tit>span").click(function(e){
e.stopPropagation();
if( !$(this).hasClass("active") ){
$(this).siblings().removeClass("active");
$(this).addClass("active");
var id = $(this).attr('class').replace("active","");
$(this).parent().parent().children(".main_pofile_info_txt").removeClass("active");
$(this).parent().parent().children("." + id).addClass("active");
}
});
// 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");
$('#nutirition_cd_no').val($(this).attr('key'));
if($('#smc_no').val() == ''){
Swal.fire({text: '아이를 먼저 등록해 주세요'});
} else{
$('#frm').submit();
}
}
});
}
var swiper = new Swiper('.swiper-container', {
slidesPerView: 5,
slidesPerGroup: 1,
spaceBetween: 10,
loopFillGroupWithBlank: true,
pagination: {
loop: false,
el: '.swiper-pagination',
clickable: true
},
});
function fncGoDday(d_day_year, d_day_month) {
if(d_day_year == null) {
location.href = "${URL_ROOT}/m/member_env/setting_env_viewnm.do?return_url=setting&view_nm=view_d_day";
} else {
location.href = "${URL_ROOT}/m/member_env/setting_env_viewnm.do?return_url=setting&view_nm=view_d_day&viewYear=" + d_day_year + "&viewMonth=" + d_day_month;
}
}
</script>
<!-- 하단 네비 iyu_nav -->
<#include "/m/include/index_bottom_menu.ftl">
<!-- //iyu_nav -->
<#include "/m/include/index_bottom.ftl">