Experiment to rebuild Diffuse using web applets.
feat: export data on output configurator
+15
-1
+15
-1
src/pages/configurator/output/_applet.astro
+15
-1
src/pages/configurator/output/_applet.astro
···
26
26
</mark>
27
27
</small>
28
28
</p>
29
+
<!-- Snapshots -->
30
+
<h2>Export & Import</h2>
31
+
<p>
32
+
<a id="download" download="diffuse.json" style="cursor: pointer">Download a snapshot</a> of your
33
+
data.
34
+
</p>
29
35
</main>
30
36
31
37
<style is:global>
···
106
112
localStorage.setItem(LOCALSTORAGE_KEY, method);
107
113
108
114
// Monitor data
109
-
// TODO: encode/decode data?
110
115
(async () => {
111
116
const conn = await connection(method);
112
117
context.data = conn.data;
118
+
dataEventHandler({ data: conn.data } as any);
113
119
conn.addEventListener("data", dataEventHandler);
114
120
})();
115
121
});
116
122
117
123
function dataEventHandler(event: AppletEvent) {
118
124
context.data = event.data as ManagedOutput;
125
+
126
+
// Export data URI
127
+
const dl = document.querySelector("#download");
128
+
if (dl) {
129
+
const json = JSON.stringify(context.data.tracks.collection, null, 2);
130
+
const href = URL.createObjectURL(new Blob([json], { type: "application/json" }));
131
+
dl.setAttribute("href", href);
132
+
}
119
133
}
120
134
121
135
// Mount + Unmount