junban-mobilekiosk/index.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
<!doctype html>

<html>
<head>
    <title>スマホ・キオスク</title>
    <meta charset="utf-8">
    <!-- Theme Color-->
    <meta name="theme-color" content="#ff5722">
    <meta name="msapplication-navbutton-color" content="#ff5722">
    <meta name="apple-mobile-web-app-status-bar-style" content="#ff5722">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no" />

    <link rel="manifest" href="/manifest.json">
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <script src="bower_components/lodash/dist/lodash.min.js"></script>

    <!-- Elements -->
    <link rel="import" href="junban-mobilekiosk/junban-mobilekiosk.html">

    <!-- Venders -->
    <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>-->
    <style>
        body {
            margin: 0;
            font-family: 'Roboto', 'Noto', sans-serif;
            background-color: #eee;
        }
    </style>
</head>
<body class="fullbleed">
<template id="scope" is="dom-bind">
    <junban-mobilekiosk data="{{data}}" submit="{{submit}}"></junban-mobilekiosk>
</template>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        var scope = document.querySelector('#scope');

        scope.submit = function (e) {
            console.log('submit', 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
            };
            console.log('submit body', body);
        };

        scope.data = {
            action: {
                loading: false
            },
            info: {
                // 店名
                title: 'よしのや：山崎店',
                // 營業與否
                operation: true,
                // 正在排隊人數
                counter: 24,
                content: '登録には携帯電話の番号の入力が必要です。 順番が近付くと電話番号あてにSMSが届きます。ご自分の前にあと何人待っているかは、登録が終わった後に表示されます。時間に余裕を持って受付にお越しください。', // 商店簡介內文
                // 簽名btn
                action_instruction: '上記を了承して登録する'
            },
            sign:{
                // 簽名了沒
                complete: false,
                width: 190,
                height: 60,
                // base64 簽名data-uri
                signature: '',
                action_instruction: '同步現在kiosk電腦版簽名區域上方用戶輸入的說明'
            },
            form: {
                storeQuestions: [
                    {
                        question: '質問A',
                        choices: [{"id":1,"question_id":1,"index":0,"answer":"Answer 1"},{"id":2,"question_id":1,"index":1,"answer":"Answer 2"}],
                        // 選取對象，由下方選項的 radio-button-group 提供數值
                        selected: ''
                    },
                    {
                        question: 'しつもんB',
                        choices: [{"id":3,"question_id":2,"index":0,"answer":"Answer 1"},{"id":4,"question_id":2,"index":1,"answer":"Answer 2"}, {"id":5,"question_id":2,"index":2,"answer":"Answer 2"}]
                    }
                ],
                userPhoneNumber: '',
                userMessage:''
            }
        };

    });
</script>
</body>
</html>