setup wizard: general + db step UI

pull/33/head
NGPixel 8 years ago
parent d8fa6ecc27
commit 39fbb9c366

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -1 +1 @@
"use strict";jQuery(document).ready(function(e){new Vue({el:"main",data:{loading:!1,state:"welcome",syscheck:{ok:!1,error:""},conf:{title:"Wiki",host:""}},methods:{proceedToSyscheck:function(e){var t=this;this.state="syscheck",this.loading=!0,_.delay(function(){axios.post("/syscheck").then(function(e){e.data.ok===!0?t.syscheck.ok=!0:(t.syscheck.ok=!1,t.syscheck.error=e.data.error),t.loading=!1}).catch(function(e){window.alert(e.message)})},1e3)},proceedToGeneral:function(e){this.state="general",this.loading=!0}}})});
"use strict";jQuery(document).ready(function(e){new Vue({el:"main",data:{loading:!1,state:"welcome",syscheck:{ok:!1,error:""},conf:{title:"Wiki",host:"",port:80,lang:"en",db:"mongodb://localhost:27017/wiki"}},methods:{proceedToWelcome:function(e){this.state="welcome",this.loading=!1},proceedToSyscheck:function(e){var o=this;this.state="syscheck",this.loading=!0,_.delay(function(){axios.post("/syscheck").then(function(e){e.data.ok===!0?o.syscheck.ok=!0:(o.syscheck.ok=!1,o.syscheck.error=e.data.error),o.loading=!1}).catch(function(e){window.alert(e.message)})},1e3)},proceedToGeneral:function(e){this.state="general",this.loading=!1},proceedToDb:function(e){this.state="db",this.loading=!1}}})});

@ -14,10 +14,17 @@ jQuery(document).ready(function ($) {
},
conf: {
title: 'Wiki',
host: ''
host: '',
port: 80,
lang: 'en',
db: 'mongodb://localhost:27017/wiki'
}
},
methods: {
proceedToWelcome: function (ev) {
this.state = 'welcome'
this.loading = false
},
proceedToSyscheck: function (ev) {
let self = this
this.state = 'syscheck'
@ -39,7 +46,11 @@ jQuery(document).ready(function ($) {
},
proceedToGeneral: function (ev) {
this.state = 'general'
this.loading = true
this.loading = false
},
proceedToDb: function (ev) {
this.state = 'db'
this.loading = false
}
}
})

@ -37,15 +37,15 @@ i.icon-square-cross {
color: mc('red', '500')
}
.tst-welcome-leave-active {
.tst-welcome-leave-active, .tst-welcome-enter-active {
transition: all .5s;
overflow-y: hidden;
}
.tst-welcome-leave {
.tst-welcome-leave, .tst-welcome-enter-to {
opacity: 1;
max-height: 200px;
}
.tst-welcome-leave-to {
.tst-welcome-leave-to, .tst-welcome-enter {
opacity: 0;
max-height: 0;
padding-top: 0;

@ -46,6 +46,7 @@ html
p Detailed information about installation and usage can be found on the #[a(href='https://docs.wiki.requarks.io/') official documentation site]. #[br] Should you have any question or would like to report something that doesn't look right, feel free to create a new issue on the #[a(href='https://github.com/Requarks/wiki/issues') GitHub project].
.panel-footer
button.button.is-indigo(v-on:click='proceedToSyscheck', v-bind:disabled='loading') Start
template(v-else-if='state === "syscheck"')
.panel
h2.panel-title.is-featured
@ -56,8 +57,10 @@ html
p(v-if='!loading && syscheck.ok') #[i.icon-check] Looks great! No issues so far.
p(v-if='!loading && !syscheck.ok') #[i.icon-square-cross] Error: {{ syscheck.error }}
.panel-footer
button.button.is-indigo.is-outlined(v-on:click='proceedToWelcome', v-bind:disabled='loading') Back
button.button.is-teal(v-on:click='proceedToSyscheck', v-if='!loading && !syscheck.ok') Check Again
button.button.is-indigo(v-on:click='proceedToGeneral', v-if='loading || syscheck.ok', v-bind:disabled='loading') Continue
template(v-else-if='state === "general"')
.panel
h2.panel-title.is-featured
@ -68,12 +71,42 @@ html
p.control.is-fullwidth
label.label Site Title
input(type='text', placeholder='e.g. Wiki', v-model='conf.title')
p.desc The site title will appear in the top left corner on every page and within the window title bar.
section
p.control.is-fullwidth
label.label Host
input(type='text', placeholder='http://', v-model='conf.host')
p.desc The full URL to your wiki, without the trailing slash. E.g.: http://wiki.domain.com. Note that sub-folders are not supported.
section
p.control
label.label Port
input(type='text', placeholder='e.g. 80', v-model='conf.port')
p.desc The port on which Wiki.js will listen to. Usually port 80 if connecting directly, or a random port (e.g. 3000) if using a web server in front of it.
section
p.control
label.label Site UI Language
select(v-model='conf.lang')
option(value='en') English
p.desc The language in which navigation, help and other UI elements will be displayed.
.panel-footer
button.button.is-indigo(v-on:click='proceedToSyscheck', v-bind:disabled='loading') Continue
button.button.is-indigo.is-outlined(v-on:click='proceedToSyscheck', v-bind:disabled='loading') Back
button.button.is-indigo(v-on:click='proceedToDb', v-bind:disabled='loading') Continue
template(v-else-if='state === "db"')
.panel
h2.panel-title.is-featured
span Database
i(v-if='loading')
.panel-content.form-sections
section
p.control.is-fullwidth
label.label MongoDB Connection String
input(type='text', placeholder='e.g. mongodb://localhost:27017/wiki', v-model='conf.db')
p.desc The connection string to your MongoDB server. Leave the default localhost value if MongoDB is installed on the same server.
.panel-footer
button.button.is-indigo.is-outlined(v-on:click='proceedToGeneral', v-bind:disabled='loading') Back
button.button.is-indigo(v-on:click='proceedToSyscheck', v-bind:disabled='loading') Connect
footer.footer
span
| Powered by

Loading…
Cancel
Save