{{extend "layout_demo.html"}}

{{block title}}uliweb-apijson demo: requests{{end title}}

{{block content_wrapper}}

<card>

<div style="min-height: 600px;">

<tabs v-model:value="tab_current" type="card" :animated="false">

<tab-pane label="apijson get" name="tab_get"></tab-pane>

<tab-pane label="apijson head" name="tab_head"></tab-pane>

<tab-pane label="apijson post" name="tab_post"></tab-pane>

<tab-pane label="apijson put" name="tab_put"></tab-pane>

<tab-pane label="apijson delete" name="tab_delete"></tab-pane>

</tabs>

<layout>

<sider hide-trigger :style="{height: '80vh', width:'360px', 'min-width': '360px', 'max-width': '380px', overflow: 'auto', background: '#fff'}">

<i-menu :active-name="0" @on-select="on_select_get" width="360px" ref='menu_get'>

<menu-group title="apijson get examples" v-if="tab_current==='tab_get'">

<menu-item v-for="(item,index) in request_get" :name="index" :key="index">

<i class="fa fa-fw fa-file-code-o"></i> {item.label}

</menu-item>

</menu-group>

</i-menu>

<i-menu :active-name="0" @on-select="on_select_head" width="360px">

<menu-group title="apijson head examples" v-if="tab_current==='tab_head'">

<menu-item v-for="(item,index) in request_head" :name="index" :key="index">

<i class="fa fa-fw fa-file-code-o"></i> {item.label}

</menu-item>

</menu-group>

</i-menu>

<i-menu :active-name="0" @on-select="on_select_post" width="360px">

<menu-group title="apijson post examples" v-if="tab_current==='tab_post'">

<menu-item v-for="(item,index) in request_post" :name="index" :key="index">

<i class="fa fa-fw fa-file-code-o"></i> {item.label}

</menu-item>

</menu-group>

</i-menu>

<i-menu :active-name="0" @on-select="on_select_put" width="360px">

<menu-group title="apijson put examples" v-if="tab_current==='tab_put'">

<menu-item v-for="(item,index) in request_put" :name="index" :key="index">

<i class="fa fa-fw fa-file-code-o"></i> {item.label}

</menu-item>

</menu-group>

</i-menu>

<i-menu :active-name="0" @on-select="on_select_delete" width="360px">

<menu-group title="apijson delete examples" v-if="tab_current==='tab_delete'">

<menu-item v-for="(item,index) in request_delete" :name="index" :key="index">

<i class="fa fa-fw fa-file-code-o"></i> {item.label}

</menu-item>

</menu-group>

</i-menu>

</sider>

<i-content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">

<Row>

<i-col span="3"><div align="center">login user</div></i-col>

<i-col span="18"><i-input value="{{=user_info}}" readonly/></i-col>

{{if request.user:}}

<i-col span="1"><div align="center"><i-button type="warning" size="large" @click="logout">Logout</i-button></div></i-col>

{{else:}}

<i-col span="1"><div align="center"><i-button type="primary" size="large" @click="login">Login</i-button></div></i-col>

{{pass}}

</Row>

<Row v-if="tab_current==='tab_get'">

<i-col span="3"><div align="center">HTTP POST URL</div></i-col>

<i-col span="18"><i-input value="/apijson/get" readonly/></i-col>

</Row>

<Row v-if="tab_current==='tab_get'">

<i-col span="3"><div align="center">example name</div></i-col>

<i-col span="18"><strong><i-input :value="request_get[cmenu_get].label" readonly/></strong></i-col>

</Row>

<Row v-if="tab_current==='tab_head'">

<i-col span="3"><div align="center">HTTP HEAD URL</div></i-col>

<i-col span="18"><i-input value="/apijson/head" readonly/></i-col>

</Row>

<Row v-if="tab_current==='tab_head'">

<i-col span="3"><div align="center">example name</div></i-col>

<i-col span="18"><strong><i-input :value="request_head[cmenu_head].label" readonly/></strong></i-col>

</Row>

<Row v-if="tab_current==='tab_post'">

<i-col span="3"><div align="center">POST URL</div></i-col>

<i-col span="18"><i-input value="/apijson/post" readonly/></i-col>

</Row>

<Row v-if="tab_current==='tab_post'">

<i-col span="3"><div align="center">example name</div></i-col>

<i-col span="18"><strong><i-input :value="request_post[cmenu_post].label" readonly/></strong></i-col>

</Row>

<Row v-if="tab_current==='tab_put'">

<i-col span="3"><div align="center">PUT URL</div></i-col>

<i-col span="18"><i-input value="/apijson/put" readonly/></i-col>

</Row>

<Row v-if="tab_current==='tab_put'">

<i-col span="3"><div align="center">example name</div></i-col>

<i-col span="18"><strong><i-input :value="request_put[cmenu_put].label" readonly/></strong></i-col>

</Row>

<Row v-if="tab_current==='tab_delete'">

<i-col span="3"><div align="center">DELETE URL</div></i-col>

<i-col span="18"><i-input value="/apijson/delete" readonly/></i-col>

</Row>

<Row v-if="tab_current==='tab_delete'">

<i-col span="3"><div align="center">example name</div></i-col>

<i-col span="18"><strong><i-input :value="request_delete[cmenu_delete].label" readonly/></strong></i-col>

</Row>

<Row>

<i-col span="3"><div align="center">request data</div></i-col>

<i-col span="18"><i-input v-model="request_data" type="textarea" :autosize="{minRows: 3,maxRows: 15}" placeholder="request data" /></i-col>

<i-col span="1"><div align="center"><i-button type="primary" size="large" @click="post_request_data" v-bind:disabled="!can_post">Post</i-button></div></i-col>

</Row>

<Row>

<i-col span="3"><div align="center">response data</div></i-col>

<i-col span="18"><i-input v-model="response_data" type="textarea" readonly :autosize="{minRows: 5,maxRows: 30}" /></i-col>

</Row>

</i-content>

</layout>

</div>

</card>

{{end content_wrapper}}

{{block mainapp_vue}}

<script>

var vm = new Vue({

el: '#mainapp',

delimiters: ['{', '}'],

data: {

request_get : {{<<request_get_json}},

request_head : {{<<request_head_json}},

request_post : {{<<request_post_json}},

request_put : {{<<request_put_json}},

request_delete : {{<<request_delete_json}},

request_data : "",

cmenu_get : 0,

cmenu_head : 0,

cmenu_post : 0,

cmenu_put : 0,

cmenu_delete : 0,

can_post : true,

response_data : "",

tab_current : "tab_get",

tab2url : {

"tab_get":"{{=url_for('uliweb_apijson.apijson.views.ApiJson.get')}}",

"tab_head":"{{=url_for('uliweb_apijson.apijson.views.ApiJson.head')}}",

"tab_post":"{{=url_for('uliweb_apijson.apijson.views.ApiJson.post')}}",

"tab_put":"{{=url_for('uliweb_apijson.apijson.views.ApiJson.put')}}",

"tab_delete":"{{=url_for('uliweb_apijson.apijson.views.ApiJson.delete')}}"

}

},

methods: {

init_default: function(){

vm.request_data = vm.request_get[0].value

},

on_select_get: function(name){

vm.cmenu_get = parseInt(name)

vm.request_data = vm.request_get[vm.cmenu_get].value

vm.response_data = ""

vm.can_post = true

},

on_select_head: function(name){

vm.cmenu_head = parseInt(name)

vm.request_data = vm.request_head[vm.cmenu_head].value

vm.response_data = ""

vm.can_post = true

},

on_select_post: function(name){

vm.cmenu_post = parseInt(name)

vm.request_data = vm.request_post[vm.cmenu_post].value

vm.response_data = ""

vm.can_post = true

},

on_select_put: function(name){

vm.cmenu_put = parseInt(name)

vm.request_data = vm.request_put[vm.cmenu_put].value

vm.response_data = ""

vm.can_post = true

},

on_select_delete: function(name){

vm.cmenu_delete = parseInt(name)

vm.request_data = vm.request_delete[vm.cmenu_delete].value

vm.response_data = ""

vm.can_post = true

},

post_request_data: function(){

$.ajax({

type: "POST",

contentType: 'application/json',

url: vm.tab2url[vm.tab_current],

data: vm.request_data,

success: function (data) {

vm.response_data = JSON.stringify(data,null,4)

vm.can_post = false

}

})

},

login: function(){window.location.href="{{=url_for('uliweb_comapps.auth.login.views.login')}}"},

logout: function(){window.location.href="{{=url_for('uliweb_comapps.auth.login.views.logout')}}"}

},

watch: {

request_data : function(n,o){

vm.can_post = true

},

tab_current : function(n,o){

if (n=="tab_get") {

vm.request_data = vm.request_get[0].value

}

else if (n=="tab_head") {

vm.request_data = vm.request_head[0].value

}

else if (n=="tab_post") {

vm.request_data = vm.request_post[0].value

}

else if (n=="tab_put") {

vm.request_data = vm.request_put[0].value

}

else if (n=="tab_delete") {

vm.request_data = vm.request_delete[0].value

}

vm.response_data = ""

}

}

})

vm.init_default()

</script>

{{end mainapp_vue}}