budibase/packages/builder/src/components/start/BuilderSettingsModal.svelte

94 lines
2.4 KiB
Svelte

<script>
import { notifier } from "builderStore/store/notifications"
import { hostingStore } from "builderStore"
import { HostingTypes } from "constants/backend"
import { Input, ModalContent, Toggle } from "@budibase/bbui"
import ThemeEditor from "components/settings/ThemeEditor.svelte"
import analytics from "analytics"
import { onMount } from "svelte"
let hostingInfo
let selfhosted = false
$: analyticsDisabled = analytics.disabled()
async function save() {
hostingInfo.type = selfhosted ? HostingTypes.SELF : HostingTypes.CLOUD
if (!selfhosted && hostingInfo._rev) {
hostingInfo = {
type: hostingInfo.type,
_id: hostingInfo._id,
_rev: hostingInfo._rev,
}
}
try {
await hostingStore.actions.save(hostingInfo)
notifier.success(`Settings saved.`)
} catch (err) {
notifier.danger(`Failed to update builder settings.`)
}
}
function updateSelfHosting(event) {
if (hostingInfo.type === HostingTypes.CLOUD && event.target.checked) {
hostingInfo.hostingUrl = "localhost:10000"
hostingInfo.useHttps = false
hostingInfo.selfHostKey = "budibase"
}
}
function toggleAnalytics() {
if (analyticsDisabled) {
analytics.optIn()
} else {
analytics.optOut()
}
}
onMount(async () => {
hostingInfo = await hostingStore.actions.fetch()
selfhosted = hostingInfo.type === "self"
})
</script>
<ModalContent title="Builder settings" confirmText="Save" onConfirm={save}>
<h5>Theme</h5>
<ThemeEditor />
<h5>Hosting</h5>
<p>
This section contains settings that relate to the deployment and hosting of
apps made in this builder.
</p>
<Toggle
thin
text="Self hosted"
on:change={updateSelfHosting}
bind:checked={selfhosted} />
{#if selfhosted}
<Input bind:value={hostingInfo.hostingUrl} label="Hosting URL" />
<Input bind:value={hostingInfo.selfHostKey} label="Hosting Key" />
<Toggle thin text="HTTPS" bind:checked={hostingInfo.useHttps} />
{/if}
<h5>Analytics</h5>
<p>
If you would like to send analytics that help us make budibase better,
please let us know below.
</p>
<Toggle
thin
text="Send Analytics To Budibase"
checked={!analyticsDisabled}
on:change={toggleAnalytics} />
</ModalContent>
<style>
h5 {
margin: 0;
font-size: 14px;
}
p {
margin: 0;
font-size: 12px;
}
</style>