junban-mobilekiosk/container.html at develop · PSEJP/junban-mobilekiosk · 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
<link rel="import" href="/static/junban-mobilekiosk/build/junban-mobilekiosk.html">
<dom-module id="junban-mobilekiosk-container">
    <template id="scope" is="dom-bind">
        <junban-mobilekiosk data="{{data}}" submit="{{submit}}"></junban-mobilekiosk>
    </template>
    <script>
        Polymer({
            is: 'junban-mobilekiosk-container',
            properties: {
                data: Object
            },
            attached: function () {
                this.data = {
                    action: {
                        loading: true
                    },
                    info: {
                        title: 'Loading...',　// 店名
                        operation: true, // 營業與否
                        counter: 0, // 正在排隊人數
                        content: '順番登録を開始するには、下のボタンをタップしてください。サインと質問の後に順番が表示されます。', // 商店簡介內文
                        action_instruction: '順番登録を開始する' // 簽名btn內文
                    },
                    sign: {
                        complete: false, // 簽名了沒
                        width: 190,
                        height: 60,
                        // base64
                        signature: '' // 簽名data-uri
                    },
                    form: {}
                };

                const defaultHeaders = new Headers({
                    'X-Requested-With': 'XMLHttpRequest'
                });
                const defaultFetchOptions = {
                    headers: defaultHeaders,
                    credentials: 'same-origin'
                };

                var scope = this;
                scope.submit = function (e) {
                    var answers = _.map(e.detail.form, function (answer) {
                        return {
                            question: {id: answer.question_id},
                            answer: {id: answer.id}
                        };
                    });
                    var signature = e.detail.signature;
                    var body = {
                        answers: answers,
                        signature: signature,
                        mobile_number: scope.data.form.userPhoneNumber,
                        notes: scope.data.form.userMessage
                    };

                    fetch('/app/kiosk/_/crud/customers/', _.merge(defaultFetchOptions, {
                        method: 'POST',
                        body: JSON.stringify(body)
                    }))
                        .then(function (response) {
                            return response.json();
                        })
                        .then(function (json) {
                            if (json.id && json.token) {
                                window.location.href = '/app/checker/auth/?id=' + json.id + "&token=" + json.token;
                            } else {
                                console.error('response.id or response.token not set', json);
                            }
                        })
                        .catch(function (err) {
                            console.error(err);
                        });
                };

                var requests = [];

                requests.push(
                    fetch('/app/kiosk/_/appStatus/?mobile=1', defaultFetchOptions)
                        .then(function (response) {
                            return response.json();
                        })
                        .then(function (json) {
                            scope.set('data.info.operation', !json.disabled);
                        })
                        .catch(handleError)
                );

                requests.push(
                    fetch('/app/kiosk/_/info/', defaultFetchOptions)
                        .then(function (response) {
                            return response.json();
                        })
                        .then(function (json) {
                            scope.set('data.info.title', json.company_name);
                            scope.set('data.info.counter', json.parties)
                        })
                        .catch(handleError)
                );

                requests.push(
                    fetch('/app/kiosk/_/messages/', defaultFetchOptions)
                        .then(function (response) {
                            return response.json();
                        })
                        .then(function (json) {
                            scope.set('data.info.messages', json);
                            scope.set('data.info.content', json['mobile_kiosk_content'] || '');
                            scope.set('data.sign.action_instruction', json.sign);
                        })
                        .catch(handleError)
                );

                requests.push(
                    fetch('/app/kiosk/_/questions/', defaultFetchOptions)
                        .then(function (response) {
                            return response.json();
                        })
                        .then(function (json) {
                            scope.set('data.form.storeQuestions', _.map(json.questions, function (question) {
                                return {
                                    question: question.question,
                                    choices: question.answers,
                                    selected: null
                                };
                            }));
                        })
                        .catch(handleError)
                );

                Promise.all(requests).then(function () {
                    scope.set('data.action.loading', false);
                });

                function handleError(err) {
                    console.error(err);
                }
            }
        });
    </script>
</dom-module>