Skip to content
Snippets Groups Projects
Verified Commit 84ecb967 authored by Andrej Ramašeuski's avatar Andrej Ramašeuski
Browse files

Nebudeme pouzivat petite-vue

parent 1edb2c9a
No related branches found
No related tags found
No related merge requests found
Pipeline #11129 passed
0.9.0
0.10.0
......@@ -10,7 +10,7 @@
</div>
% if ( $roles->{owner} || $roles->{moderator} ) {
<div v-effect="searchGroups()">
<div>
<label class="form-field__label" for="name"><%=l 'Adding groups' %></label>
<div class="flex flex-row">
<input type="text" class="w-full text-input" value="" v-model.lazy="filter['group']" id="search_group" placeholder="<%=l 'INPUT_MEET_ADD_GROUPS_PLACEHOLDER' %>"/>
......
......@@ -10,7 +10,7 @@
</div>
% if ( $roles->{owner} ) {
<div v-effect="searchUsers('moderator')">
<div>
<label class="form-field__label" for="name"><%=l 'Adding moderators' %></label>
<div class="flex flex-row">
<input type="text" class="w-full text-input" value="" v-model.lazy="filter['moderator']" id="search_moderator" placeholder="<%=l 'INPUT_MEET_ADD_USERS_PLACEHOLDER' %>"/>
......
......@@ -10,7 +10,7 @@
</div>
% if ( $roles->{owner} || $roles->{moderator} ) {
<div v-effect="searchUsers('participant')">
<div>
<label class="form-field__label" for="name"><%=l 'Adding people' %></label>
<div class="flex flex-row">
<input type="text" class="w-4/5 text-input text-sm" value="" v-model.lazy="filter['participant']" id="search_participant" placeholder="<%=l 'INPUT_MEET_ADD_USERS_PLACEHOLDER' %>"/>
......
......@@ -26,6 +26,8 @@
% if ( $c->stash->{meet} ) {
<script src='https://jitsi.pirati.cz/external_api.js'></script>
% }
<script src="https://cdn-unpkg.pirati.cz/vue@2.7.8/dist/vue.min.js"></script>
<script src="<%= config->{styleguide} %>js/main.bundle.js"></script>
</head>
<body>
......@@ -80,13 +82,11 @@
<div class="container container--default py-8">
<section>
<main v-scope>
<main>
<%= content %>
</main>
</section>
</div>
<script src="https://cdn-unpkg.pirati.cz/vue@2.7.8/dist/vue.min.js"></script>
<script src="<%= config->{styleguide} %>js/main.bundle.js"></script>
</body>
</html>
% layout 'default';
<div id="App">
<h1 class="head-alt-md mb-8" v-cloak>{{ meet.name }}</h1>
%= include 'includes/meet'
......@@ -11,7 +12,7 @@
<div @click="active_tab='form'" class="p-4 bg-grey-125" :class="tabClass('form')"><%=l $roles->{owner} ? 'Configuration':'About meet' %></div>
</div>
<div class="border p-4" v-effect="getMeet()" v-cloak>
<div class="border p-4" v-cloak>
<div v-if="active_tab == 'groups'">
%= include 'includes/meet_groups'
</div>
......@@ -32,9 +33,10 @@
</div>
</div>
<script type="module">
import { createApp } from 'https://cdn-unpkg.pirati.cz/petite-vue@0.2.2/dist/petite-vue.es.js'
</div><%# APP %>
<script type="module">
const GROUPS_URL = '/api/groups';
const USERS_URL = '/api/users';
const MEET_URL = '/api/meets/<%= stash->{id} %>';
......@@ -46,8 +48,10 @@
"Authorization": "Bearer <%= current_user->{api_token} %>",
};
createApp({
var app = new Vue({
el: '#App',
data: {
meet: {},
active_tab: 'groups',
......@@ -70,8 +74,10 @@
participant: [],
moderator: [],
},
},
tabClass(id) {
methods: {
tabClass: function(id) {
if (id == this.active_tab) {
return "bg-grey-400 text-white font-bold";
}
......@@ -81,7 +87,7 @@
}
},
getMeet() {
getMeet: function() {
fetch(MEET_URL, {
headers: API_HEADERS,
})
......@@ -91,7 +97,7 @@
})
},
searchUsers(kind) {
searchUsers: function(kind) {
if ( this.filter[kind].length < 2 ) {
this.search[kind] = [];
......@@ -106,7 +112,7 @@
},
searchGroups() {
searchGroups: function() {
if ( this.filter['group'].length < 2 ) {
this.search['group'] = [];
return true;
......@@ -118,9 +124,9 @@
this.search['group'] = res;
})
},
% if ( $roles->{owner} ) {
updateMeet() {
% if ( $roles->{owner} ) {
updateMeet: function() {
fetch(MEET_URL, {
method: "PUT",
headers: API_HEADERS,
......@@ -132,7 +138,7 @@
.then()
},
deleteMeet() {
deleteMeet: function() {
fetch(MEET_URL, {
method: "DELETE",
headers: API_HEADERS,
......@@ -148,7 +154,7 @@
% }
% if ( $roles->{owner} || $roles->{moderator} ) {
addUsers(kind) {
addUsers: function(kind) {
if ( this.selected[kind].length == 0) {
return true;
}
......@@ -163,13 +169,14 @@
.then((response) => {
if (response.ok) {
this.selected[kind] =[]
this.search[kind] =[]
this.filter[kind] = ''
this.getMeet()
}
})
},
removeUser(id, kind) {
removeUser: function(id, kind) {
fetch(MEET_URL + '/users/' + id, {
method: "DELETE",
headers: API_HEADERS,
......@@ -181,9 +188,7 @@
})
},
addGroups() {
addGroups: function() {
if ( this.selected['group'].length == 0) {
return true;
}
......@@ -196,13 +201,14 @@
.then((response) => {
if (response.ok) {
this.selected['group'] =[]
this.search['group'] =[]
this.filter['group'] = ''
this.getMeet()
}
})
},
removeGroup(id) {
removeGroup: function(id) {
fetch(MEET_URL + '/groups/' + id, {
method: "DELETE",
headers: API_HEADERS,
......@@ -213,9 +219,10 @@
}
})
},
% }
}
}).mount()
});
app.getMeet();
</script>
% layout 'default';
<div id="App">
<div v-effect="fetchData()" class="grid grid-cols-1 md:grid-cols-2 gap-4" v-cloak>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4" v-cloak>
<div v-for="meet in meets" class="card elevation-4">
<div class="card__body">
<div class="flex justify-between mb-2 border-b border-dotted border-grey-300">
......@@ -30,10 +31,11 @@
% if ( current_user->{permissions}{create} ) {
<form @submit.prevent="submitForm" v-cloak>
<div class="card elevation-4 space-y-4 mt-2">
<div class="card__body">
<div class="grid grid-cols-4 gap-4">
<div class="form-field col-span-3">
<input type="text" name="name" class="text-input form-field__control" value="" placeholder="<%=l 'INPUT_MEET_NAME_PLACEHOLDER' %>" v-model="formData.name" @focus="formError=''" />
<input type="text" name="name" class="text-input form-field__control" value="" placeholder="<%=l 'INPUT_MEET_NAME_PLACEHOLDER' %>" v-model="newMeet.name" @focus="formError=''" />
</div>
<div class="form-field col-span-1 content-center">
<button class="btn btn--blue-300 btn--hoveractive text-lg">
......@@ -42,13 +44,15 @@
</div>
</div>
</div>
<div v-if="formError" class="my-4"><span class="alert alert--red-600 alert--faded">{{ formError }}</span></div>
</div>
</form>
% }
<script type="module">
import { createApp } from 'https://cdn-unpkg.pirati.cz/petite-vue@0.2.2/dist/petite-vue.es.js'
</div>
<script type="module">
const BASE_URL = "/api/meets";
const API_HEADERS = {
"Content-Type": "application/json",
......@@ -56,28 +60,20 @@
"Authorization": "Bearer <%= current_user->{api_token} %>",
};
// ws.onmessage = (event) => {
// console.log(event.data);
// this.formError = event.data;
// };
createApp({
// ws = new WebSocket('ws://<%= config->{domain} %>/ws/').onmessage = (event) => {
// console.log(event.data);
// this.formError = event.data;
// };
var app = new Vue({
el: '#App',
data: {
meets: [],
newMeet: {
name: ""
},
formError: '',
formData: {
name: ""
},
fetchData() { //TODO: async
methods: {
fetchData: function() { //TODO: async
fetch(BASE_URL, {
headers: API_HEADERS,
})
......@@ -88,8 +84,9 @@
},
% if ( current_user->{permissions}{create} ) {
submitForm() {
if ( ! this.formData.name.length ) {
submitForm: function() {
if ( ! this.newMeet.name.length ) {
this.formError = "<%=l 'ERROR_MEET_NAME_REQURED' %>";
return true;
}
......@@ -99,11 +96,11 @@
fetch(BASE_URL, {
method: "POST",
headers: API_HEADERS,
body: JSON.stringify(this.formData),
body: JSON.stringify(this.newMeet),
})
.then( response => {
if ( response.status == 201 ) {
this.formData.name = ""
this.newMeet.name = ""
this.fetchData();
}
else {
......@@ -119,6 +116,10 @@
% }
}).mount()
}
});
app.fetchData();
</script>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment