10 changed files with 402 additions and 10085 deletions
@ -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})}))}(); |
|||
|
|||
File diff suppressed because one or more lines are too long
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> |
|||
Loading…
Reference in new issue