panel/baseui
1
0
Fork 0
Code Issues 8 Pull Requests Releases Wiki Activity

Merge branch 'master' into 'matdev'

Browse Source 
Master

See merge request !2
This commit is contained in:
Sebastian Frank
2017-09-07 23:32:16 +02:00
parent 9a8e22230d 1749d563b2
commit da7c230927
18 changed files with 389 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
.gitlab-ci.yml
View File

@@ -1,7 +1,7 @@
stages:
- build
# - test
- review
- deploy
build_ui:
image: node
@@ -31,7 +31,7 @@ start_review:
- docker
dependencies:
- build_ui
stage: review
stage: deploy
script:
- cat index.html
- mkdir _for_upload
@@ -46,7 +46,7 @@ stop_review:
image: mwienk/docker-lftp
tags:
- docker
stage: review
stage: deploy
variables:
GIT_STRATEGY: none
script:
@@ -58,16 +58,27 @@ stop_review:
review_fullsync:
fullsync_review:
image: mwienk/docker-lftp
tags:
- docker
dependencies:
- build_ui
stage: review
stage: deploy
script:
- mkdir _for_upload
- mv assets build conf index.html _for_upload
- lftp -c "set sftp:auto-confirm yes; open -u intern_basispanel_ui,$FTP_PASSWORD sftp://ftp.basehosts.de;mkdir -f /$CI_COMMIT_REF_NAME; mirror -v --transfer-all -e -R -L _for_upload/ /$CI_COMMIT_REF_NAME"
when: manual
docker_test:
tags:
- shell
dependencies:
- build_ui
stage: deploy
script:
- mkdir _for_docker
- mv assets build conf index.html _for_docker
- docker-compose up -d --build

3
Dockerfile Normal file
View File

@@ -0,0 +1,3 @@
FROM larsks/thttpd
ADD _for_docker/ /

12
conf/init.json
View File

@@ -22,9 +22,9 @@
"icon": "icon-contacts"
},
{
"name": "FormDemo",
"to": "/formdemo",
"icon": "icon-contacts"
"name": "Settings",
"to": "/settings",
"icon": "icon-cog"
}
],
"profile": [
@@ -63,9 +63,9 @@
"content": "<domainlist></domainlist>"
},
{
"name": "FormDemo",
"to": "/formdemo",
"content": "<form-demo></form-demo>"
"name": "Settings",
"to": "/settings",
"content": "<settings></settings>"
},
{
"name": "Logout",

23
docker-compose.yml Normal file
View File

@@ -0,0 +1,23 @@
version: "2.1"
services:
frontend:
build: .
image: ${CI_PROJECT_NAME}:${CI_COMMIT_REF_NAME}
container_name: ${CI_PROJECT_NAME}_${CI_COMMIT_REF_NAME}
restart: always
networks:
- web
- default
expose:
- "80"
labels:
- "traefik.backend=${CI_PROJECT_NAME}.${CI_COMMIT_REF_NAME}"
- "traefik.docker.network=web"
- "traefik.frontend.rule=Host:${CI_COMMIT_REF_NAME}.${CI_PROJECT_NAME}.dev.basehosts.de"
- "traefik.enable=true"
- "traefik.port=80"
networks:
web:
external: true

36
src/app.less
View File

@@ -89,7 +89,7 @@ a:hover {color:#901624;}
--------------------------------------------------------------*/
.input_holder {margin-bottom:20px; display:block;}
.input_header {margin-bottom:10px;}
.input_description {font-size:13px; color: @text_color;}
.input_description {font-size:13px; color: lighten(@text_color, 20%);}
input, textarea, select {
font-family: @font_family;
width: 100%;
@@ -98,20 +98,41 @@ input, textarea, select {
padding: 0px 10px;
color: @text_color;
background: white;
border: solid 1px #CCC;
outline: none;
font-size: 14px;
transition: all 0.3s;
border: solid 1px #CCC;
outline: none;
font-size: 14px;
transition: background 0.3s, color 0.3s, border 0.3s;
}
textarea {padding:10px; height:auto;}
input:focus, textarea:focus, select:focus {background:#FFF; border-color: @cms_brand_primary;}
label {font-weight:600; color: @text_color;}
.checkbox_holder {
position: relative;
height: 100%;
min-height: 18px;
&:hover .check_checkbox {
border: 1px solid @cms_brand_primary;
}
label {
display: block;
position: absolute;
top: 50%;
margin-top: -9px;
width: 18px;
height: 18px;
cursor: pointer;
z-index: 10;
}
}
input[type="checkbox"] {
position: absolute;
top: -10px;
left: -10px;
line-height:50px;
line-height: 50px;
visibility: hidden;
display: inline-block;
margin: 0;
@@ -119,7 +140,6 @@ input[type="checkbox"] {
width: auto;
height: auto;
}
.checkbox_holder {position:absolute; top:0px; bottom:0px;}
.check_checkbox {
background: #FFF;
display: block;
@@ -167,8 +187,6 @@ button{
padding: 0px 30px;
border-radius: 20px;
}
.cell_checkbox label {width:18px; height:18px; display:block; cursor:pointer; z-index:10; position: absolute; top:50%; margin-top:-9px;}
.checkbox_holder:hover .check_checkbox {border: 1px solid @cms_brand_primary;}
/*--------------------------------------------------------------
# CMS CONTENT FORM

18
src/components/my-form.vue
View File

@@ -1,18 +1,18 @@
<template>
<form @submit.prevent="submit()">
<div v-for="(item, key) in elements" :key="key">
<my-input
:description="item.description"
:label="item.label"
<component
:is="item.element"
:name="key"
:placeholder="item.placeholder"
:type="item.type"
:label="item.label"
:description="item.description"
:props="item.props"
v-model="formData[key]"
@validate="validateData(key)"
:invalid="formErrors[key]"
:validatorMessage="formErrors[key] ? formErrors[key].message : ''"
>
</my-input>
</component>
</div>
<div>
<button class="button" v-for="(b, i) in buttons" :key="i" @click.prevent="buttonClick(b.type)">{{ b.label }}</button>
@@ -21,13 +21,9 @@
</template>
<script>
import MyInput from './my-input.vue';
export default {
name: "MyForm",
components: {
MyInput
},
components: {},
props: {
elements: {
type: Object,

43
src/components/my-input.vue
View File

@@ -5,44 +5,54 @@
<div class="input_description" v-if="description">{{ description }}</div>
</div>
<input type="text" v-if="type == 'text'"
<!-- -->
<input type="text" v-if="props && props.type == 'text'"
v-model="currentValue"
:name="name"
:placeholder="placeholder"
@blur="validate()"
@change="() => $emit('change', currentValue)"
:class="{invalid}"
:id="name"
:name="name"
:placeholder="props.placeholder"
@blur="validate"
@change="handleChange"
>
<input type="password" v-else-if="type == 'password'"
<input type="password" v-else-if="props && props.type == 'password'"
v-model="currentValue"
:name="name"
:placeholder="placeholder"
@blur="validate()"
@change="() => $emit('change', currentValue)"
:class="{invalid}"
:id="name"
:name="name"
:placeholder="props.placeholder"
@blur="validate"
@change="handleChange"
>
<div class="checkbox_holder" v-else-if="props && props.type == 'checkbox'">
<label :for="name"></label>
<input type="checkbox"
v-model="currentValue"
:id="name"
:name="name"
@change="handleChange"
>
<div class="check_checkbox"></div>
</div>
<div v-if="invalid && validatorMessage">{{ validatorMessage }}</div>
</div>
</template>
<style scoped>
.invalid {
background-color: #fcc;
}
</style>
<script>
export default {
name: "MyInput",
name: "BasicInput",
props: [
'description',
'label',
'name',
'placeholder',
'type',
'props',
'value',
'invalid',
'validatorMessage'
@@ -55,6 +65,9 @@ export default {
methods: {
validate() {
this.$emit('validate', this.currentValue);
},
handleChange() {
this.$emit('change', this.currentValue);
}
},
watch: {

6
src/components/scroll-table.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="Scroll-Table">
<my-input placeholder="Suche" type="text" @change="searchChanged" v-model="currentSearch"></my-input>
<my-input :props="{type: 'text', placeholder: 'Suche'}" @change="searchChanged" v-model="currentSearch"></my-input>
<my-table :actions="actions" :columns="columns" :rows="rows"
:currentOrderBy="currentOrderBy"
:currentOrderDesc="currentOrderDesc"
@@ -14,8 +14,8 @@
</template>
<script>
import MyTable from './my-table.vue';
import MyInput from './my-input.vue';
import MyTable from 'components/my-table';
import MyInput from 'components/my-input';
import { ObserveVisibility } from 'vue-observe-visibility/dist/vue-observe-visibility';

61
src/components/textarea-input.vue Normal file
View File

@@ -0,0 +1,61 @@
<template>
<div class="input_holder">
<div class="input_header" v-if="label || description">
<label :for="name" v-if="label">{{ label }}</label>
<div class="input_description" v-if="description">{{ description }}</div>
</div>
<textarea v-model="currentValue"
:id="name"
:name="name"
:class="{invalid}"
:placeholder="props ? props.placeholder : ''"
@blur="validate"
@change="handleChange"
>
</textarea>
<div v-if="invalid && validatorMessage">{{ validatorMessage }}</div>
</div>
</template>
<style scoped>
.invalid {
background-color: #fcc;
}
</style>
<script>
export default {
name: "TextareaInput",
props: [
'description',
'label',
'name',
'props',
'value',
'invalid',
'validatorMessage'
],
data() {
return {
currentValue: this.value
}
},
methods: {
validate() {
this.$emit('validate', this.currentValue);
},
handleChange() {
this.$emit('change', this.currentValue);
}
},
watch: {
currentValue(val) {
this.$emit('input', val);
}
}
}
</script>

1
src/components/topbar.vue
View File

@@ -162,6 +162,7 @@ export default {
padding: 4px 10px;
font-size: 0;
color: white;
user-select: none;
&:hover {
cursor: pointer;

2
src/variables.less
View File

@@ -5,7 +5,7 @@
@font_family: "Open Sans", sans-serif;
@text_color: #333;
@font_size: 14px;
@font_size: 15px;
@line_height_base: 1.4;
@line_height_heading: 1.2;

2
src/views/dashboard.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="Dashboard">
<h2>Dashboard</h2>
<h1>Dashboard</h1>
</div>
</template>

98
src/views/forms/form-demo.vue
View File

@@ -1,98 +0,0 @@
<template>
<div class="cms_content_form">
<form action="">
<div class="row">
<div class="tab8">
<my-input type="text" value="" v-model="titel" placeholder="Titel hier eintragen" label="Titel" description="Text .."></my-input>
<div class="input_holder">
<header class="input_header">
<label for="">Permalink</label>
<div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div>
</header>
<input type="text" value="" name="" placeholder="Permalink">
</div>
<div class="input_holder">
<header class="input_header">
<label for="">Inhalt</label>
<div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div>
</header>
<textarea name="" id="" rows="10" placeholder="Dies ist ein normales Textfeld"></textarea>
</div>
<!-- Fieldgroup -->
<div class="cms_fieldgroup fieldgroup_open">
<header class="cms_fieldgroup_header">Feldergruppe <div class="cms_fieldgroup_trigger"><i class="ion-chevron-down"></i></div></header>
<div class="cms_fieldgroup_content">
<div class="input_holder">
<header class="input_header">
<label for="">Noch ein Feld</label>
<!-- <div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div> -->
</header>
<input type="text" value="" name="" placeholder="Noch ein Feld">
</div>
<div class="input_holder">
<header class="input_header">
<label for="">Noch ein Feld</label>
<!-- <div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div> -->
</header>
<textarea name="" id="" rows="10" placeholder="Dies ist ein normales Textfeld"></textarea>
</div>
</div>
</div>
<!-- Fieldgroup -->
<div class="cms_fieldgroup">
<header class="cms_fieldgroup_header">Feldergruppe <div class="cms_fieldgroup_trigger"><i class="ion-chevron-down"></i></div></header>
<div class="cms_fieldgroup_content">
<div class="input_holder">
<header class="input_header">
<label for="">Noch ein Feld</label>
<!-- <div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div> -->
</header>
<input type="text" value="" name="" placeholder="Noch ein Feld">
</div>
<div class="input_holder">
<header class="input_header">
<label for="">Noch ein Feld</label>
<!-- <div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div> -->
</header>
<textarea name="" id="" rows="10" placeholder="Dies ist ein normales Textfeld"></textarea>
</div>
</div>
</div>
</div>
<div class="tab4">
<div class="cms_content_form_sidebar">
Sidebar
</div>
</div>
</div>
</form>
</div>
</template>
<script>
import MyInput from "components/my-input.vue";
export default {
name: "DemoForm",
components: {
MyInput
},
data() {
return {
titel: "plapla"
}
}
}
</script>

28
src/views/forms/login.vue
View File

@@ -7,14 +7,10 @@
<div class="content">
<p class="intro_text">Bitte melde dich mit deinen Benutzerdaten an.</p>
<my-form :elements="elements" :buttons="buttons" :submitHandler="login"></my-form>
<transition name="component-fade">
<div class="loginerror" v-show="loginError">{{ loginError }}</div>
</transition>
<div style="clear:both;"></div>
</div>
</div>
</div>
@@ -22,11 +18,13 @@
<script>
import MyForm from "components/my-form";
import MyInput from "components/my-input";
export default {
name: "LoginForm",
components: {
MyForm
MyForm,
MyInput
},
data() {
return {
@@ -34,18 +32,24 @@ export default {
password: "",
elements: {
username: {
placeholder: "Benutzername",
element: MyInput,
icon: "icon-user",
type: "text",
required: true,
requiredMessage: "Der Benutzername wird benötigt!"
requiredMessage: "Der Benutzername wird benötigt!",
props: {
type: "text",
placeholder: "Benutzername"
}
},
password: {
placeholder: "Passwort",
element: MyInput,
icon: "icon-key",
type: "password",
required: true,
requiredMessage: "Das Passwort wird benötigt!"
requiredMessage: "Das Passwort wird benötigt!",
props: {
type: "password",
placeholder: "Passwort"
}
}
},
buttons: [{
@@ -119,12 +123,12 @@ export default {
}
.logo{
.clearfix();
line-height:0; margin-bottom:15px; text-align:center;
img {width:100%; max-width:72px;}
}
.content{
.clearfix();
p {text-align:center; color: white; font-size:15px; line-height:1.2;}
}

188
src/views/forms/settings.vue Normal file
View File

@@ -0,0 +1,188 @@
<template>
<div class="cms_content_form">
<div class="row">
<div class="tab8">
<my-form :elements="elements" :buttons="buttons" :submitHandler="submit"></my-form>
</div>
<div class="tab4">
<div class="cms_content_form_sidebar">
Sidebar
</div>
</div>
</div>
</div>
<!-- <form action="">
<div class="row">
<div class="tab8">
<div class="input_holder">
<header class="input_header">
<label for="">Titel</label>
</header>
<input type="text" value="" name="" placeholder="Titel hier eintragen">
</div>
<div class="input_holder">
<header class="input_header">
<label for="">Permalink</label>
<div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div>
</header>
<input type="text" value="" name="" placeholder="Permalink">
</div>
<div class="input_holder">
<header class="input_header">
<label for="">Inhalt</label>
<div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div>
</header>
<textarea name="" id="" rows="10" placeholder="Dies ist ein normales Textfeld"></textarea>
</div>
<div class="cms_fieldgroup fieldgroup_open">
<header class="cms_fieldgroup_header">Feldergruppe <div class="cms_fieldgroup_trigger"><i class="ion-chevron-down"></i></div></header>
<div class="cms_fieldgroup_content">
<div class="input_holder">
<header class="input_header">
<label for="">Noch ein Feld</label>
</header>
<input type="text" value="" name="" placeholder="Noch ein Feld">
</div>
<div class="input_holder">
<header class="input_header">
<label for="">Noch ein Feld</label>
</header>
<textarea name="" id="" rows="10" placeholder="Dies ist ein normales Textfeld"></textarea>
</div>
</div>
</div>
<div class="cms_fieldgroup">
<header class="cms_fieldgroup_header">Feldergruppe <div class="cms_fieldgroup_trigger"><i class="ion-chevron-down"></i></div></header>
<div class="cms_fieldgroup_content">
<div class="input_holder">
<header class="input_header">
<label for="">Noch ein Feld</label>
</header>
<input type="text" value="" name="" placeholder="Noch ein Feld">
</div>
<div class="input_holder">
<header class="input_header">
<label for="">Noch ein Feld</label>
</header>
<textarea name="" id="" rows="10" placeholder="Dies ist ein normales Textfeld"></textarea>
</div>
</div>
</div>
</div>
</div>
</form>
</div> -->
<!-- <div id="login_form">
<div class="holder">
<div class="logo">
<img src="assets/images/cms_logo_white.png" alt="">
</div>
<div class="content">
<p class="intro_text">Bitte melde dich mit deinen Benutzerdaten an.</p>
<my-form :elements="elements" :buttons="buttons" :submitHandler="login"></my-form>
<div style="clear:both;"></div>
</div>
</div>
</div> -->
</template>
<script>
import MyForm from "components/my-form";
import MyInput from "components/my-input";
import TextareaInput from "components/textarea-input";
export default {
name: "FormDemo",
components: {
MyForm,
MyInput,
TextareaInput
},
data() {
return {
username: "",
password: "",
elements: {
title: {
label: "Titel",
required: true,
element: MyInput,
props: {
type: "text",
placeholder: "Titel hier eintragen"
}
},
permalink: {
label: "Permalink",
description: "Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.",
required: true,
element: MyInput,
props: {
type: "text",
placeholder: "Permalink"
}
},
content: {
label: "Inhalt",
description: "Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.",
required: true,
element: TextareaInput,
props: {
placeholder: "Inhalt"
}
},
public: {
label: "Is Public",
required: true,
element: MyInput,
props: {
type: "checkbox"
}
}
},
buttons: [{
label: "login",
type: "submit"
}]
}
},
methods: {
submit(formData) {
console.log("submit", JSON.stringify(formData));
// this.$store.dispatch("login", formData)
// .then(user => {
// console.log("---- user login --------");
// console.log(user);
// this.$router.go(-1);
// })
// .catch(error => {
// console.log("---- login error -------");
// console.log(error);
// });
}
}
}
</script>
<style lang="less">
@import "~mixins";
</style>

4
src/views/lists/domainlist.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="Domainlist">
<h2>Domainlist</h2>
<h1>Domainlist</h1>
<scroll-table :actions="actions" :columns="columns" :new-rows="newRows" :has-more="hasMore" :loading="loading" :handler="more" orderBy="Name" :orderDesc="false" :limit="50"></scroll-table>
</div>
</template>
<script>
import ScrollTable from '../../components/scroll-table.vue';
import ScrollTable from 'components/scroll-table.vue';
export default {
name: "Domainlist",

4
src/views/lists/userlist.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="Userlist">
<h2>Userlist</h2>
<h1>Userlist</h1>
<scroll-table :actions="actions" :columns="columns" :new-rows="newRows" :has-more="hasMore" :loading="loading" :handler="more" orderBy="username" :orderDesc="false" :limit="50"></scroll-table>
</div>
</template>
<script>
import ScrollTable from '../../components/scroll-table.vue';
import ScrollTable from 'components/scroll-table.vue';
export default {
name: "Userlist",

4
src/views/views.js
View File

@@ -3,7 +3,7 @@ import LoginForm from './forms/login.vue';
import Logout from './forms/logout.vue';
import Userlist from './lists/userlist.vue';
import Domainlist from './lists/domainlist.vue';
import FormDemo from './forms/form-demo.vue';
import Settings from 'views/forms/settings.vue';
export default {
Dashboard,
@@ -11,5 +11,5 @@ export default {
Logout,
Userlist,
Domainlist,
FormDemo
Settings
}