AzureDevSetup/index.html at main · cwatsonptc/AzureDevSetup · 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
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.7/socket.io.min.js"></script>
        <script src="https://unpkg.com/vue"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    </head>

    <body>

        <div  id="app">
            <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <a class="navbar-brand">{{ title }}</a>
                        </div>

                        <ul class="nav">
                                <li style="margin-right: 10px;" class="btn btn-primary btn-sm" v-on:click="clearMessages()">Clear messages</li>

                                <a style="margin-right: 10px;" class="btn btn-primary btn-sm" href="/.auth/login/github" v-if="!user.userDetails">Login</a>

                                <a style="margin-right: 10px;" class="btn btn-primary btn-sm" href="/.auth/logout" v-if="user.userDetails">Log out</a>
                        </ul>

                    </div>
            </nav>
            <div class="container" style="margin-top: 10px;" v-if="user.userDetails">
                <p>User: {{ user.userDetails }}</p>
              </div>
            <div class="container" style="margin-top: 10px;">
              <label for="devices" >Choose device:</label>
              <select name="devices" id="devices" v-model="device" v-on:change="selectDevice()">
                <option v-for="device in devices" v-bind:value="device.id">
                    {{ device.id }}
                </option>
              </select>
            </div>

            <div class="container" style="margin-top: 10px;">
                <div class="card" >
                    <div class="card-header">
                        Messages from {{ device }} will appear below
                    </div>

                    <div class="card-body">
                        <div class="card-text" v-if="messages.length==0">
                                Waiting...
                        </div>
                        <ul id="messages" class="list-group">
                            <li v-for="message in messages" class="list-group-item list-group-item-success">
                                    {{ message }}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>


        <script>
            var socket = io("http://realtime-go-app-geba.westeurope.azurecontainer.io:8080", {
                autoConnect: false,
                secure: false

            });


            socket.on('message', function(msg){
                app.messages.push(msg)

            })

            var app = new Vue({
                el: '#app',
                data : {
                    title: "Realtime socket.io app",
                    messages: [],
                    device: "your device",
                    devices: "",
                    user: ""
                },
                beforeMount: function() {
                    this.getDevices();
                    this.getUser();
                },
                methods: {
                    clearMessages: function() {
                        this.messages = []
                    },
                    selectDevice: function() {
                      console.log("Selected device " + this.device);
                      socket.close(); // even if not connected
                      this.messages = [];
                      socket.open();
                      socket.emit('channel',this.device);
                    },
                    async getDevices() {
                        let  devices  = await(await fetch('/api/device')).json();
                        this.devices = devices
                    },
                    async  getUser() {
                        const response = await fetch("/.auth/me");
                        const payload = await response.json();
                        const { clientPrincipal } = payload;
                        this.user = clientPrincipal;
                    }

                }
})
        </script>
    </body>

</html>