Ask if user wants to download latest version of block on lunch of the devTool.
This commit is contained in:
+1
-136
@@ -1,136 +1 @@
|
||||
window.initBlock = initBlock;
|
||||
|
||||
let template;
|
||||
let data = {};
|
||||
let reload;
|
||||
|
||||
// Blocks Initialization.
|
||||
function initBlock(blockName = '', selector = '', cb) {
|
||||
reload = function () {
|
||||
document.querySelectorAll(selector).forEach((el) => cb(el));
|
||||
};
|
||||
|
||||
reload();
|
||||
}
|
||||
|
||||
// Data Updates Listeners.
|
||||
(function () {
|
||||
loadDataOptions();
|
||||
listenToDataOptionsUpdates();
|
||||
|
||||
function listenToDataOptionsUpdates() {
|
||||
window.addEventListener('message', function (event) {
|
||||
const message = event.data;
|
||||
const prefix = 'dataUpdate:';
|
||||
|
||||
if (typeof message !== "string" || !message.startsWith(prefix)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
data = JSON.parse(message.substring(prefix.length));
|
||||
updateBlock({data});
|
||||
} catch (e) {
|
||||
console.log('Error parsing incoming data.', e);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getQueryParams() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const params = {};
|
||||
|
||||
for (const [key, value] of urlParams) {
|
||||
params[key] = value;
|
||||
}
|
||||
|
||||
return params;
|
||||
}
|
||||
|
||||
function loadDataOptions() {
|
||||
const queryParameters = new URLSearchParams({name: getQueryParams().data || 'default'});
|
||||
fetch(`/data?${queryParameters}`)
|
||||
.then((response) => response.json())
|
||||
.then((response) => {
|
||||
data = response.data; // Update state.
|
||||
updateBlock({data});
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
// Listen to Template updates.
|
||||
(function () {
|
||||
initSocket();
|
||||
|
||||
function initSocket() {
|
||||
const socket = window.io.connect();
|
||||
|
||||
socket.on('error', function (err) {
|
||||
console.log(err);
|
||||
});
|
||||
|
||||
// socket.on('connect', function () {
|
||||
// console.log('user connected', socket.id)
|
||||
// });
|
||||
|
||||
socket.on('templateUpdate', function (args) {
|
||||
updateBlock({template: args.template});
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
function updateBlock(args = {}) {
|
||||
if (args.template) {
|
||||
template = args.template; // Update state.
|
||||
}
|
||||
|
||||
if (args.data) {
|
||||
data = args.data; // Update state.
|
||||
}
|
||||
|
||||
if (!template) {
|
||||
return;
|
||||
}
|
||||
|
||||
renderBlock(template, data || {}, document.getElementById("hbs-container"));
|
||||
}
|
||||
|
||||
function renderBlock(templateHbs, jsonData, target) {
|
||||
const template = Handlebars.compile(templateHbs);
|
||||
|
||||
/**
|
||||
* Handlebars Helpers
|
||||
*/
|
||||
Handlebars.registerHelper('esc_attr', function (attr) {
|
||||
return attr;
|
||||
});
|
||||
|
||||
Handlebars.registerHelper('esc_url', function (attr) {
|
||||
return attr;
|
||||
});
|
||||
|
||||
Handlebars.registerHelper('esc_html', function (attr) {
|
||||
return attr;
|
||||
});
|
||||
|
||||
Handlebars.registerHelper('base_url', function () {
|
||||
return '/';
|
||||
});
|
||||
|
||||
let html;
|
||||
|
||||
try {
|
||||
html = template(jsonData);
|
||||
} catch (e) {
|
||||
html = `<div style="max-width: 1280px; margin: 1rem auto;">
|
||||
<h1 style="all: unset; font-size: 1.5rem; font-weight: bold; display: block;">Syntax Error:</h1>
|
||||
<pre style="all: unset; padding: 10px 15px; background-color: #ffe6e6; border: 1px solid red; border-radius: 0.25rem; overflow: auto; display: block; white-space: pre;">${e.toString()}</pre>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
target.innerHTML = html;
|
||||
if (reload) {
|
||||
reload();
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=frame-index.min.js.map
|
||||
let e;window.initBlock=function(e="",n="",r){t=function(){document.querySelectorAll(n).forEach((e=>r(e)))},t()};let t,n={};function r(r={}){r.template&&(e=r.template),r.data&&(n=r.data),e&&function(e,n,r){const a=Handlebars.compile(e);let o;Handlebars.registerHelper("esc_attr",(function(e){return e})),Handlebars.registerHelper("esc_url",(function(e){return e})),Handlebars.registerHelper("esc_html",(function(e){return e})),Handlebars.registerHelper("base_url",(function(){return"/"}));try{o=a(n)}catch(e){o=`<div style="max-width: 1280px; margin: 1rem auto;">\n <h1 style="all: unset; font-size: 1.5rem; font-weight: bold; display: block;">Syntax Error:</h1>\n <pre style="all: unset; padding: 10px 15px; background-color: #ffe6e6; border: 1px solid red; border-radius: 0.25rem; overflow: auto; display: block; white-space: pre;">${e.toString()}</pre>\n </div>`}r.innerHTML=o,t&&t()}(e,n||{},document.getElementById("hbs-container"))}!function(){function e(){const e=new URLSearchParams(window.location.search),t={};for(const[n,r]of e)t[n]=r;return t}!function(){const t=new URLSearchParams({name:e().data||"default"});fetch(`/data?${t}`).then((e=>e.json())).then((e=>{n=e.data,r({data:n})}))}(),window.addEventListener("message",(function(e){const t=e.data,a="dataUpdate:";if("string"==typeof t&&t.startsWith(a))try{n=JSON.parse(t.substring(a.length)),r({data:n})}catch(e){console.log("Error parsing incoming data.",e)}}))}(),function(){const e=window.io.connect();e.on("error",(function(e){console.log(e)})),e.on("templateUpdate",(function(e){r({template:e.template})}))}();
|
||||
|
||||
Vendored
+15
-9905
File diff suppressed because one or more lines are too long
Vendored
+21
File diff suppressed because one or more lines are too long
@@ -0,0 +1,100 @@
|
||||
'use strict';
|
||||
|
||||
import React, {useState} from "react";
|
||||
import * as ReactDOM from "react-dom/client";
|
||||
|
||||
function init() {
|
||||
const wrapper = document.querySelector('#screen');
|
||||
|
||||
const root = ReactDOM.createRoot(wrapper);
|
||||
const html = (<SyncScreen/>);
|
||||
|
||||
root.render(html);
|
||||
}
|
||||
|
||||
function SyncScreen() {
|
||||
const [loading, setLoading] = useState(null);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
return <>
|
||||
|
||||
<section className="container py-5">
|
||||
<h1 style={{marginBottom: '2rem'}}>Oops... Block not in sync.</h1>
|
||||
{error && <p className="alert alert-danger">{error}</p>}
|
||||
|
||||
{loading ?
|
||||
<>
|
||||
{loading === 'syncing' &&
|
||||
<p>Version upgrade in progress...</p>
|
||||
}
|
||||
<p>Please wait...</p>
|
||||
</>
|
||||
:
|
||||
<>
|
||||
<p>Your version of the block is not in sync with the cloud (not latest version).<br/>
|
||||
Would you like to update it?</p>
|
||||
<div className="options">
|
||||
<button className="btn btn-primary" style={{marginRight: '0.5rem'}} onClick={runSyncLogic}>Yes, Update to
|
||||
Latest
|
||||
</button>
|
||||
<button className="btn btn-secondary" onClick={ignoreVersionSync}>Ignore</button>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
</section>
|
||||
|
||||
</>
|
||||
|
||||
async function ignoreVersionSync() {
|
||||
setLoading(true);
|
||||
|
||||
let data = {};
|
||||
try {
|
||||
const response = await fetch('/sync', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ignore: true}),
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
data = await response.json();
|
||||
} catch (err) {
|
||||
setError('Error: ' + err.message);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.status !== 200) {
|
||||
setError(data.message);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setTimeout(() => window.location.reload(), 1000);
|
||||
}
|
||||
|
||||
async function runSyncLogic() {
|
||||
setLoading('syncing');
|
||||
|
||||
let data = {};
|
||||
try {
|
||||
const response = await fetch('/sync', {method: 'POST'});
|
||||
data = await response.json();
|
||||
} catch (err) {
|
||||
setError('Error: ' + err.message);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.status !== 200) {
|
||||
setError(data.message);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setTimeout(() => window.location.reload(), 1000);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
init();
|
||||
@@ -0,0 +1,18 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Block Development Tool</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="screen">Loading...</div>
|
||||
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="/scripts/dist/sync.min.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user