html-javascript-tinyapps/jal.html at master · xtetsuji/html-javascript-tinyapps · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<!DOCTYPE html>
<html>
<head>
<title>JAL予約内容フォーム</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var DEBUG = false;
$(function(){
    $("#run").on("click", function(){
        let date = get_date($("#date").val());
        let event_title = get_title();
        let result = get_result();
        let gcalep_link = get_gcalep_link({
            text: event_title,
            desc: result,
        });
        console.log(event_title);
        console.log(result);
        $("#event_title").val(event_title);
        $("#result").text(result);

        $("#gcalep_link").text(gcalep_link).attr("href", gcalep_link);
    });
    $("#easy-input-obo-hnd").on("click", function(){
        $("#departure").val("帯広");
        $("#arrival").val("東京羽田");
    });
    $("#easy-input-hnd-obo").on("click", function(){
        $("#departure").val("東京羽田");
        $("#arrival").val("帯広");
    });
});
function get_title() {
    let flight_name = $("#flight_name").val();
    let departure = $("#departure").val();
    let arrival = $("#arrival").val();
    return `${flight_name}で${departure}から${arrival}までフライト`;
}
function get_result(){
    let date = get_date($("#date").val());
    console.log("date = " + date);
    let formatted_date_string = format_date(date);
    console.log("formatted date = " + formatted_date_string);
    let departure = $("#departure").val();
    let arrival = $("#arrival").val();
    let departure_time = $("#departure_time").val();
    let arrival_time = $("#arrival_time").val();
    let content = `■旅程
${formatted_date_string}
出発：${departure} ${departure_time}
到着：${arrival} ${arrival_time}

■予約確認
${$("#reserve_content_url").val()}

■番号
航空券番号：${$("#ticket_number").val()}
予約番号：${$("#reservation_number").val()}
確認番号：${$("#confirmation_number").val()}
取扱番号：${$("#service_number").val()}

■予約情報
搭乗日：${formatted_date_string}
出発地：${departure}
出発時間：${departure_time}
到着地：${arrival}
到着時間：${arrival_time}
便名：${$("#flight_name").val()}
クラス：${$("#seat_class").val()}
運賃：${$("#fare_kind").val()}
運賃額：${$("#fare_sum").val()}

■座席指定
${$("#seat_number").val()}
`;
    return content;
}

function get_gcalep_link(param) {
    let text = param["text"];
    let desc = param["desc"];

    let date = get_date($("#date").val());
    let date_str = date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate();
    let from_date = date_str + " " + $("#departure_time").val();
    let to_date   = date_str + " " + $("#arrival_time").val();;

    return gen_gcalep_link({
        text: text,
        desc: desc,
        from: from_date,
        to: to_date
    });
}

function get_date(date_string) {
    let parts = date_string.split(/[-\/]/);
    if ( !parts ) return;
    let date = new Date(Number(parts[0]), Number(parts[1] - 1), Number(parts[2]));
    return date;
}
function format_date(date) {
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    let week = (["日", "月", "火", "水", "木", "金", "土"])[date.getDay()];
    let format_string = `${year}年${month}月${day}日（${week}）`;
    console.log(format_string);
    return format_string;
}

function pad(digit) {
    if(digit.toString().length==1) digit="0"+digit.toString();
    return digit;
}

function to_utcdigit(jst) { // String jst
    var date, incl_date=false;
    if(m=jst.match(/ (2[4-9]):([0-9][0-9])/)) {
        incl_date = true;
        jst = jst.replace(/ 2[4-9]:[0-9][0-9]/, " "+pad(parseInt(m[1])-24)+":"+m[2]);
    }
    if(DEBUG){console.log("jst="+jst);}
    date = new Date(jst); // valid JST Date string
    if(incl_date){
        date.setDate(date.getDate()+1); // 末日バグ等は無いはず
    }
    //console.log("dated_jst="+date.toString());
    //console.log("incl_date is " + (incl_date?"true":"false"));
    return(date.getUTCFullYear().toString()+pad(date.getUTCMonth()+1)+pad(date.getUTCDate())+"T"+pad(date.getUTCHours())+pad(date.getUTCMinutes())+pad(date.getUTCSeconds())+"Z");
}

function gen_gcalep_link(arg) {
    // args: text, url, desc, location,
    //       from, to (valid string as Date object constructor 1st argument)
    if(DEBUG){console.log("gen_gcalep_link argument", arg);}
    var gparam = {};
    var gparam_array = [];
    var gparam_keys = ["action", "text", "dates", "sprop", "details", "location"];
    var gev_url_base = "http://www.google.com/calendar/event?";
    var from = arg["from"];
    var to = arg["to"];
    var dates = to_utcdigit(from)+"/"+to_utcdigit(to);
    gparam["action"]   = arg["action"] || "TEMPLATE";
    gparam["text"]     = arg["text"];
    gparam["dates"]    = dates;
    gparam["sprop"]    = arg["url"]?arg["url"].replace(/^http:/,"website:"):"";
    gparam["details"]  = (arg["url"]?arg["url"]+"\n":"")+(arg["desc"]||"");
    gparam["location"] = arg["location"] || "";
    gparam_keys.forEach(
        function(key){
            gparam_array.push(key+"="+encodeURIComponent(gparam[key]));
        }
    );
    return(gev_url_base+gparam_array.join("&"));
}
</script>
<style type="text/css">
#result {
    width: 100%;
    height: 20em;
}
#event_title {
    width: 100%;
}
body {
    font-size: 15pt;
}
input, textarea {
    font-size: inherit;
}
button#run {
    font-size: 32pt;
}
</style>
</head>
<body>
<ul>
    <li><label>年月日<input type="date" id="date"></label></li>
    <li>
        <button id="easy-input-obo-hnd">帯広→羽田</button>
        <button id="easy-input-hnd-obo">羽田→帯広</button>
        <ul>
            <li><label>出発地<input type="text" id="departure"></label> <label>出発時間<input type="time" id="departure_time"></label></li>
            <li><label>到着地<input type="text" id="arrival"></label> <label>到着時間<input type="time" id="arrival_time"></label></li>
        </ul>
    </li>
    <li><label>便名：<input type="text" id="flight_name"></label></li>
    <li><label>クラス：<input type="text" id="seat_class" value="普通席"></label></li>
    <li><label>運賃：<input type="text" id="fare_kind"></label>（割引種別など）</li>
    <li><label>運賃額：<input type="text" id="fare_sum"></label></li>
    <li><label>座席指定：<input type="text" id="seat_number"></label></li>
    <li><label>予約確認リンク<input type="url" id="reserve_content_url"></label></li>
    <li><label>航空券番号：<input type="text" id="ticket_number"></label></li>
    <li><label>予約番号：<input type="text" id="reservation_number"></label></li>
    <li><label>確認番号：<input type="text" id="confirmation_number"></label>（必要であれば）</li>
    <li><labe>取扱番号：<input type="text" id="service_number">（必要であれば）</labe></li>
</ul>


<div>
    <button id="run">出力</button>
</div>
<div>タイトル：<input type="text" id="event_title"></div>
詳細：<textarea id="result"></textarea>
<div>
    <a id="gcalep_link" href="" target="_blank"></a>
</div>
</body>
</html>