Newer
Older
moodlog_web / script.js
/*var datas = [
	{date: "2018-09-09", value: 10},
	{date: "2018-09-08", value: 5},
	{date: "2018-09-07", value: 8},
	{date: "2018-09-07", value: 7},
	{date: "2018-09-06", value: 9},
	{date: "2018-09-05", value: 6},
	{date: "2018-09-04", value: 5},
	{date: "2018-09-03", value: 4},
	{date: "2018-09-02", value: 7},
	{date: "2018-08-02", value: 1}
]

/*
var parser = function(data) {
	var stats = {};
	console.log(data);
	for (var d in data) {
		console.log(data[d].date);
		var dateTime = new Date(data[d].date).toISOString();
		var timestamp = Math.floor(dateTime / 1000);
		let toTimestamp = strDate => Date.parse(data[d].date);
		stats[timestamp] = data[d].value;
	}
	console.log(stats);
	return stats;

};
*/
/*
var stats = {};
var parser = function(data) {
	//console.log(data);
	for (var d in data) {
		//console.log("date:"+data[d]);
		//var date = new Date(data[d].date); // Date of activity 
    	//var sec = date.getTime()/1000; // Convert to sec
		stats[d] = data[d];
		//cal.subDomainTextFormat(d, data[d]);
	}

	return stats;	
};
*/
//var mainurl = "http://localhost:8080/test.json";
var mainurl = "/?action=main_cal";
var cal = new CalHeatMap();
var resultArray;

fetchData(mainurl)
  .then(data => {
    resultArray = data; // Rename to avoid variable shadowing
    console.log("setting up");
    setUpCal();
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });




function setUpCal(){

	console.log("setting up cal");
	var datethen = new Date();
	datethen.setMonth(datethen.getMonth() - 9);

	cal.init({
		//data: "http://localhost:8080/index.php?action=main_cal",
		data: mainurl,
		dataType: "json",
			//afterLoadData: parser,
		start: datethen,
		id : "graph",
		domain : "month",			// Group data by month
		subDomain : "day",			// Split each month by days
		cellSize: 15,
		cellPadding: 2,
		cellRadius: 3,
		domainGutter:2,
		subDomainTitleFormat: {
	        empty: "{date}",
	        filled: "{count} - {date}"
	    },
	    //itemSelector: "#cal-heatmap",
		range : 10,					// Just display 10 months
		legend: [2,3,4,5,6,7,8,9], 	// Custom threshold for the scale
		tooltip: false,
		displayLegend: false,
		label: {
			position: "bottom",
			align: "center",
			offset: {x:0,y:-10},
		},
		considerMissingDataAsZero: true,
		legendHorizontalPosition: "center",
		legendColors: {
			min: "#6b6de5",
			max: "#46e260",
		},

		subDomainTextFormat: function(dateString, value) {
		    //console.log("datestring: " + dateString);

		    // Parse dateString in a consistent way (e.g., assuming it's in a specific time zone)
		    var date = new Date(dateString);

		    // Set the time to midnight local time
		    date.setHours(0, 0, 0, 0);

		    var unixTimestamp = Math.floor(date.getTime() / 1000); // Convert to seconds

		    // Assuming resultArray is an array of objects with a 'timestamp' property
		    var result = resultArray.find(item => {
		        // Convert the item's timestamp to a Date object
		        var itemDate = new Date(item.timestamp * 1000); // Assuming item.timestamp is in seconds

		        // Set the time to midnight local time
		        itemDate.setHours(0, 0, 0, 0);

		        // Convert the modified item's timestamp back to a Unix timestamp
		        var modifiedUnixTimestamp = Math.floor(itemDate.getTime() / 1000);

		        // Check if the modified timestamp matches the target timestamp (midnight local time)
		        return modifiedUnixTimestamp === unixTimestamp;
		    });

		    // Log timestamp, unixTimestamp, resultArray, and result for debugging
		    // console.log("Timestamp:", date.getTime());
		    // console.log("Unix Timestamp:", unixTimestamp * 1000);
		    // console.log("Result Array:", resultArray);
		    // console.log("Result:", result);

		    // Check if result is defined and has a value property
		    // console.log("Comparing:", date, unixTimestamp, resultArray);

		    if (result && result.value !== undefined) {
		        //console.log(date + ":" + result.value);
		        return result.value;
		    }

		    // If result is not found or does not have a value property, return a default value or an empty string
		    return ""; // You can set a default value or return an empty string here
		},

		highlight: "now",
		onClick: function(date, count) {
			//alert("Oh gosh, " + count + " things occured on " + date.toISOString());
			updateDayLog(date.toISOString().slice(0, 19).replace('T', ' '));
		}
	});
}


function checkStats(timestamp){
	var finval = 0;
	$.getJSON('test.json', function (data) {
		$.each(data, function(i, field){
			//console.log(field);
			if(timestamp == i){
				console.log("found: "+field);
        		finval = field;
        	}

     	});
     	//if (finval == 0){finval = "";}
		return finval;
	});
}

var availableTags = [];

$( function() {

    $( "#tags" ).autocomplete({
      source: availableTags
    });
} );

function updateTime() {
    var now = new Date();
    var datestring = now.getFullYear() + "-" + ("0"+(now.getMonth()+1)).slice(-2) + "-" + ("0" + now.getDate()).slice(-2) + " " + ("0" + now.getHours()).slice(-2) + ":" + ("0" + now.getMinutes()).slice(-2);
    $("span.date").html(datestring.toString());        
}


removespan = function(span) {
	span.remove();
}

/***
 * filter adding and removing code
 */
var filter = 0;
function addFilterPos(word){
	filter++;
	$('.filtitle').after('<span class="filpos" onclick="removefilter(this);">'+word+'</span>');
	$(".filter").show();
}
function addFilterNeg(word){
	filter++;
	$('.filtitle').after('<span class="filneg" onclick="removefilter(this);">'+word+'</span>');
	$(".filter").show();
}
function addFilterCon(word){
	filter++;
	$('.filtitle').after('<span class="filcon" onclick="removefilter(this);">'+word+'</span>');
	$(".filter").show();
}
function addFilterTag(word){
	filter++;
	$('.filtitle').after('<span class="filtag" onclick="removefilter(this);">'+word+'</span>');
	$(".filter").show();
}
removefilter = function(span) {
	filter--;
	span.remove();
	if(filter == 0){ 
		$(".filter").hide(); 
		updateCal("/?action=main_cal");
	}
}

/***
 * updating description 
 */
function updatePretext(){
 	var toadd = $("#tags").val();
 	switch(toadd.charAt(0)){
 		case "+":
 			$('.pretext').after('<span class="prepos" onclick="removespan(this);">'+toadd+'</span>');
 			break;
 		case "-":
 			$('.pretext').after('<span class="preneg" onclick="removespan(this);">'+toadd+'</span>');
 			break;
 		case "@":
 			$('.preview').append('<span class="precon" onclick="removespan(this);">'+toadd+'</span>');
 			break;
 		default:
 			$(".pretext").html( toadd );
 	}
 	//$("#tags").val("");
 	//$(".pretext").html(  );
 }

  function submitMood(){
 	var toadd = $(".preview").text();

 	console.log(toadd);
 }

/***
 * update main calendar values
 */
function updateCal(url){ //updateCal("/?action=main_cal");
	mainurl = url;
	cal.destroy(function(){
		cal = new CalHeatMap();
		setUpCal();
	});
}

/***
 * update specific day log
 */
function updateDayLog(date){
	$.ajax({
		url: "/?action=date&date="+date,
		async: true,
		dataType: 'html',
		success: function (response) {
			//console.log(response);
			if(response != "0"){
				$(".previewhist").html(response);
			}
		}
	});
}

/***
 * update latest tags
 */
function updateLatest(tag){
	var string = "";
	switch(tag) {
		case "pos":
			string = "<div class=\"sub-header\">Latest 5 positive</div>";
			break;
		case "neg":
			string = "<div class=\"sub-header\">Latest 5 negative</div>";
			break;
		case "con":
			string = "<div class=\"sub-header\">Latest 5 context</div>";
			break;
	}
	$.ajax({
		url: "/?action=latest&tag="+tag,
		async: true,
		dataType: 'json',
		success: function (response) {
			if(response != "0"){

				$.each(response, function(i, item) {
					var ntag = tag.charAt(0).toUpperCase() + tag.substr(1);
				    string += "<span onclick=\"addFilter"+ntag+"($(this).text());\">"+item+"</span><br />";
				 });

				//console.log(response);
				$(".lat"+tag).html(string);
			}
		}
	});
}

/***
 * update top tags
 */
function updateTop(tag){
	var string = "";
	switch(tag) {
		case "pos":
			string = "<div class=\"sub-header\">Top 5 positive</div>";
			break;
		case "neg":
			string = "<div class=\"sub-header\">Top 5 negative</div>";
			break;
		case "con":
			string = "<div class=\"sub-header\">Top 5 context</div>";
			break;
	}
	$.ajax({
		url: "/?action=top&tag="+tag,
		async: true,
		dataType: 'json',
		success: function (response) {
			if(response != "0"){

				$.each(response, function(i, item) {
					//console.log(item);
					var ntag = tag.charAt(0).toUpperCase() + tag.substr(1);
				    string += "<span onclick=\"addFilter"+ntag+"($(this).text());\">"+item+"</span><br />";
				 });

				//console.log(response);
				$(".top"+tag).html(string);
			}
		}
	});
}

/***
 * update available tags
 */
function updateAvailable(){
	$.ajax({
		url: "/?action=alltag",
		async: true,
		dataType: 'json',
		success: function (response) {
			if(response != "0"){
				availableTags = response;
				    $( "#tags" ).autocomplete({
				      source: availableTags
				    });
			}
		}
	});
}

/***
 * display filtered calendar
 */
function applyFilters(){
	var filttstring ="";
	$(".filter").find("span").each(function() {
    	filttstring += $(this).html();
 	});
 	filttstring = filttstring.slice(8);
 	filttstring = filttstring.replace(/\s+/g, '');
 	filttstring = filttstring.replace(/\+/g , "%2B");
 	filttstring = filttstring.replace(/#/g, '%23');
 	//filttstring = encodeURIComponent(filttstring);
	//console.log(filttstring);
	updateCal("/?action=filtered_cal&filter="+filttstring);
}

/***
 * save to moodlog
 */
function submitMood(){
	var filttstring = [];
	var sendString = "";
	$(".preview").find("span").each(function() {
    	filttstring.push( $(this).html() );
 	});
 	
 	filttstring.shift(); // remove date
 	filttstring[0] = filttstring[0].replace(/\[/g, ''); //fix no.
 	filttstring[0] = filttstring[0].replace(/\]/g, '|'); //fix no.

 	for (var i = 0, len = filttstring.length; i < len; i++) { //tidy for URL
  		filttstring[i] = filttstring[i].replace(/\+/g , "%2B");
  		filttstring[i] = filttstring[i].replace(/ /g , "%20");
  		sendString += filttstring[i]
	}

	console.log(sendString);
	$.ajax({
		url: "/?action=save&log="+sendString,
		async: true,
		dataType: 'html',
		success: function (response) {
			if(response != "0"){

				var now = new Date();
    			var datestring = now.getFullYear() + "-" + ("0"+(now.getMonth()+1)).slice(-2) + "-" + ("0" + now.getDate()).slice(-2);
    			var fulldatestring = now.getFullYear() + "-" + ("0"+(now.getMonth()+1)).slice(-2) + "-" + ("0" + now.getDate()).slice(-2) + " " + ("0" + now.getHours()).slice(-2) + ":" + ("0" + now.getMinutes()).slice(-2);

    			$(".preview").html("<span class=\"date\">"+fulldatestring+"</span><span class=\"hpyno\">[5]</span><span class=\"pretext\" onclick=\"updatePretext();\"></span></div>")
    			$("#happyval").val(5);
				updateCal("/?action=main_cal");
				updateDayLog(datestring);
				updateTop("pos"); 
				updateTop("neg"); 
				updateTop("con"); 
				updateLatest("pos"); 
				updateLatest("neg"); 
				updateLatest("con");
			}
		}
	});
}

/***
 * for getting the data from URL and putting in array
 */
function fetchData(url) {
  return fetch(url)
    .then(response => response.json())
    .then(data => {
      // Create an array of timestamps and values
      var resultArray = [];
      for (var timestamp in data) {
        if (data.hasOwnProperty(timestamp)) {
          resultArray.push({ timestamp: parseInt(timestamp), value: data[timestamp] });
        }
      }
      return resultArray;
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
}


/***
 * once app loaded
 */
$(document).ready(function(){

    $('#tags').keypress(function(e){
		if(e.keyCode==13)
			updatePretext();
	});

	$("#happyval").on("input change", function() {
	    $(".hpyno").html("[" + $("#happyval").val() + "]");
	});

    updateTop("pos");
    updateTop("neg");
    updateTop("con");
    updateLatest("pos");
    updateLatest("neg");
    updateLatest("con");

    updateAvailable();

	updateTime();
    setInterval(updateTime, 5000); // 5 * 1000 miliseconds
    var interval1 = setInterval(function () { updateCal(mainurl); }, 300000); // update every 5 mins (300000) 

    var interval1 = setInterval(function () { updateTop("pos"); }, 300000);
    var interval1 = setInterval(function () { updateTop("neg"); }, 300000);
    var interval1 = setInterval(function () { updateTop("con"); }, 300000);
    var interval1 = setInterval(function () { updateLatest("pos"); }, 300000);
    var interval1 = setInterval(function () { updateLatest("neg"); }, 300000);
    var interval1 = setInterval(function () { updateLatest("con"); }, 300000);
});