vue-pythonpad-runner/index.html at master · pythonpad/vue-pythonpad-runner · 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
<!doctype html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="index.css">
    <link rel="stylesheet" type="text/css" href="/node_modules/font-awesome/css/font-awesome.css">
    <script src="/node_modules/vue/dist/vue.js"></script>
    <script src="/lib/vue-pythonpad-runner.bundle.js"></script>
    <script>
        Vue.component('pythonpad-runner', VuePythonpadRunner)
    </script>
</head>

<body>
    <div class="app" id="app">
        <pythonpad-runner
            ref="runner"
            :locale="locale"
            :init-src="code"
            :init-files="files"
            :buttons="buttons"
            @save="handleSave"
        ></pythonpad-runner>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                locale: 'en',
                code: localStorage.getItem('saved-code') || 'print("hello world")',
                files: JSON.parse(localStorage.getItem('saved-files')) || {
                    'input.txt': {
                        type: 'text',
                        body: 'this file is for test\nhello world',
                    },
                    'asset.txt': {
                        type: 'text',
                        body: 'how do you do?',
                    }
                },
                buttons: [
                    {
                        label: 'Reset',
                        fa: 'undo',
                        class: 'is-danger',
                        callback: () => {
                            if (confirm('Are you sure you want to reset code?')) {
                                window.runnerComponent.handleReset()
                            }
                        },
                    },
                ],
            },
            mounted() {
                window.runnerComponent = this
            },
            methods: {
                handleSave(save, done) {
                    if (save.code) {
                        localStorage.setItem('saved-code', save.code)
                    }
                    if (save.files) {
                        localStorage.setItem('saved-files', JSON.stringify(save.files))
                    }
                    done()
                },
                handleReset() {
                    this.$refs.runner.setCode('print("hello world")')
                }
            }
        })
    </script>
</body>

</html>