AspNetCoreBackendSSEWithPlainJavasciptEventSourceAndArrowJsReactiveDemo/TestPageUsingArrowJsReactivity.html at master · pjrusso/AspNetCoreBackendSSEWithPlainJavasciptEventSourceAndArrowJsReactiveDemo · 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>SSE client using Arrow.js Reactivity</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />
    <style>
        .led {
            display: inline-block;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            position: relative;
            border: 1px solid rgba(0,0,0,0.4);
            box-shadow: inset 0 -2px 4px rgba(0,0,0,0.35), inset 0 2px 4px rgba(255,255,255,0.2), 0 0 2px rgba(0,0,0,0.5);
        }

            .led::before {
                content: '';
                position: absolute;
                top: 2px;
                left: 3px;
                width: 8px;
                height: 5px;
                border-radius: 50%;
                background: rgba(255,255,255,0.75);
                transform: rotate(-20deg);
            }

        .led-green {
            background: radial-gradient(circle at 30% 30%, #aaffaa 0%, #55ff55 20%, #11bb11 60%, #006600 100%);
            box-shadow: inset 0 -2px 4px rgba(0,0,0,0.35), inset 0 2px 4px rgba(255,255,255,0.2), 0 0 10px #00ff00, 0 0 20px rgba(0,255,0,0.6);
        }

        .led-red {
            background: radial-gradient(circle at 30% 30%, #ffaaaa 0%, #ff5555 20%, #cc1111 60%, #770000 100%);
            box-shadow: inset 0 -2px 4px rgba(0,0,0,0.35), inset 0 2px 4px rgba(255,255,255,0.2), 0 0 10px #ff0000, 0 0 20px rgba(255,0,0,0.6);
        }
    </style>
</head>
<body>
    <main class="container">
        <div class="grid">
            <div id="app"></div>
            <div>
                <table>
                    <thead>
                        <tr>
                            <th scope="col">Date</th>
                            <th scope="col">Weather</th>
                            <th scope="col">°C</th>
                            <th scope="col">°F</th>
                        </tr>
                    </thead>
                    <tbody id="tbody">
                    </tbody>
                </table>
            </div>
        </div>
    </main>

    <script type="module">
        import { reactive, html } from "https://esm.sh/@arrow-js/core";
        import { css } from "https://esm.sh/goober";

        // Arrow.js: `html` is a tagged-template function used to create template results
        // from template literals. When you write `html` followed by a template string
        // (e.g. html`<div>${value}</div>`), Arrow parses that template and returns
        // a renderable/template result that the Arrow runtime can efficiently
        // update. In this demo we prefer inline `html` usage inside reactive
        // interpolations so Arrow can correctly manage updates.
        //
        // `reactive({...})` wraps a plain object and makes its properties
        // observable. Using ${"() => ..."} inside an Arrow template tells the
        // renderer to call that function whenever dependencies change and update
        // only that portion of the DOM.
        const state = reactive({
            connected: false,
            forecasts: []
        });

        // NOTE: Returning a tagged-template result from a separate helper and
        // then interpolating that helper (e.g. ${() => renderConnectionState(...)} )
        // can confuse some template renderers. In this example we inline the
        // html`<span>...</span>` template directly inside the reactive
        // interpolation so Arrow can manage it reliably.

        // Get pretty icon...
        function getWeatherIcon(forecast) {
            const summary = (forecast.Summary || "").toLowerCase();
            const temp = forecast.TemperatureC;

            if (summary.includes("freezing") || temp <= 0) return "❄️";
            if (summary.includes("chilly") || temp < 10) return "🧥";
            if (summary.includes("mild")) return "🌤️";
            if (summary.includes("warm")) return "☀️";
            if (summary.includes("hot") || temp >= 28) return "🔥";

            return "🌡️";
        }

        // Attach to the state variable to produce LI for each value...
        // Inline html tagged-template here so Arrow can manage updates...
        //                     ${() => html`<span class="led ${state.connected ? 'led-green' : 'led-red'}" title="${state.connected ? 'Connected' : 'Disconnected'}"></span>`}

        // Dynamically generate CSS using goober
        function forecastClass(forecast) {

            let borderColour = "#999";
            let background = "#f5f5f5";

            if (forecast.TemperatureC < 10) {
                borderColour = "#2196F3";
                background = "#E3F2FD";
            }
            else if (forecast.TemperatureC < 20) {
                borderColour = "#4CAF50";
                background = "#E8F5E9";
            }
            else {
                borderColour = "#FF5722";
                background = "#FBE9E7";
            }

            return css`
                padding:10px;
                margin-bottom:8px;
                border-left:6px solid ${borderColour};
                background:${background};
                border-radius:8px;

                transition:all 0.3s;

                &:hover {
                    transform:translateX(8px);
                    box-shadow:0 3px 10px rgba(0,0,0,0.2);
                }
            `;
        }

        const view = html`
            <div>

                <h2>
                    Weather stream
                    <span class="${() =>
                state.connected
                    ? "led led-green"
                    : "led led-red"}">
                    </span>
                </h2>

                <p>
                    ${() => state.connected
                ? "Connected"
                : "Disconnected"}
                </p>

                <ul>

                ${() =>
                state.forecasts.map(forecast => html`

                        <li class="${forecastClass(forecast)}">

                            <span style="font-size:1.5rem">
                                ${getWeatherIcon(forecast)}
                            </span>

                            <strong>
                                ${forecast.Date}
                            </strong>

                            ${forecast.TemperatureC}°C
                            /
                            ${forecast.TemperatureF}°F

                            ${forecast.Summary
                        ? `- ${forecast.Summary}`
                        : ""}

                        </li>

                    `)
            }

                </ul>

            </div>
        `;

        view(document.getElementById("app"));

        const tableBody = html`
            ${() => state.forecasts.map(forecast => html`
                <tr>
                    <td>${forecast.Date}</td>
                    <td class="text-align: center;">${getWeatherIcon(forecast)}</td>
                    <td class="text-align: right;">${forecast.TemperatureC}°C</td>
                    <td class="text-align: right;">${forecast.TemperatureF}°F</td>
                </tr>
            `)}
        `;

        tableBody(document.getElementById("tbody"));


        // Simply attach to the SSE event source...
        const source = new EventSource("https://localhost:7017/weatherforecastevents");

        source.onopen = () => {
            state.connected = true;
        };

        source.onerror = () => {
            state.connected = false;
        };

        // Listen for 'weather' events, just push onto the reactive state value...
        source.addEventListener("weather", event => {
            const forecast = JSON.parse(event.data);

            state.forecasts.push(forecast);
        });
    </script>
</body>
</html>