Skip to content

Commit 1ea3efc

Browse files
JaneSjsJaneSjs
committed
Save the theme
1 parent 46810b9 commit 1ea3efc

File tree

1 file changed

+90
-37
lines changed

1 file changed

+90
-37
lines changed

‎blogpost-apps/local-first-form-builder/index.html

Lines changed: 90 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -21,52 +21,105 @@
2121
<body>
2222
<div id="surveyCreatorContainer" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"></div>
2323

24-
<script>
25-
const LOCAL_STORAGE_KEY = "localSurveyJSON";
26-
const SYNCED_FLAG_KEY = "localSurveySynced";
24+
<script>
25+
const LOCAL_STORAGE_KEY = "localSurveyJSON";
26+
const THEME_STORAGE_KEY = "localSurveyTheme";
27+
const SYNCED_FLAG_KEY = "localSurveySynced";
2728

28-
SurveyCreatorCore.registerCreatorTheme(SurveyCreatorTheme);
29+
let isSurveySaved = false;
30+
let isThemeSaved = false;
2931

30-
const creator = new SurveyCreator.SurveyCreator();
32+
SurveyCreatorCore.registerCreatorTheme(SurveyCreatorTheme);
33+
SurveyCreatorCore.registerSurveyTheme(SurveyTheme);
3134

32-
creator.autoSaveEnabled = true;
35+
const creator = new SurveyCreator.SurveyCreator({
36+
showThemeTab: true,
37+
showTranslationTab: true
38+
});
3339

34-
const savedJSON = localStorage.getItem(LOCAL_STORAGE_KEY);
35-
if (savedJSON) {
36-
try {
37-
creator.JSON = JSON.parse(savedJSON);
38-
} catch (e) {
39-
console.warn("Failed to parse saved JSON from localStorage:", e);
40-
}
40+
creator.autoSaveEnabled = true;
41+
42+
// Restore saved JSON
43+
const savedJSON = localStorage.getItem(LOCAL_STORAGE_KEY);
44+
if (savedJSON) {
45+
try {
46+
creator.JSON = JSON.parse(savedJSON);
47+
} catch (e) {
48+
console.warn("Failed to parse saved JSON:", e);
49+
}
50+
}
51+
52+
// Restore theme
53+
const savedTheme = localStorage.getItem(THEME_STORAGE_KEY);
54+
if (savedTheme) {
55+
try {
56+
creator.theme = JSON.parse(savedTheme);
57+
} catch (e) {
58+
console.warn("Failed to parse saved theme:", e);
59+
}
60+
}
61+
62+
63+
function markSyncedIfBothSaved() {
64+
if (isSurveySaved && isThemeSaved) {
65+
localStorage.setItem(SYNCED_FLAG_KEY, "true");
66+
console.log("Both survey and theme saved. Synced flag set.");
67+
} else {
68+
localStorage.setItem(SYNCED_FLAG_KEY, "false");
4169
}
70+
}
4271

43-
creator.saveSurveyFunc = (saveNo, callback) => {
72+
creator.saveSurveyFunc = (saveNo, callback) => {
73+
try {
4474
const currentJSON = creator.JSON;
4575
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(currentJSON));
46-
localStorage.setItem(SYNCED_FLAG_KEY, "false");
47-
console.log("Survey auto-saved locally.");
48-
callback(saveNo, true);
49-
};
50-
51-
window.addEventListener("online", () => {
52-
const json = localStorage.getItem(LOCAL_STORAGE_KEY);
53-
const isSynced = localStorage.getItem(SYNCED_FLAG_KEY);
54-
55-
if (json && isSynced !== "true") {
56-
sendToServer(JSON.parse(json));
57-
}
58-
});
59-
60-
function sendToServer(data) {
61-
console.log("Syncing with server...", data);
62-
63-
setTimeout(() => {
64-
console.log("Sync complete.");
65-
localStorage.setItem(SYNCED_FLAG_KEY, "true");
66-
}, 1000);
76+
isSurveySaved = true;
77+
console.log("Survey saved.");
78+
} catch (e) {
79+
console.error("Failed to save survey JSON:", e);
80+
isSurveySaved = false;
6781
}
82+
markSyncedIfBothSaved();
83+
callback(saveNo, true);
84+
};
85+
86+
creator.saveThemeFunc = (saveNo, callback) => {
87+
try {
88+
const currentTheme = creator.theme;
89+
localStorage.setItem(THEME_STORAGE_KEY, JSON.stringify(currentTheme));
90+
isThemeSaved = true;
91+
console.log("Theme saved.");
92+
} catch (e) {
93+
console.error("Failed to save theme:", e);
94+
isThemeSaved = false;
95+
}
96+
markSyncedIfBothSaved();
97+
callback(saveNo, true);
98+
};
99+
100+
window.addEventListener("online", () => {
101+
const isSynced = localStorage.getItem(SYNCED_FLAG_KEY);
102+
const json = localStorage.getItem(LOCAL_STORAGE_KEY);
103+
const theme = localStorage.getItem(THEME_STORAGE_KEY);
104+
105+
if (isSynced !== "true" && json && theme) {
106+
console.log("Syncing with server...");
107+
sendToServer(JSON.parse(json), theme);
108+
}
109+
});
110+
111+
function sendToServer(surveyData, theme) {
112+
// Simulated async sync
113+
setTimeout(() => {
114+
console.log("Synced survey:", surveyData);
115+
console.log("Synced theme:", theme);
116+
localStorage.setItem(SYNCED_FLAG_KEY, "true");
117+
}, 1000);
118+
}
119+
120+
creator.render("surveyCreatorContainer");
121+
</script>
122+
68123

69-
creator.render("surveyCreatorContainer");
70-
</script>
71124
</body>
72125
</html>

0 commit comments

Comments
 (0)