remove old testpage, keep archive copy

parent aeaa003f
<template>
<div>
<div class="row">
<div class="column">
<h1>Historiana UI Elements Testpage</h1>
<button
@click="sendMail()"
class="button"
style="float:right"
>
SEND TEST MAIL
</button>
<hr>
<h4>Werkt dit: {{ werktDit }}</h4>
<hr>
<h4>Language select</h4>
<LanguageSelect />
<hr>
<div id="example-1">
<button
@click="show1 = !show1"
class="button"
>
Toggle render
</button>
<Transition name="slide-fade">
<p v-if="show1">
hello
</p>
</Transition>
</div>
<hr>
<div id="demo">
<button
@click="show = !show"
class="button"
>
Toggle
</button>
<Transition name="fade">
<p v-if="show">
hello
</p>
</Transition>
</div>
<hr>
<div id="app">
<button
id="show-modal"
@click="showModal = true"
class="button"
>
Show Modal
</button>
</div>
<Modal
v-if="showModal"
show="true"
@closeModal="showModal=false"
sizemodal=""
>
<h1>Hello</h1>
</Modal>
<hr>
<h3>
my-label
</h3>
<p>
<MyLabel
name="class"
v-model="selected_class"
/>
in parent; selected: {{ selected_class }}
</p>
<p>
<MyLabel
name="year"
v-model="selected_year"
type="Class"
/>
in parent; selected: {{ selected_year }}
</p>
<p>
<MyLabel
name="keywords"
v-model="selected_keywords"
type="Class"
/>
in parent; selected: {{ selected_keywords }}
</p>
<hr noshade>
<h1>Alert</h1>
Custom content: <Alert>An <b>alert</b> which is removeable</Alert>
Default: <Alert />
<br clear="all">
<hr noshade>
<h1>Multiselect</h1>
<Multiselect
label="name"
track-by="code"
tag-placeholder="Add this as new tag"
placeholder="Search or add a tag"
v-model="msValue"
:options="msOptions"
:taggable="true"
:multiple="true"
@tag="addTag"
/>
<hr>
<br clear="all">
<h1>Standaard select</h1>
<select>
<option>Foo</option>
<option selected>
Bar
</option>
<option>Baz</option>
</select>
<hr>
<br clear="all">
<h3 class="end">
-= END.TEST =-
</h3>
</div>
</div>
</div>
</template>
<script>
import MyLabel from '../tags/MyLabel'
import Alert from '../tags/Alert.vue'
import Modal from '../tags/Modal'
import LanguageSelect from '../tags/LanguageSelect'
// https://monterail.github.io/vue-multiselect/
import Multiselect from 'vue-multiselect'
import {API} from '../tic'
export default {
name: 'TestPage',
components: {
Alert,
MyLabel,
Multiselect,
Modal,
LanguageSelect
},
computed: {
werktDit () {
return 'kip'
}
},
mounted () {
console.log("*** TEST PAGE MOUNTED")
console.log("werkt dit: ", this.werktDit)
},
data () {
return {
show1: true,
show: true,
showModal: false,
selected_class: 'nog niks geselecteerd',
selected_year: 'nog niks geselecteerd',
selected_keywords: 'nog niks geselecteerd',
msValue: [
{
name: 'ATag',
code: 'atag'
}
],
msOptions: [
{
name: 'foo',
code: 'foo'
},
{
name: 'bar',
code: 'bar'
},
{
name: 'baz',
code: 'baz'
},
{
name: 'blafkip',
code: 'tibbe'
},
{
name: 'kip',
code: 'kip'
}
]
}
},
methods: {
sendMail () {
API.post('/sendtestmail')
},
addTag (newTag) {
const tag = {
name: newTag,
code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
}
console.log('adding a tag', tag)
this.msOptions.push(tag)
this.msValue.push(tag)
}
}
}
</script>
<style>
/* Enter and leave animations can use different */
/* durations and timing functions. */
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for <2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
</style>
\ No newline at end of file
<template>
<div>
<div class="row">
<div class="column">
<h1>Historiana UI Elements Testpage</h1>
<button
@click="sendMail()"
class="button"
style="float:right"
>
SEND TEST MAIL
</button>
<hr>
<h4>Werkt dit: {{ werktDit }}</h4>
<hr>
<h4>Language select</h4>
<LanguageSelect />
<hr>
<div id="example-1">
<button
@click="show1 = !show1"
class="button"
>
Toggle render
</button>
<Transition name="slide-fade">
<p v-if="show1">
hello
</p>
</Transition>
</div>
<hr>
<div id="demo">
<button
@click="show = !show"
class="button"
>
Toggle
</button>
<Transition name="fade">
<p v-if="show">
hello
</p>
</Transition>
</div>
<hr>
<div id="app">
<button
id="show-modal"
@click="showModal = true"
class="button"
>
Show Modal
</button>
</div>
<Modal
v-if="showModal"
show="true"
@closeModal="showModal=false"
sizemodal=""
>
<h1>Hello</h1>
</Modal>
<hr>
<h3>
my-label
</h3>
<p>
<MyLabel
name="class"
v-model="selected_class"
/>
in parent; selected: {{ selected_class }}
</p>
<p>
<MyLabel
name="year"
v-model="selected_year"
type="Class"
/>
in parent; selected: {{ selected_year }}
</p>
<p>
<MyLabel
name="keywords"
v-model="selected_keywords"
type="Class"
/>
in parent; selected: {{ selected_keywords }}
</p>
<hr noshade>
<h1>Alert</h1>
Custom content: <Alert>An <b>alert</b> which is removeable</Alert>
Default: <Alert />
<br clear="all">
<hr noshade>
<h1>Multiselect</h1>
<Multiselect
label="name"
track-by="code"
tag-placeholder="Add this as new tag"
placeholder="Search or add a tag"
v-model="msValue"
:options="msOptions"
:taggable="true"
:multiple="true"
@tag="addTag"
/>
<hr>
<br clear="all">
<h1>Standaard select</h1>
<select>
<option>Foo</option>
<option selected>
Bar
</option>
<option>Baz</option>
</select>
<hr>
<br clear="all">
<h3 class="end">
-= END.TEST =-
</h3>
</div>
</div>
<div class="row">
<h1>testpage</h1>
</div>
</template>
<script>
import MyLabel from '../tags/MyLabel'
import Alert from '../tags/Alert.vue'
import Modal from '../tags/Modal'
import LanguageSelect from '../tags/LanguageSelect'
// https://monterail.github.io/vue-multiselect/
import Multiselect from 'vue-multiselect'
import {API} from '../tic'
export default {
name: 'TestPage',
components: {
Alert,
MyLabel,
Multiselect,
Modal,
LanguageSelect
},
computed: {
werktDit () {
return 'kip'
}
},
mounted () {
console.log("*** TEST PAGE MOUNTED")
console.log("werkt dit: ", this.werktDit)
},
data () {
return {
show1: true,
show: true,
showModal: false,
selected_class: 'nog niks geselecteerd',
selected_year: 'nog niks geselecteerd',
selected_keywords: 'nog niks geselecteerd',
msValue: [
{
name: 'ATag',
code: 'atag'
}
],
msOptions: [
{
name: 'foo',
code: 'foo'
},
{
name: 'bar',
code: 'bar'
},
{
name: 'baz',
code: 'baz'
},
{
name: 'blafkip',
code: 'tibbe'
},
{
name: 'kip',
code: 'kip'
}
]
}
},
methods: {
sendMail () {
API.post('/sendtestmail')
},
addTag (newTag) {
const tag = {
name: newTag,
code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
}
console.log('adding a tag', tag)
this.msOptions.push(tag)
this.msValue.push(tag)
}
}
}
export default {};
</script>
<style>
/* Enter and leave animations can use different */
/* durations and timing functions. */
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for <2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
</style>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment