#!/usr/bin/env ruby
# coding: utf-8

require "cgi"
require "pstore"

c = CGI.new(:accept_charset => "UTF-8")

mode = c["mode"]
name = c["name"]
cmt  = c["comment"]
gpsza  = c["gpsza"]
file = c["file"]
time  = Time.now    # Time.nowで現在時刻を取得

imgsrc = nil

print "Content-type: text/html; charset=UTF-8\n\n"

# HTMLヘッダの出力
print "<!DOCTYPE html>
<html lang=\"ja\">
<head>
<title>CMDSmap</title>
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<link rel=\"stylesheet\" href=\"../../../../src/leaflet.css\" />
<script src=\"../../../../src/leaflet.js\"></script>
<script src=\"../../../../src/leaflet.ajax.js\"></script>

<!-- <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script> -->
<!-- <script src=\"../../../../leaflet-pulse-icon-plugin/L.Icon.Pulse.js\" /> -->
<!-- <link rel=\"stylesheet\" href=\"../../../../leaflet-pulse-icon-plugin/L.Icon.Pulse.css\" /> -->

<style type=\"text/css\">
<!--
div#mymap {width: 90vw; height: 60vh; margin: 0 auto;}
div#mymap {border: 5px inset green;}
#map-canvas{width: 100px ; height: 0px ;}
-->
</style>
</head>
<body>\n"


print "<h1>丸池マップ in 遊佐</h1>
<div id =\"time\"></div>
<div id =\"countdown\"></div>
<button type=\"button\" id =\"str\">START</button>
<button type=\"button\" id=\"stp\">stop</button>
<p id=\"serif\"></p>
<div id=\"mymap\"></div>
<div id = \"map-canvas\"></div>
<script type=\"text/javascript\" src=\"../geotag.js\" charset=\"utf-8\"></script>\n"


bbs = PStore.new("data2.db")
bbs.transaction do
  if bbs["root"] == nil
    bbs["root"] = Hash.new
  end
  data = bbs["root"]  # csvに変更したほうがいい。
  
  if name >"" && cmt > "" #&& filename > "" && #gpsza >""
                                # 名前とコメント、両方値があるなら登録
      data[name] = [time, cmt]  # 今日の日付とコメント
  end
  
  # フォーム出力
  print"<form method=\"POST\" name=\"geotag\" action=\"../geotagmiru.rb\" enctype=\"multipart/form-data\">\n"
  print"<h3>GPS</h3>
<p id=\"gps\"></p>
<input type=\"hidden\" name=\"gpsza\" value=\"gpsjyo\">
<input name=\"lati\" length=\"100\" size=\"100\" value=\"\">
<input type=\"hidden\" name=\"mode\" value=\"decode\"><br><br>\n</form>"
  
  
  print"<form method=\"POST\" action=\"./kuso.rb\">\n"
  
  print"<h3>画像選択</h3>\n"
  print"<input type=\"FILE\" name=\"file\"><br>\n"
  
  print '<p>
NAME: <input name="name" type="text" maxlength="40"><br>
コメント <br>
<textarea name="comment" cols="40" rows="5">

</textarea><br>
<input type="submit" value="送信">
<input type="reset" value="reset"><br>
</p><hr>'
  
  # if mode == ""
  # filename = file.original_filename
  
  # if /\.JPG$/ =~ filename
  #   imgsrc = "#{file}.JPG"
  # elsif /\.png$/ =~ filename
  #   imgsrc = "#{file}.png"
  # end
  
  # if imgsrc
  #   open(imgsrc, "w") do |i|
  #     i.write cgi['file'].read
  #   end
  # end
  
  #     if /\.JPG$/ =~ filename
  #       system "mogrify -geometry 300x200 #{file}.JPG"
  #     elsif /\.png$/ =~ filename
  #       system "mogrify -geometry 300x200 #{file}.png"
  #     end
  #   else
  #   end
  # end

  # 既存のコメント出力(キー毎)
  print "<dl>\n"  # 定義環境開始
  for i in data.keys.sort{|x, y|
      data[y][0] <=> data[x][0]  # 日付の新しい順にソート
    }
    day = data[i][0]  # 第0要素が日付
    msg = data[i][1]  # 第1要素がコメント、それぞれ取り出す
    #pic = data[i][2]
    # latlng = data[i][3]

    printf(" <dt> %s\n", i)  # キー(つまり飲んだものの名前)
    printf(" <dd> 記載日: %s<br>\n", day.strftime("%Y/%m/%d/ %X"))
    printf("      %s\n", msg)
    # printf("      %s\n", latlng)
    #    printf("      %s\n", pic)
    #    print '
    # <p class="c"><img src="#{imgsrc}" height="60"></p>'
  end
  print "</dl>\n"  # 定義環境終了
end# db.transaction 終わり

# 画像、また画像の名称やコメント(以下、データ)をどのマップに加えるかの UI


print "<hr>\n</body>\n</html>"
