ufkc7e3d
/
budibase
forked from tsai/budibase
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

screenslots working again

master
Martin McKeaveney 7 years ago
parent
5b4bce8b8f
commit
58871883f9
6 changed files with 93 additions and 67 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      packages/builder/src/builderStore/store/index.js
  2. 51
      packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
  3. 48
      packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
  4. 19
      packages/builder/src/components/userInterface/pagesParsing/createProps.js
  5. 10
      packages/builder/src/components/userInterface/temporaryPanelStructure.js
  6. 27
      packages/server/api/controllers/static.js

5
packages/builder/src/builderStore/store/index.js
View File

@ -9,7 +9,6 @@ import {
import { getExactComponent } from "components/userInterface/pagesParsing/searchComponents" import { getExactComponent } from "components/userInterface/pagesParsing/searchComponents"
import { rename } from "components/userInterface/pagesParsing/renameScreen" import { rename } from "components/userInterface/pagesParsing/renameScreen"
import { import {
// getNewScreen,
createProps, createProps,
makePropsSafe, makePropsSafe,
getBuiltin, getBuiltin,
@ -353,8 +352,10 @@ const addChildComponent = store => (componentToAdd, presetName) => {
store.update(state => { store.update(state => {
function findSlot(component_array) { function findSlot(component_array) {
for (let i = 0; i < component_array.length; i += 1) { for (let i = 0; i < component_array.length; i += 1) {
if (component_array[i]._component === "##builtin/screenslot") if (component_array[i]._component === "##builtin/screenslot") {
return true return true
}
if (component_array[i]._children) findSlot(component_array[i]) if (component_array[i]._children) findSlot(component_array[i])
} }

51
packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
View File

@ -1,8 +1,10 @@
<script> <script>
import { store, backendUiStore } from "builderStore" import { store, backendUiStore } from "builderStore"
import { map, join } from "lodash/fp" import { map, join } from "lodash/fp"
import iframeTemplate from "./iframeTemplate";
import { pipe } from "components/common/core" import { pipe } from "components/common/core"
let iframe let iframe
function transform_component(comp) { function transform_component(comp) {
@ -77,48 +79,13 @@
style="height: 100%; width: 100%" style="height: 100%; width: 100%"
title="componentPreview" title="componentPreview"
bind:this={iframe} bind:this={iframe}
srcdoc={`<html> srcdoc={iframeTemplate({
<head> styles,
${stylesheetLinks} stylesheetLinks,
selectedComponentId,
<style> frontendDefinition: JSON.stringify(frontendDefinition),
${styles || ''} currentPageFunctions: $store.currentPageFunctions
})} />
.pos-${selectedComponentId} {
border: 2px solid #0055ff;
}
body, html {
height: 100%!important;
}
.lay-__screenslot__text {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
border: dashed 2px #ccc;
font-family: sans-serif;
font-size: 1.2rem;
color: #999;
text-transform: uppercase;
font-weight: bold;
}
<\/style>
<\script>
window["##BUDIBASE_FRONTEND_DEFINITION##"] = ${JSON.stringify(frontendDefinition)};
window["##BUDIBASE_FRONTEND_FUNCTIONS##"] = ${$store.currentPageFunctions};
import('/_builder/budibase-client.esm.mjs')
.then(module => {
module.loadBudibase({ window, localStorage });
})
<\/script>
</head>
<body>
</body>
</html>`} />
{/if} {/if}
</div> </div>

48
packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
View File

@ -0,0 +1,48 @@
export default ({
styles,
stylesheetLinks,
selectedComponentId,
frontendDefinition,
currentPageFunctions
}) => `<html>
<head>
${stylesheetLinks}
<style>
${styles || ''}
.pos-${selectedComponentId} {
border: 2px solid #0055ff;
}
body, html {
height: 100%!important;
}
.lay-__screenslot__text {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
border: dashed 2px #ccc;
font-family: sans-serif;
font-size: 1.2rem;
color: #999;
text-transform: uppercase;
font-weight: bold;
}
<\/style>
<\script>
window["##BUDIBASE_FRONTEND_DEFINITION##"] = ${frontendDefinition};
window["##BUDIBASE_FRONTEND_FUNCTIONS##"] = ${currentPageFunctions};
import('/_builder/budibase-client.esm.mjs')
.then(module => {
module.loadBudibase({ window, localStorage });
})
<\/script>
</head>
<body>
</body>
</html>`

19
packages/builder/src/components/userInterface/pagesParsing/createProps.js
View File

@ -3,27 +3,16 @@ import { TYPE_MAP } from "./types"
import { assign } from "lodash" import { assign } from "lodash"
import { uuid } from "builderStore/uuid" import { uuid } from "builderStore/uuid"
export const getBuiltin = name => { export const getBuiltin = _component => {
const { props } = createProps({ name }) const { props } = createProps({ _component })
return { return {
name, _component,
name: "Screenslot",
props, props,
} }
} }
// export const getNewScreen = (components, rootComponentName, name) => {
// const rootComponent = components[rootComponentName]
// return {
// name: name || "",
// description: "",
// url: "",
// _css: "",
// uiFunctions: "",
// props: createProps(rootComponent).props,
// }
// }
/** /**
* @param {object} componentDefinition - component definition from a component library * @param {object} componentDefinition - component definition from a component library
* @param {object} derivedFromProps - extra props derived from a components given props. * @param {object} derivedFromProps - extra props derived from a components given props.

10
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View File

@ -4,6 +4,14 @@ export default {
name: 'Basic', name: 'Basic',
isCategory: true, isCategory: true,
children: [ children: [
{
_component: "##builtin/screenslot",
name: 'Screenslot',
description: 'This component is a placeholder for the rendering of a screen within a page.',
icon: 'ri-crop-2-line',
commonProps: {},
children: []
},
{ {
_component: "@budibase/standard-components/container", _component: "@budibase/standard-components/container",
name: 'Container', name: 'Container',
@ -116,6 +124,7 @@ export default {
children: [] children: []
}, },
{ {
_component: "@budibase/standard-components/login",
name: 'Login', name: 'Login',
description: 'A component that automatically generates a login screen for your app.', description: 'A component that automatically generates a login screen for your app.',
icon: 'ri-login-box-fill', icon: 'ri-login-box-fill',
@ -144,6 +153,7 @@ export default {
children: [] children: []
}, },
{ {
_component: "@budibase/materialdesign-components/Form",
name: 'Form', name: 'Form',
description: 'A component that generates a form from your data.', description: 'A component that generates a form from your data.',
icon: 'ri-file-edit-fill', icon: 'ri-file-edit-fill',

27
packages/server/api/controllers/static.js
View File

@ -2,22 +2,32 @@ const send = require("koa-send");
const { resolve } = require("path") const { resolve } = require("path")
const { homedir } = require("os"); const { homedir } = require("os");
// either serve the builder or serve the actual app index.html
const builderPath = resolve(process.cwd(), "builder")
exports.serveBuilder = async function(ctx) { exports.serveBuilder = async function(ctx) {
console.log(ctx.file); const builderPath = resolve(process.cwd(), "builder")
await send(ctx, ctx.file, { root: builderPath }) await send(ctx, ctx.file, { root: builderPath })
} }
exports.serveApp = async function(ctx) { exports.serveApp = async function(ctx) {
// resolve unauthenticated page if so // TODO: update homedir stuff to wherever budi is run
await send(ctx, "/index.html", { root: ctx.publicPath }) // default to homedir
const appPath = resolve(
homedir(),
".budibase",
ctx.params.appId,
"public",
ctx.isAuthenticated ? "main" : "unauthenticated"
);
// TODO: Hook up to JWT auth in real app
// TODO: serve CSS and other assets
// resolve unauthenticated page if user not authenticated
// resolve main page if user authenticated // resolve main page if user authenticated
await send(ctx, "/index.html", { root: appPath })
} }
exports.serveComponentLibrary = async function(ctx) { exports.serveComponentLibrary = async function(ctx) {
// TODO: update to run wherever budi is run // TODO: update homedir stuff to wherever budi is run
// default to homedir
const componentLibraryPath = resolve( const componentLibraryPath = resolve(
homedir(), homedir(),
".budibase", ".budibase",
@ -31,7 +41,8 @@ exports.serveComponentLibrary = async function(ctx) {
} }
exports.serveComponentDefinitions = async function(ctx) { exports.serveComponentDefinitions = async function(ctx) {
// TODO: update to run wherever budi is run // TODO: update homedir stuff to wherever budi is run
// default to homedir
const componentLibraryPath = resolve( const componentLibraryPath = resolve(
homedir(), homedir(),
".budibase", ".budibase",

Write Preview
Loading…
Cancel
Save