harlanji
/
dev-practice
의 미러 https://github.com/harlanji/dev-practice.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295
							<html>
  <head>

<script>

function importRssFeed (feedUrl) {

  var rssRequest = new XMLHttpRequest();


  rssRequest.onreadystatechange = function (e) {
    var r = rssRequest;
    if (r.readyState == XMLHttpRequest.DONE) {
      if (r.status >= 200 && r.status < 300) {
        console.log("Got RSS (" + r.status + "): ");

        var items = importRSSDoc(r.responseXML);
        populateItems( items );
        createPlot( items );
      }
    }
  };

  //rssRequest.open("GET", "bed-harlanji.xml");

  rssRequest.open("GET", feedUrl);
  rssRequest.send();

}

function importRSSDoc( rssDoc ) {
  console.log("importRSSDoc:");
  console.log( rssDoc );

  //var author = rssDoc.querySelector("generator").textContent.trim();

  var items = Array.from( rssDoc.querySelectorAll("item") );
  items = items.map(function (i) {
    var item = {
      title: i.querySelector("title").textContent.trim(),
      date: new Date( i.querySelector("pubDate").textContent.trim() ),
      description: i.querySelector("description").textContent.trim()
    };

    var occurenceParts = splitString( item.description, ":", 2);


    item.occurence = parseInt( occurenceParts[0] ) || 1;
    item.occurenceNote = occurenceParts[1].trim();

    if (item.occurenceNote == "") {
      item.occurenceNote = "Morning routine";
    }

    return item;
  });


  items = items.sort(function (a, b) {
    return b.date - a.date;
  });

  console.log("items:");
  console.log(items);

  return items;
}


function populateItems( items ) {
  console.log("populateItems");
  console.log( items );

  var rows = items.map(function (item) {
    var row = document.createElement( "tr" );
    var date = document.createElement( "td" );
    var occurence = document.createElement( "td" );
    var note = document.createElement( "td" );

    date.textContent = dateString( item.date );
    occurence.textContent = item.occurence;
    note.textContent = item.occurenceNote;

    row.appendChild( date );
    row.appendChild( occurence );
    row.appendChild( note );

    return row;
  });

  var tableBody = document.querySelector("#bed-makings tbody");
  console.log("populate: ");
  console.log(tableBody);
  console.log(rows);

  while (tableBody.lastChild) {
    tableBody.removeChild(tableBody.lastChild);
  }

  rows.forEach(function (row) {
    tableBody.appendChild(row);
  });
}

function dateString (date) {
//  return "d: " + date;

  var str = (date.getYear() + 1900) + "-"
              + new String(date.getMonth() + 1).padStart(2, "0") + "-"
              + new String(date.getDate()).padStart(2, "0") + " "
              + new String(date.getHours()).padStart(2, "0") + ":"
              + new String(date.getMinutes()).padStart(2, "0") + ":"
              + new String(date.getSeconds()).padStart(2, "0") + " ";

  var tzOffset = date.getTimezoneOffset() / 60;

  if (tzOffset >= 0) {
    str += "+";
  }

  str += new String(tzOffset * 100).padStart(4, "0");
           

  return str;
}


function splitString(string, delimiter, n) {
    var parts = string.split(delimiter);
    return parts.slice(0, n - 1).concat([parts.slice(n - 1).join(delimiter)]);
}

</script>

<script defer data-domain="cityapper.com" src="https://pa.cityapper.com/js/plausible.js"></script>

  <script src="vis-timeline-graph2d.min.js"></script>
  <link href="vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />

  <script src="suncalc.js"></script>

  </head>
  <body>

<script>

function importAuthorSubmitted( form ) {
  console.log("submitted:");

  console.log(form);
}

var authors = {
  "HarlanJI": "https://harlanji.com/bed.xml",
  "Marty": "https://harlanji.com/bed-marty.xml"
}

function populateAuthors () {
  var authorsElem = document.querySelector("#author");

  while(authorsElem.lastChild) {
    authorsElem.removeChild(authorsElem.lastChild);
  }

  Object.entries(authors).forEach(function (e, i) {
    var option = document.createElement("option");
    option.value = e[1];
    option.textContent = e[0];

    if ( i == 0 ) {
      option.selected = "selected";
    }

    authorsElem.appendChild(option);

    console.log(e);
  });

  authorsElem.dispatchEvent(new Event('change'));
}

function startOfDay (date) {
  var startDate = new Date(date);

  startDate.setHours(0);
  startDate.setMinutes(0);
  startDate.setSeconds(0);
  startDate.setMilliseconds(0);

  return startDate;
}


function createPlot ( feedItems ) {

  console.log("createPlot");


  var container = document.getElementById('visualization');

  while( container.lastChild ) {
    container.removeChild( container.lastChild );
  }


  var items = feedItems.map(function (item) {
     var startDate = startOfDay(item.date);

     return {
       x: startDate,
       y: (item.date - startDate) / (1000 * 60),
       group: 0
     };
  });

  // feed items are in descending order
  var firstDate = startOfDay( feedItems[ feedItems.length - 1 ].date );
  var lastDate = startOfDay( feedItems[ 0 ].date );

  var firstTimes = SunCalc.getTimes(firstDate, 44.986656, -93.258133)
  var lastTimes = SunCalc.getTimes(lastDate, 44.986656, -93.258133)
  
  items.push({x: firstDate,
             y: (firstTimes.sunrise - firstDate) / (1000 * 60),
             group: 1});

  items.push({x: lastDate,
             y: (lastTimes.sunrise - lastDate) / (1000 * 60),
             group: 1});

  var dataset = new vis.DataSet(items);
  var options = {
      sort: false,
      sampling:false,
      style:'points',
      dataAxis: {
          left: {
              range: {
                  min: 0, max: (60 * 24)
              }
          }
      },
      drawPoints: {
          enabled: true,
          size: 6,
          style: 'circle' // square, circle
      },
      defaultGroup: 'Scatterplot',
      height: '400px',
      width: '90%'
  };
  var graph2d = new vis.Graph2d(container, dataset, options);


}


</script>

<h1>Author Made Bed</h1>

<form id="import-author" action="#" onsubmit="console.log('s')">
<p>
Author:
<select id="author" onchange="importRssFeed(this.options[this.selectedIndex].value)">
</select>

</p>
</form>

<div id="visualization"></div>

<table id="bed-makings">
  <thead>
    <tr>
      <th>Date Time</th>
      <th>#</th>
      <th>Note</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>


<script>

//importRssFeed( document.querySelector("#author").value );

populateAuthors();

</script>

  </body>
</html>