끄적끄적

Time Catcher Project - 진행 상황

integerJI 2020. 7. 7. 21:46

진행 상황

 

base.html 추가

 

{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />

    <title>TIME catcher</title>

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="{% static 'img/tc-favicon.ico' %}" />

    <!-- Font Awesome icons (free version) -->
    <script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" crossorigin="anonymous"></script>
    
    <!-- Google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic"
        rel="stylesheet" type="text/css" />

    <!-- Third party plugin CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css"
        rel="stylesheet" />

    <!-- Core theme CSS (includes Bootstrap) -->
    <link href="{% static 'css/styles.css' %}" rel="stylesheet" />
    <!-- Custom styles for this template-->
    <link href="{% static 'css/sb-admin-2.min.css' %}" rel="stylesheet">

    <!-- stopwatch-->
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <!-- Bootstrap core JS-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>

    <!-- Third party plugin JS-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
    <script src="{% static 'vendor/chart.js/Chart.min.js' %}"></script>

    <!-- Page level custom scripts -->
    <!-- <script src="{% static 'js/demo/chart-pie-demo.js' %}"></script> -->
    <!-- stopwatch-->
    <!-- <script type="text/javascript" src="{% static 'js/stopwatch.js' %}"></script> -->

</head>

<body>
    <!-- TOP Navbar -->
    <nav class="navbar navbar-expand-lg navbar-white bg-white py-3" id="mainNav">
        <div class="container">
            <a class="navbar-brand" href="{% url 'index' %}"><img src="{% static 'img/tc-logo.png' %}" alt="tc-logo.png"
                    style="width: 30%;"></a>
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
                aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto my-2 my-lg-0">
                    <li class="nav-item"><a class="nav-link" href="#">CALENDER</a></li>
                    <li class="nav-item"><a class="nav-link" href="{% url 'mypage' %}">MY PROFILE</a></li>
                </ul>
            </div>
        </div>
    </nav>

    {% block content %}
    {% endblock %}

</body>
</html>

 

base에서 css, js, navbar 관리

 

{% extends 'base.html' %}
{% load static %}
{% block content %}

<!-- Masthead-->
<header class="masthead">
  <div class="container h-100">
    <div class="d-flex justify-content-center row h-100">
      <div class="row h-100 w-50 text-start">
        <div class="container d-flex align-items-center justify-content-center">
          <div class="container">

            <p class="text-white-75 font-weight-light mb-3" 
                  style="font-family: SDGtNeobUni-aUl;
                        font-size: 22px;
                        font-weight: normal;
                        font-stretch: normal;
                        font-style: normal;
                        line-height: 1.45;
                        letter-spacing: normal;
                        text-align: left;
                        color: #ffffff;">
                      내가 놓치고 있는 시간들은 얼마일까?</p>
            <h1 class="text-uppercase text-white-90 font-weight-normal mb-4" 
                  style="font-family: SDGtNeobUni-eSb;
                        font-size: 40px;
                        font-weight: normal;
                        font-stretch: normal;
                        font-style: normal;
                        line-height: 1.28;
                        letter-spacing: normal;
                        text-align: left;
                        color: #3e3a39;">
                        타임캐쳐,<br>더 나은<br>내일을 위한 선택</h1>

            <img src="{% static 'img/tc-bt-start-big.png' %}" style="width: 20%;" type="button" id="startbtn">

            <button type="button" class="btn btn-light" id="pausebtn">
              일시정지
            </button>
            <img src="{% static 'img/tc-bt-stop-big.png' %}" style="width: 20%;" type="button" id="stopbtn">

          </div>
        </div>
      </div>

      <div class="row h-100 w-50 text-start justify-content-center">
        <div class="d-flex align-self-center">
          <div class="card-body text-center">

            <button type="button" class="btn btn-lg btn-light" disabled>나의 시간</button>
            <div id='box' class="box">
              <div id='timerBox' class="timerBox">
                <div id="time" class="time">00:00:00</div>
              </div>
            </div>
          </div>
          
        </div>
      </div>

    </div>
  </div>

  <!-- Core theme JS-->
  <script src="{% static 'js/scripts.js' %}"></script>

</header>

<script>

  // Set new default font family and font color to mimic Bootstrap's default styling
  Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
  Chart.defaults.global.defaultFontColor = '#858796';

  $("#pausebtn").hide();
  $("#stopbtn").hide();

  window.onload = function () {
    // startbtn click css change
    document.getElementById('startbtn').onclick = function () {
      $("#startbtn").hide();
      $("#pausebtn").show();
      $("#stopbtn").show();
    }
    // pausebtn click css change
    document.getElementById('pausebtn').onclick = function () {
      $("#startbtn").show();
      $("#pausebtn").hide();
      $("#stopbtn").show();
    }

    // stopbtn 누르면 css 적용
    // 어차피 저장하면 ajax가 새로고침하니까 필요없음
    // document.getElementById('stopbtn').onclick = function() { 
    //   $("#startbtn").show();
    //   $("#pausebtn").show();
    //   $("#stopbtn").hide();
    //

  };

  // stop
  var time = 0;
  var starFlag = true;
  $(document).ready(function () {
    buttonEvt();
  });

  function init() {
    document.getElementById("time").innerHTML = "00:00:00";
  }

  function buttonEvt() {
    var hour = 0;
    var min = 0;
    var sec = 0;
    var timer;

    // start btn
    $("#startbtn").click(function () {

      if (starFlag) {
        $(".fa").css("color", "#FAED7D")
        this.style.color = "#4C4C4C";
        starFlag = false;

        if (time == 0) {
          init();
        }

        timer = setInterval(function () {
          time++;

          min = Math.floor(time / 60);
          hour = Math.floor(min / 60);
          sec = time % 60;
          min = min % 60;

          var th = hour;
          var tm = min;
          var ts = sec;
          if (th < 10) {
            th = "0" + hour;
          }
          if (tm < 10) {
            tm = "0" + min;
          }
          if (ts < 10) {
            ts = "0" + sec;
          }

          document.getElementById("time").innerHTML = th + ":" + tm + ":" + ts;
        }, 1000); // END timer
      }
    }); // END startbtn click

    // pause btn
    $("#pausebtn").click(function () {
      if (time != 0) {
        $(".fa").css("color", "#FAED7D")
        this.style.color = "#4C4C4C";
        clearInterval(timer);
        starFlag = true;
      }
    }); // END pausebtn click

    // stop btn
    $("#stopbtn").click(function () {

      if (time != 0) {
        $(".fa").css("color", "#FAED7D")
        this.style.color = "#4C4C4C";
        clearInterval(timer);
        starFlag = true;

        $.ajax({
          type: "POST",
          url: "{% url 'timesave' %}",
          data: { 'csrfmiddlewaretoken': '{{ csrf_token }}', 'time': time },
          dataType: "text",
          success: function (data) {
            console.log('성공');
            location.replace("{% url 'index' %}");
          },
          error: function (request, status, error) {
            console.log('실패');
            console.log(request);
            console.log(error);
          }
        }); // END AJAX
        time = 0;
        init();
      } // END IF

    }); // END stopbtn click

  }

</script>
{% endblock %}

 

 

main같은 경우는 버튼을 누를시 css 수정하였고 저장하기를 누르면 데이터를 저장하기

 

mypage

 

{% extends 'base.html' %}
{% load static %}
{% block content %}

<!--
  <a>{{nick}} - 닉</a>
  <br>
  <a>{{email}} - 이메일</a>
  <br>
  <a>{{birth_date}} - 생일</a>
  <br>
-->

<div id="wrapper">
  <ul class="navbar-nav sidebar sidebar-dark accordion" id="accordionSidebar">
    <li class="nav-item active d-flex justify-content-center">
        <div class="text-left">
          <a
            style="font-family: SDGtNeobUni-gEb; font-size: 20px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.35; letter-spacing: normal; text-align: left; color: #3e3a39;">안녕하세요
            :)</a>
          <br>
          <a
            style="font-family: SDGtNeobUni-gEb; font-size: 20px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.35; letter-spacing: normal; text-align: left; color: #3e3a39;">{{ id }}님</a>
          <br>
          <a
            style=" font-family: SDGtNeobUni-bLt; font-size: 14px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.93; letter-spacing: normal; text-align: left; color: #a0a0a0; letter-spacing: 0.38px;">@{{ id }}</a>
        </div>
    </li>

    <a><hr style="border: solid 1px #f3f3f3;" class="mb-0 mt-0"></a>

    <li class="nav-item active">
      <a class="nav-link" href="{% url 'profile_update' %}" style="font-family: SDGtNeobUni-bLt;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.93;
            letter-spacing: normal;
            text-align: left;
            color: #4c4c4c;">
        <span class="d-flex align-items-center justify-content-center">개인정보 수정</span></a>
    </li>

    <a><hr style="border: solid 1px #f3f3f3;" class="mb-0 mt-0"></a>

    <li class="nav-item active">
      <a class="nav-link" href="#" style="font-family: SDGtNeobUni-bLt;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.93;
            letter-spacing: normal;
            text-align: left;
            color: #4c4c4c;">
        <span class="d-flex align-items-center justify-content-center">공지사항</span></a>
    </li>

    <a><hr style="border: solid 1px #f3f3f3;" class="mb-0 mt-0"></a>

    <li class="nav-item active">
      <a class="nav-link" href="#" style="font-family: SDGtNeobUni-bLt;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.93;
            letter-spacing: normal;
            text-align: left;
            color: #4c4c4c;">
        <span class="d-flex align-items-center justify-content-center">문의 / 건의하기</span></a>
    </li>
    <a><hr style="border: solid 1px #f3f3f3;" class="mb-0 mt-0"></a>
  </ul>

  <div id="content-wrapper" class="d-flex align-items-center" style="background-color: #f6f6f6;">
    <div id="content">
      <div class="chart-pie pt-4 pb-2">
        <canvas id="myPieChart"></canvas>
      </div>
    </div>
  </div>
</div>

<script>

  var sum = Number("{{sum}}");

  // Pie Chart Example
  var ctx = document.getElementById("myPieChart");
  var myPieChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ["Direct", "Referral", "Social"],
      datasets: [{
        data: [sum, 50, 20],
        backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'],
        hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf'],
        hoverBorderColor: "rgba(234, 236, 244, 1)",
      }],
    },
    options: {
      maintainAspectRatio: false,
      tooltips: {
        backgroundColor: "rgb(255,255,255)",
        bodyFontColor: "#858796",
        borderColor: '#dddfeb',
        borderWidth: 1,
        xPadding: 15,
        yPadding: 15,
        displayColors: false,
        caretPadding: 10,
      },
      legend: {
        display: false
      },
      cutoutPercentage: 0,
    },
  });

</script>

{% endblock %}

원형 그래프를 마이페이지로 이동

 

---

 

지속적으로 수정중

 

 

스탑워치는 https://myhappyman.tistory.com/21

 

Javascript - 스톱워치(stopwatch) 만들기

javascript(jquery)를 활용하여 재생, 일시정지, 멈춤 기능이 있는 스탑워치를 만들어 보겠다. 시간은 시 분 초만 표시한다. 1. 재생버튼은 시작한다. 2. 일시정지 버튼은 잠시 멈추는 기능으로 재생버�

myhappyman.tistory.com

 

해당 사이트를 참고햇습니다.

 

 

저작자표시

'끄적끄적' 카테고리의 다른 글

js와 css를 적용 할 때 캐시 누적 방지하기  (0) 2020.07.08
myPieChart, chart.js 크기 조절하기  (0) 2020.07.07
chartjs-render-monitor / chart.js 도넛 굵기 조절하기  (0) 2020.07.05
Timecatcher  (0) 2020.07.02
동선 메모 웹 만들기  (0) 2020.06.26

'끄적끄적'의 다른글

  • 현재글Time Catcher Project - 진행 상황

관련글

댓글

티스토리툴바