From 8c89938eafd6499d2f5e9c4e1505033b0a281180 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 23:07:30 +0100
Subject: [PATCH] pattern json export + import

---
 website/src/repl/panel/PatternsTab.jsx | 25 +++++++++++++++++++------
 website/src/settings.mjs               |  6 ++++--
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index def6cef1..4b1dfcf1 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -8,8 +8,10 @@ import {
   deleteActivePattern,
   duplicateActivePattern,
   getUserPattern,
+  getUserPatterns,
   renameActivePattern,
   addUserPattern,
+  setUserPatterns,
 } from '../../settings.mjs';
 import { logger } from '@strudel.cycles/core';
 import { DocumentDuplicateIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/20/solid';
@@ -82,15 +84,19 @@ export function PatternsTab({ context }) {
               style={{ display: 'none' }}
               type="file"
               multiple
-              accept="text/plain"
+              accept="text/plain,application/json"
               onChange={async (e) => {
                 const files = Array.from(e.target.files);
                 await Promise.all(
                   files.map(async (file, i) => {
-                    const code = await file.text();
-                    const name = file.name.replace(/\.[^/.]+$/, '');
-                    console.log(i, name, code);
-                    addUserPattern(name, { code });
+                    const content = await file.text();
+                    if (file.type === 'application/json') {
+                      const userPatterns = getUserPatterns() || {};
+                      setUserPatterns({ ...userPatterns, ...JSON.parse(content) });
+                    } else if (file.type === 'text/plain') {
+                      const name = file.name.replace(/\.[^/.]+$/, '');
+                      addUserPattern(name, { code: content });
+                    }
                   }),
                 );
                 logger(`import done!`);
@@ -101,7 +107,14 @@ export function PatternsTab({ context }) {
           <button
             className="hover:opacity-50"
             onClick={() => {
-              console.log('export');
+              const blob = new Blob([JSON.stringify(userPatterns)], { type: 'application/json' });
+              const downloadLink = document.createElement('a');
+              downloadLink.href = window.URL.createObjectURL(blob);
+              const date = new Date().toISOString().split('T')[0];
+              downloadLink.download = `strudel_patterns_${date}.json`;
+              document.body.appendChild(downloadLink);
+              downloadLink.click();
+              document.body.removeChild(downloadLink);
             }}
           >
             export
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 620fb890..cf8a7cee 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -62,14 +62,14 @@ export const fontSize = patternSetting('fontSize');
 
 export const settingPatterns = { theme, fontFamily, fontSize };
 
-function getUserPatterns() {
+export function getUserPatterns() {
   return JSON.parse(settingsMap.get().userPatterns);
 }
 function getSetting(key) {
   return settingsMap.get()[key];
 }
 
-function setUserPatterns(obj) {
+export function setUserPatterns(obj) {
   settingsMap.setKey('userPatterns', JSON.stringify(obj));
 }
 
@@ -193,3 +193,5 @@ export function duplicateActivePattern() {
 export function setActivePattern(key) {
   settingsMap.setKey('activePattern', key);
 }
+
+export function importUserPatternJSON(jsonString) {}