<?php
ini_set("display_errors", "1");
ini_set("error_reporting", E_ALL);
$data = file_get_contents("php://input");
if (strlen($data) > 0){
//$data_array = json_decode($data, true);
//file_put_contents("log.txt", "value:" . $data_array["rc001001"]["value"] . ", css:" . $data_array["rc001001"]["css"]);
//file_put_contents("log.txt",$data);
if(file_exists("db.sql")){
if ($db = sqlite_open("db.sql", 0666, $e)) {
sqlite_query($db, "DROP TABLE tbl");
sqlite_query($db, "CREATE TABLE tbl (col)");
sqlite_query($db, "INSERT INTO tbl (col) VALUES ('$data')");
} else {
die($e);
}
}else{
if ($db = sqlite_open("db.sql", 0666, $e)) {
sqlite_query($db, "CREATE TABLE tbl (col)");
sqlite_query($db, "INSERT INTO tbl (col) VALUES ('$data')");
} else {
die($e);
}
}
//header("Content-Type: text/javascript; charset=utf-8");
//echo $data;
//$result = sqlite_query($db, "SELECT col FROM tbl");
//var_dump(sqlite_fetch_array($result));
exit();
}
?>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
body{
margin: 0;
}
body, input[type="button"]{
font-size: 11px; font-family: "メイリオ";
}
input[type="button"]{
width: 100px;
margin: 5px 0 5px 5px;
}
#screen{
width: 100%; height: 100%;
background-color: blue; opacity: 0.1;
position: absolute; z-index: 1;
}
#container{
width: 90%; height: 90%;
overflow: scroll; -webkit-overflow-scrolling: touch;
}
table{
border-collapse: collapse;
}
td{
border: 1px solid #ccc;
cursor: pointer;
min-width: 15px; height: 15px;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="screen"></div>
<div><input type="button" id="s" value="save"><input type="button" id="c" value="cancel"></div>
<div id="container">
<table>
<?php
for($r = 1; $r <= 30; $r++){
echo "<tr>";
for($c = 1; $c <= 30; $c++){
echo '<td class="r' . str_pad($r,3,0,STR_PAD_LEFT) . ' ' . 'c' . str_pad($c,3,0,STR_PAD_LEFT) . '" ';
echo 'id="' . 'rc' . str_pad($r,3,0,STR_PAD_LEFT) . str_pad($c,3,0,STR_PAD_LEFT) . '">';
echo '';
echo '</td>';
}
echo "</tr>";
}
?>
</table>
<p>
ctrlを押しながらマウスを動かすと書ける。shiftを押しながらマウスを動かすと消せる。<br>
セルをクリックするとテキスト入力できる。enterかescかフォーカスを抜くと確定(キャンセル処理はなし)。
</p>
</div>
<script>
$("input#s").on("click",function(){
$("input#s, input#c").attr("disabled","");
var data = {};
var id;
for(var r = 1; r <= 30; r++){
for(var c = 1; c <= 30; c++){
id = "rc" + ("00" + r).slice(-3) + ("00" + c).slice(-3) + "";
data[id] = {
"value": $("#" + id + "").text(),
"css": $("#" + id + "").css("background-color")
};
}
}
//contentType: "application/json", dataType: "json", data: JSON.stringify(data),
$.ajax({
type: "post", url: "", async: true, dataType: "text", data: JSON.stringify(data),
success: function(data){
//console.log(data);
alert("OK");
$("input#s, input#c").attr("disabled", false);
window.location.reload();
},error: function(){
alert("NG");
$("input#s, input#c").attr("disabled", false);
}
});
});
$("input#c").on("click",function(){
window.location.reload();
});
$("td").on("mousemove",function(i){
if (i.ctrlKey) {
$(this).css("background-color","#ccc");
} else if (i.shiftKey) {
$(this).css("background-color","white");
}
});
$("td").on("click", function(i){
$("<input></input>",{
"type": "text",
"value": $(i.target).text(),
"css": {
"position": "absolute", "z-index": "1",
"top": i.pageY, "left": i.pageX
}
}).on("keydown", function(k){
if (k.keyCode === 13 || k.keyCode === 27) {
$(i.target).text( $(this).val() );
$(this).remove();
}
}).appendTo("body").focus().blur(function(){
$(i.target).text( $(this).val() );
$(this).remove();
});
});
$(window).on("load",function(){
$("#screen").hide();
});
</script>
<?php
if(file_exists("db.sql")){
if ($db = sqlite_open("db.sql", 0666, $e)) {
$row = sqlite_fetch_array(sqlite_query($db, "SELECT col FROM tbl"));
echo "<script>";
echo "var result = $row[0];";
echo "</script><script>";
echo 'for(var r = 1; r <= 30; r++){
for(var c = 1; c <= 30; c++){
var id = "rc" + ("00" + r).slice(-3) + ("00" + c).slice(-3) + "";
$("#" + id + "").css("background-color", result[id].css);
$("#" + id + "").text(result[id].value);
}
}';
echo "</script>";
}
}
?>
</body>
</html>