2020-05-27 02:25:37 +12:00
|
|
|
<script>
|
2020-05-27 03:37:11 +12:00
|
|
|
import { Input, TextArea, Button } from "@budibase/bbui"
|
2020-05-27 02:25:37 +12:00
|
|
|
import { AppsIcon, InfoIcon, CloseIcon } from "components/common/Icons/"
|
|
|
|
import { getContext } from "svelte"
|
|
|
|
export let onCancel = () => {}
|
|
|
|
export let onOkay = () => {}
|
|
|
|
|
|
|
|
const { close } = getContext("simple-modal")
|
2020-05-27 21:44:15 +12:00
|
|
|
|
|
|
|
let name = ""
|
|
|
|
let description = ""
|
|
|
|
|
|
|
|
const createNewApp = async () => {
|
|
|
|
const data = { name, description}
|
|
|
|
|
|
|
|
try {
|
|
|
|
const response = await fetch('/api/applications', {
|
|
|
|
method: 'POST', // *GET, POST, PUT, DELETE, etc.
|
|
|
|
credentials: 'same-origin', // include, *same-origin, omit
|
|
|
|
headers: {
|
|
|
|
'Content-Type': 'application/json'
|
|
|
|
// 'Content-Type': 'application/x-www-form-urlencoded',
|
|
|
|
},
|
|
|
|
body: JSON.stringify(data) // body data type must match "Content-Type" header
|
|
|
|
});
|
|
|
|
} catch (error) {
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
2020-05-27 02:25:37 +12:00
|
|
|
|
|
|
|
let value
|
|
|
|
let onChange = () => {}
|
|
|
|
|
|
|
|
function _onCancel() {
|
|
|
|
onCancel()
|
|
|
|
close()
|
|
|
|
}
|
|
|
|
|
2020-05-27 21:44:15 +12:00
|
|
|
async function _onOkay() {
|
|
|
|
await createNewApp()
|
2020-05-27 02:25:37 +12:00
|
|
|
close()
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<div class="container">
|
|
|
|
<div class="body">
|
|
|
|
<div class="heading">
|
|
|
|
<span class="icon"><AppsIcon /></span>
|
|
|
|
<h3>Create new web app</h3>
|
|
|
|
</div>
|
2020-05-27 21:44:15 +12:00
|
|
|
<Input name="name" label="Name" placeholder="Enter application name" on:change={(e) => name = e.target.value} on:input={(e) => name = e.target.value} />
|
2020-05-27 02:25:37 +12:00
|
|
|
<TextArea
|
2020-05-27 21:44:15 +12:00
|
|
|
bind:value={description}
|
2020-05-27 02:25:37 +12:00
|
|
|
name="description"
|
|
|
|
label="Description"
|
|
|
|
placeholder="Describe your application" />
|
|
|
|
</div>
|
|
|
|
<div class="footer">
|
|
|
|
<a href="./#" class="info"><InfoIcon />How to get started</a>
|
2020-05-27 03:37:11 +12:00
|
|
|
<Button outline thin on:click={_onCancel}>
|
|
|
|
Cancel
|
2020-05-27 02:25:37 +12:00
|
|
|
</Button>
|
2020-05-27 03:37:11 +12:00
|
|
|
<Button primary thin on:click={_onOkay}>
|
|
|
|
Save
|
2020-05-27 02:25:37 +12:00
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
<div class="close-button" on:click={_onCancel}><CloseIcon /></div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
|
|
|
.container {
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
|
|
|
.close-button {
|
|
|
|
cursor: pointer;
|
|
|
|
position: absolute;
|
|
|
|
top: 20px;
|
|
|
|
right: 20px;
|
|
|
|
}
|
|
|
|
.close-button :global(svg) {
|
|
|
|
width: 24px;
|
|
|
|
height: 24px;
|
|
|
|
}
|
|
|
|
.heading {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
align-items: center;
|
2020-05-27 03:37:11 +12:00
|
|
|
margin-bottom: 20px;
|
2020-05-27 02:25:37 +12:00
|
|
|
}
|
|
|
|
h3 {
|
|
|
|
margin: 0;
|
|
|
|
font-size: 24px;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
.icon {
|
|
|
|
display: grid;
|
|
|
|
border-radius: 3px;
|
|
|
|
align-content: center;
|
|
|
|
justify-content: center;
|
|
|
|
margin-right: 12px;
|
|
|
|
height: 20px;
|
|
|
|
width: 20px;
|
|
|
|
padding: 10px;
|
|
|
|
background-color: var(--blue-light);
|
|
|
|
}
|
|
|
|
.info {
|
|
|
|
color: var(--primary100);
|
|
|
|
text-decoration-color: var(--primary100);
|
|
|
|
}
|
|
|
|
.info :global(svg) {
|
|
|
|
fill: var(--primary100);
|
|
|
|
margin-right: 8px;
|
|
|
|
width: 24px;
|
|
|
|
height: 24px;
|
|
|
|
}
|
|
|
|
.body {
|
|
|
|
padding: 40px 40px 80px 40px;
|
|
|
|
display: grid;
|
|
|
|
grid-gap: 20px;
|
|
|
|
}
|
|
|
|
.footer {
|
|
|
|
display: grid;
|
2020-05-27 03:37:11 +12:00
|
|
|
grid-gap: 20px;
|
2020-05-27 02:25:37 +12:00
|
|
|
align-items: center;
|
|
|
|
grid-template-columns: 1fr auto auto;
|
|
|
|
padding: 30px 40px;
|
|
|
|
border-bottom-left-radius: 5px;
|
|
|
|
border-bottom-right-radius: 50px;
|
|
|
|
background-color: var(--grey-light);
|
|
|
|
}
|
|
|
|
</style>
|