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

Pirátský GitLab - Home of the CopyLeft