хранилище виджета в кде написанного в html5

0

0

Не подскажите, на сколько хорошо widget в KDE поддерживает HTML5?

здесь написано, что якобы поддерживается много, потому что WebKit, в частности sql web storage. Но у меня нет подключения строкой

openDatabase(«ToDo», "", «A list of to do items.», 200000);

хотя это работает в хроме.

storage, который ключ-значение, к сожалению, очищается при перезагрузке, но на всякий случай приложу то, что хотел сделать(можно сохранить в *.html и посмотреть в браузере). Вообще, хотел сделать что-то типа

комментариев нет, к сожалению

<!-- GPL -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset=utf-8 />
	<meta name="viewport" content="width=620" />
<style>
.schedule
{
	width:  63%;
	min-height: 300px;
	float: left;
}

.tasks
{
	width: 37%;
	float: right;
}
</style>

<script>

var scheduleList = Array();
var tasksList = Array();

// save schedule and tasks
function save()
{
	window.localStorage.clear();
	for (var i = 0; i < scheduleList.length; ++i)
	{
		var id = scheduleList[i];
		var startTimeValue = document.getElementById('startTime'+id).value;
		var endTimeValue = document.getElementById('endTime'+id).value;
		var summaryOut = document.getElementById('schedule'+id).cells[4].innerHTML;
		var scheduleText = document.getElementById('scheduleText'+id).value;
		var value = 'schedule|' + id + '|' + startTimeValue + '|' + endTimeValue + '|' + 
			    summaryOut + '|' + scheduleText;
		window.localStorage[window.localStorage.length] = value;
	}
	
	for (var i = 0; i < tasksList.length; ++i)
	{
		var id = tasksList[i];
		var bgColor = document.getElementById('task'+id).bgColor;
		var taskText = document.getElementById('taskText'+id).value;
		
		var value = 'task|' + id + '|' + bgColor + '|' + taskText;
		window.localStorage[window.localStorage.length] = value;
	}
}

function load()
{
	var myTable = document.getElementById('scheduleTable');
	var tBodySchedule = myTable.getElementsByTagName('tbody')[0];
	
	var myTable = document.getElementById('TasksTable');
	var tBodyTasks = myTable.getElementsByTagName('tbody')[0];
	
	for (var i = 0; i < localStorage.length; ++i)
	{
		var value = localStorage[i];
		var reg = /^([^\|]+)\|([^\|]+)\|([^\|]+)\|([^\|]+)\|([^\|]+)\|(.+)$/
		var data = reg.exec(value);
		
		if ( data && data[1] == 'schedule' )
		{
			_addSch(tBodySchedule, data[2], data[3], data[4], data[5], data[6]);
			scheduleList[scheduleList.length] = data[2];
		}else 
		{
			var reg = /^([^\|]+)\|([^\|]+)\|([^\|]+)\|(.+)$/
			var data = reg.exec(value);
			if ( data && data[1] == 'task' )
			{
				_addTsk(tBodyTasks, data[2], data[3], data[4]);
				tasksList[tasksList.length] = data[2];
			}
		}
	}
}

function changeTime(id)
{
	var startTimeValue = document.getElementById('startTime'+id).value;
	var endTimeValue = document.getElementById('endTime'+id).value;
	var summaryOut = document.getElementById('schedule'+id).cells[4];
	var reg = /(\d{1,2})\:(\d{1,2})/
	var startTime= reg.exec(startTimeValue);
	var endTime= reg.exec(endTimeValue);
	var diff = (parseInt(endTime[1]) * 60 + parseInt(endTime[2])) -
		   (parseInt(startTime[1]) * 60 + parseInt(startTime[2]));
	var m = (diff % 60);
	var h = (diff - m) / 60;
	summaryOut.innerHTML = '' + h + ':' + m;
	
	save();
}

function deleteSchedule(id)
{
	var schedule = document.getElementById('schedule'+id);
	schedule.parentNode.removeChild(schedule);
	
	for (var i = 0; i < scheduleList.length; ++i)
	{
		if ( scheduleList[i] == id )
		{
			scheduleList.splice(i, 1);
		}
	}
	save();
}

function addNewSchedule()
{
	var myTable = document.getElementById('scheduleTable');
	var tBody = myTable.getElementsByTagName('tbody')[0];
	var currDate = new Date();
	var currID = currDate.getTime();
	
	_addSch(tBody, currID);
	
	changeTime(currID);
	scheduleList[scheduleList.length] = currID;
	save();
}

function _addSch(tBody, currID, startTime, endTime, summaryOut, scheduleText)
{
	var currDate = new Date();
	var newTR = document.createElement('tr');
	newTR.id = 'schedule' + currID;
	
	var newTD = document.createElement('td');
	newTD.innerHTML = '<button onclick="deleteSchedule('+currID+')">del</button>';
	newTR.appendChild (newTD);
	
	var newTD = document.createElement('td');
	var startTime = startTime || '' + currDate.getHours() + ':' + currDate.getMinutes();
	newTD.innerHTML = '<input type="text" value="' + startTime + '" size="1" ' +
			  'onchange="changeTime('+currID+')" id="startTime'+currID+'">';
	newTR.appendChild (newTD);
	
	var newTD = document.createElement('td');
	var scheduleText = scheduleText || 'IDLE';
	newTD.innerHTML = '<input type="text" value="'+scheduleText+
			  '" size="10" id="scheduleText'+currID+
			  '" onchange="save()">';
	newTR.appendChild (newTD);
	
	var newTD = document.createElement('td');
	var endTime = endTime || '' + currDate.getHours() + ':' + currDate.getMinutes();
	newTD.innerHTML = '<input type="text" value="' + endTime + '" size="1" ' +
			  'onchange="changeTime('+currID+')" id="endTime'+currID+'">';
	newTR.appendChild (newTD);
	
	var newTD = document.createElement('td');
	var summaryOut = summaryOut || '00:00';
	newTD.innerHTML = summaryOut;
	newTR.appendChild (newTD);
	tBody.appendChild(newTR);
}

function addNewTask()
{
	var myTable = document.getElementById('TasksTable');
	var tBody = myTable.getElementsByTagName('tbody')[0];
	
	var currDate = new Date();
	var currID = currDate.getTime();
	
	_addTsk(tBody, currID);
	
	tasksList[tasksList.length] = currID;
	save();
}

function _addTsk(tBody, currID, bgColor, taskText)
{
	var taskText = taskText || 'JUST DO IT';
	var bgColor = bgColor || 'white';

	var newTR = document.createElement('tr');
	var newTD = document.createElement('td');
	newTR.id = 'task' + currID;
	newTR.bgColor = bgColor;
	newTD.innerHTML = '<input type="text" value="'+taskText+'" size="10" ' + 
			  ' id="taskText'+currID+'" onchange="save()"> ' + 
			  '<button onclick="doneTask('+currID+')">+</button> ' + 
			  '<button onclick="deleteTask('+currID+')">X</button> ' + 
			  '<button onclick="importantTask('+currID+')">^</button>' +
			  '<button onclick="clearTask('+currID+')">.</button>';
	newTR.appendChild(newTD);
	
	tBody.appendChild(newTR);
}

function deleteTask(id)
{
	var task = document.getElementById('task'+id);
	task.parentNode.removeChild(task);
	
	for (var i = 0; i < tasksList.length; ++i)
	{
		if ( tasksList[i] == id )
		{
			tasksList.splice(i, 1);
		}
	}
	save();
}

function clearTask(id)
{
	_paintTask(id, 'white');
}

function doneTask(id)
{
	_paintTask(id, 'gray');
}

function importantTask(id)
{
	_paintTask(id, 'yellow');
}

function _paintTask(id, color)
{
	var task = document.getElementById('task'+id);
	task.bgColor = color;
	save();
}

</script>
</head>

<body>

<div class="schedule">
	<table border="1" id="scheduleTable">
	<tr>
		<td>
			action
		</td>
	
		<td>
			start
		</td>
	
		<td>
			description
		</td>
	
		<td>
			stop
		</td>
	
		<td>
			summary
		</td>
	</tr>
	</table>
	
	<button onclick="addNewSchedule()">add in schedule</button>
</div>

<div>
	<table border="1" class="tasks" id="TasksTable">
	<tr>
		<td>
			tasks
		</td>
	</tr>
	</table>
	
	<button onclick="addNewTask()">add in tasks</button>
</div>

<script>load();</script>

</body>
</html>

интерес к html5 в виджете был академическим, да и показалось, что напишу быстрее и дизайн красивым можно будет сделать. Теперь уж накатаю на Python'е.

p.s не знаю, может в ветку веб-разработки это нужно?

Ссылка

Похожие темы