Frontend-example/index.html at master · LinQRapp/Frontend-example · 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
<html>

<head>
    <style>
        .boldtext {
            font-weight: bold;
        }

        .normaltext {
            font-weight: normal;
        }

        #codePlaceholder {
            width: 300px;
            height: 300px;
        }
    </style>
    <script type="text/javascript">
        function setRemaining(r) {
            document.getElementById('remaining').textContent = r || 'unknown';
        }
        function setSnippet() {
            document.getElementById('codeSnippet').innerText = document.getElementById('codePlaceholder').innerHTML;
        }
        function getQRObject(data, format) {
            return {
                data,
                image: {
                    uri: "icon://appstore",
                    modules: true
                },
                style: {
                    module: {
                        color: "black",
                        shape: "default"
                    },
                    inner_eye: { shape: "default" },
                    outer_eye: { shape: "default" },
                    background: { color: "white" }
                },
                size: { width: 300 },
                output: { format }
            };
        }
        function generateQRCode() {
            /**
             * Never expose your API key to the public
             */

            const API_KEY = document.getElementById('apiKey').value;

            const insertType = document.getElementById('insertType').value;
            const format = document.getElementById('codeFormat').value;
            const data = document.getElementById('codeData').value || 'https://linqr.app';

            if (insertType === 'html' && format !== 'svg') {
                alert('Only SVGs can be inserted as raw html :(');
                return;
            }

            fetch("https://qrcode3.p.rapidapi.com/qrcode/text", {
                "method": "POST",
                "headers": {
                    "content-type": "application/json",
                    "x-rapidapi-key": API_KEY
                },
                "body": JSON.stringify(getQRObject(data, format))
            })
                .then(response => {
                    if (response.status >= 400) {
                        response.text().then(text => alert('API Error:\n\n' + text));
                        return;
                    }
                    const insertionPoint = document.getElementById('codePlaceholder');
                    switch (insertType) {
                        case 'html':
                            response.text().then(text => {
                                insertionPoint.innerHTML = text; setSnippet();
                            });
                            break;
                        case 'img':
                            response.blob().then(blob => {
                                const reader = new FileReader();
                                reader.readAsDataURL(blob);
                                reader.onloadend = () => {
                                    const img = document.createElement('img');
                                    img.src = reader.result;
                                    insertionPoint.replaceChildren(img);
                                    setSnippet();
                                };
                            });
                            break;
                        default:
                            break;
                    }
                    setRemaining(response.headers.get('x-ratelimit-qr-codes-remaining'));
                })
                .catch(err => {
                    console.error(err);
                });
        }
    </script>
</head>

<body>
    <div style="background-color: #00947e;">
        <div class="boldtext"><a href="https://linqr.app/">LinQR</a> demo</div><br>
        <label for="apiKey">API Key:</label>
        <input type="text" id="apiKey" name="apiKey">
        <label for="codeData">QRCode data:</label>
        <input type="text" id="codeData" name="codeData">
        <label for="codeFormat">Format</label>
        <select name="codeFormat" id="codeFormat">
            <option>png</option>
            <option>svg</option>
        </select>
        <label for="insertType">How to insert?</label>
        <select name="insertType" id="insertType">
            <option value="img">img+base64</option>
            <option value="html">raw html (svg only)</option>
        </select>
        <input type="button" onclick="generateQRCode()" value="Generate">
        <div class="boldtext">
            Preview
        </div>
        <div id="codePlaceholder">
            <div>Generate me first!</div>
        </div>
        <div class="boldtext">
            Remaining QR Codes in subscription: <span id="remaining" class="normaltext">unknown</span>
        </div>
        <div class="boldtext">
            Code Snippet:
            <code id="codeSnippet">
                unknown
            </code>
        </div>
</body>

</html>