Commit 17d1811f authored by ZeMKI's avatar ZeMKI
Browse files

Edit study works + new interview optimization

* now the edit study and create study works as intended.
* improve to new interview
* stll need to save the token values in the database but the array is there
parent b45c3bc4
......@@ -52,13 +52,15 @@ class Token extends Model
$token = new self;
$token->name = $tokenToSave['name'];
$token->image_path = isset($tokenToSave['file']) ? $tokenToSave['file'] : $tokenToSave['image_path'];
if ($isInterview) $token->author = 0;
else $token->author = Auth::user()->id;
$token->save();
$token->studies()->sync($study->id);
} else {
self::SaveNewToken($tokenToSave, $study, $isInterview, $token);
}
if ($isInterview) $token->author = 0;
else $token->author = Auth::user()->id;
if(!empty($tokenToSave['properties']))$token->properties = json_encode($tokenToSave['properties']);
else $token->properties = '{"description":""}';
$token->save();
}
......@@ -88,12 +90,6 @@ class Token extends Model
$studyPath = storage_path('app/study' . $study->id . '/tokens/');
File::isDirectory($studyPath) or File::makeDirectory($studyPath, 0775, true, true);
self::saveImage($image, $studyPath, $name, $base64FirstPart, $study, $tokenToSave, $token);
if ($isInterview) $token->author = 0;
else $token->author = Auth::user()->id;
if(!empty($tokenToSave['properties']))$token->properties = $tokenToSave['properties'];
else $token->properties = '{"description":""}';
}
/**
......
......@@ -134,7 +134,8 @@ window.app = new Vue({
presortQuestions: (state) => state.newinterview.presortQuestions,
postsortQuestions: (state) => state.newinterview.postsortQuestions,
sortingType: (state) => state.newinterview.sortingType,
toggleCards: (state) => state.newinterview.toggleCards
toggleCards: (state) => state.newinterview.toggleCards,
selectedToken: (state) => state.newinterview.selectedToken,
}),
}, data: {
newstudy: {}, users: {}, newuser: {
......
......@@ -355,7 +355,10 @@ export default {
qsort.pop();
let qsortArray = [];
_.forEach(qsort, function (value, key) {
qsortArray.push(value.split('|'));
let av = value.replaceAll('--empty--', '').split('|').reverse();
qsortArray.push(av);
});
// calculate array with more values
......@@ -376,6 +379,7 @@ export default {
}
qsortArray[key] = value;
})
this.qsortMaxNumber = maxNumberOfItems;
return qsortArray;
......@@ -596,9 +600,10 @@ export default {
let localISOTime = (new Date(Date.now() - timeZoneOffset)).toISOString().slice(0, 19).replace('T', ' ');
return localISOTime;
}, removeElementsFromScreenshot: function () {
let setOpacityTo0 = document.getElementsByClassName('remove-from-screenshot');
let navbarHeight = document.getElementById('main-nav-interview').offsetHeight;
document.querySelector('.round-sorting' + this.circles).style.marginTop = navbarHeight + 'px';
if(this.sorting[0].id !== 3)document.querySelector('.round-sorting' + this.circles).style.marginTop = navbarHeight + 'px';
_.forEach(setOpacityTo0, function (o) {
o.style.opacity = '0.0';
......@@ -606,7 +611,7 @@ export default {
}, addElementsHiddenBefore: function () {
let setOpacityTo1 = document.getElementsByClassName('remove-from-screenshot');
let navbarHeight = document.getElementById('main-nav-interview').offsetHeight;
document.querySelector('.round-sorting' + this.circles).style.marginTop = '0px';
if(this.sorting[0].id !== 3)document.querySelector('.round-sorting' + this.circles).style.marginTop = '0px';
_.forEach(setOpacityTo1, function (o) {
o.style.opacity = '1.0';
});
......
<template>
<div class="flex">
<div v-show="toggleCards"
class="flex-wrap w-1/3 m-0 bg-green-400 py-2 font-bold relative sm:text-xs md:text-xs lg:text-base z-30 h-64" style="left:51%;">
class="flex-wrap w-1/3 m-0 bg-green-400 py-2 font-bold relative sm:text-xs md:text-xs lg:text-base z-30 h-64 remove-from-screenshot" style="left:51%;">
<div v-for="(t,index) in tokens" :id="t.id"
class="z-50 ml-1 inline-flex"
@mouseover="hovertrue(index)"
@mouseleave="hoverfalse(index)"
style="width: 50px;height: 50px;z-index:100;"
@click="updateselecttoken(t)"
>
<div class="block">
<img :src="t.image_path"
......@@ -37,15 +38,18 @@
<div :class="'qsortlg:w-24 qsortmd:w-16 qsortsm:w-12 grid grid-rows-'+(maxnumber+1)+' grid-flow-row gap-0 '">
<div v-for="n in array.length-2" :class="(array[n] === '---blank---')?
<div v-for="n in array.length-2" :class="(array[n-1] === '---blank---')?
'bg-pink-400 opacity-0 qsortlg:w-24 qsortmd:w-16 qsortsm:w-12 qsortlg:h-24 qsortmd:h-16 qsortsm:h-12' :
'bg-gray-900 text-white border border-solid border-white qsortlg:w-24 qsortmd:w-16 qsortsm:w-12 qsortlg:h-24 qsortmd:h-16 qsortsm:h-12 select-none inline-block align-middle justify-center' ">
'bg-gray-900 text-white border border-solid border-white qsortlg:w-24 qsortmd:w-16 qsortsm:w-12 qsortlg:h-24 qsortmd:h-16 qsortsm:h-12 select-none inline-block align-middle justify-center' "
v-model="arrayOfQsort[key][n]"
@click="assignTokenToCell(key,n)"
>
<img v-if="arrayOfQsort[key][n]" :src="arrayOfQsort[key][n].image_path">
</div>
<div class="bg-white text-black qsortlg:w-24 qsortmd:w-16 qsortsm:w-12 qsortlg:h-12 qsortmd:h-8 qsortsm:h-8 select-none inline-block align-middle justify-center">
{{ array[array.length - 2] }}
{{ array[array.length - 2] !== '--empty--' ? array[array.length - 2] : '' }}
</div>
<div class="bg-white text-black qsortlg:w-24 qsortmd:w-16 qsortsm:w-12 qsortlg:h-24 qsortmd:h-16 qsortsm:h-12 select-none inline-block align-top justify-center"
......@@ -62,6 +66,7 @@
<script>
import {mapState} from "vuex"
import store from "../../store"
export default {
name: "q-sort",
......@@ -72,7 +77,8 @@ export default {
containerWidth: 24 * this.itemsnumber * 2 * 2,
eachContainerHeight: 24 * this.maxnumber * 2,
tokens: [],
descriptionShowninToken: {}
descriptionShowninToken: {},
arrayOfQsort: []
}
},
computed: {
......@@ -81,6 +87,7 @@ export default {
sortingtotal: state => state.newinterview.sortingtotal,
currentsorting: state => state.newinterview.sorting,
currentpage: state => state.newinterview.page,
selectedToken: state => state.newinterview.selectedToken
})
},
mounted() {
......@@ -90,6 +97,9 @@ export default {
created() {
this.tokens = {};
this.arrayOfQsort = this.columns;
this.arrayOfQsort.forEach((o, i, a) => a[i].forEach((x, j, b) => b[j] = '' ));
setTimeout(function () {
let tokens = document.getElementsByClassName("cards");
......@@ -151,6 +161,27 @@ export default {
},
methods:
{
assignTokenToCell: function(key,n) {
if(!_.isEmpty(this.selectedToken))
{
console.log(this.selectedToken)
this.arrayOfQsort[key][n] = this.selectedToken;
this.$store.commit('updateselectedtoken',{});
this.$forceUpdate()
}else{
}
},
updateselecttoken: function(token){
this.$store.commit('updateselectedtoken',token);
this.$store.commit('updateToggleCards',!this.toggleCards);
this.$forceUpdate()
},
hovertrue: function (i){
Vue.set(this.tokens[i],'hover',true);
this.descriptionShowninToken = this.tokens[i];
......
......@@ -1823,13 +1823,11 @@ export default {
qsort.pop();
let qsortArray = [];
_.forEach(qsort, function (value, key) {
let av = value.replaceAll('--empty--', '').split('|');
qsortArray.push(av);
});
this.sorting.qsortIndexModifier = Math.abs(Math.round(0 - qsortArray.length / 2)) + parseInt(qsortArray[0][1]);
this.sorting.qsortNumber = qsortArray.length;
this.sorting.qsort = qsortArray;
for (let i = 0;
......@@ -1856,8 +1854,6 @@ export default {
}
setTimeout(function () {
//if(self.sorting.tokennumber > 1) self.sorting.tokens.pop();
for (let i = 0;
i < self.studydata.tokens.length;
......@@ -1999,6 +1995,7 @@ export default {
let qsortbasenumbers = document.getElementsByClassName("qsortbasenumbers");
_.forEach(this.sorting.qsort, (q, key) => {
q[1] = qsortbasenumbers[key].innerText;
q.reverse();
});
}
_.merge(study, {name: this.name}, {author: this.author}, {description: this.short_description}, {sorting: this.sorting}, {presort: this.presort}, {postsort: this.postsort});
......@@ -2043,6 +2040,7 @@ export default {
let qsortbasenumbers = document.getElementsByClassName("qsortbasenumbers");
_.forEach(this.sorting.qsort, (q, key) => {
q[1] = qsortbasenumbers[key].innerText;
q.reverse();
});
}
......
import Vue
from 'vue';
import Vuex
from 'vuex';
import Buefy
from 'buefy';
import Vue from 'vue';
import Vuex from 'vuex';
import Buefy from 'buefy';
Vue.use(
Vuex);
......@@ -45,18 +42,17 @@ export default new Vuex.Store(
selectedclassifier: {},
presortQuestions: true,
postsortQuestions: true,
sortingType: 0
sortingType: 0,
selectedToken: {}
},
},
mutations: {
newinterview(
state,
interview)
{
interview) {
state.newinterview = interview;
},
setCenterAndBounds(state,payload)
{
setCenterAndBounds(state, payload) {
state.newinterview.center_x = payload.center_x
state.newinterview.center_y = payload.center_y
state.newinterview.bounds = payload.bounds
......@@ -64,24 +60,20 @@ export default new Vuex.Store(
},
imagepreset(
state,
images)
{
images) {
state.newinterview.imagepreset = images;
},
settoken: function(state)
{
settoken: function (state) {
state.newinterview.newtoken.ispreset = false;
state.newinterview.newtoken.image_path = '';
let reader = new FileReader();
let file = state.newinterview.newtoken.file;
let self = this;
reader.onload = function(file)
{
reader.onload = function (file) {
let im = new Image();
im.onload = function()
{
im.onload = function () {
var canvas = document.createElement(
'canvas'),
......@@ -92,8 +84,7 @@ export default new Vuex.Store(
if (im.width <
100 ||
im.height <
100)
{
100) {
ctx.drawImage(
im,
0,
......@@ -106,8 +97,7 @@ export default new Vuex.Store(
canvas.height,
);
}
else
{
else {
self.drawImageProp(
ctx,
im,
......@@ -119,8 +109,7 @@ export default new Vuex.Store(
}
let newimgUri = canvas.toDataURL(
'image/*').
toString();
'image/*').toString();
document.getElementById(
'newtoken').src = newimgUri;
......@@ -137,110 +126,76 @@ export default new Vuex.Store(
reader.readAsDataURL(
file);
if (state.newinterview.newtoken.name ===
'')
{
'') {
state.newinterview.newtoken.name = state.newinterview.newtoken.file.name;
}
},
changeToken: function(state)
{
changeToken: function (state) {
Vue.set(
state,
'fetchtoken',
true,
);
},
setFetchToken: function(
state,
value)
{
setFetchToken: function (state, value) {
Vue.set(
state,
'fetchtoken',
value,
);
},
resetToken: function(state)
{
resetToken: function (state) {
state.newinterview.newtoken.file.name = '';
},
updatepage: function(
state,
value)
{
updatepage: function (state, value) {
state.newinterview.page = value;
},
updatesortingnumber: function(
state,
value)
{
updatesortingnumber: function (state, value) {
state.newinterview.sorting = value;
},
updateselectedclassifier: function(
state,
value)
{
updateselectedtoken: function (state, value) {
state.newinterview.selectedToken = value
},
updateselectedclassifier: function (state, value) {
state.newinterview.selectedclassifier = value;
},
increasemaxsorting: function(state)
{
increasemaxsorting: function (state) {
state.newinterview.sortingtotal++;
},
updateloadedsorting: function(
state,
value)
{
updateloadedsorting: function (state, value) {
state.newinterview.loadedsortings = value;
},
newtokenmodal: function(
state,
value)
{
newtokenmodal: function (state, value) {
state.newinterview.newtokenmodal = !state.newinterview.newtokenmodal;
},
aretherepresortquestion: function(
state,
value)
{
aretherepresortquestion: function (state, value) {
state.newinterview.presortQuestions = value;
},
aretherepostsortquestions: function(
state,
value)
{
aretherepostsortquestions: function (state, value) {
state.newinterview.postsortQuestions = value;
},
typeofsorting: function(
state,
value)
{
typeofsorting: function (state, value) {
state.newinterview.sortingType = value;
},
updateToggleCards: function(state,value)
{
updateToggleCards: function (state, value) {
state.newinterview.toggleCards = value;
}
},
actions: {
async setimagepreset(context)
{
async setimagepreset(context) {
axios.post(
'../api/v1/getpresettokenimages').
then(
response =>
{
'../api/v1/getpresettokenimages').then(
response => {
context.commit(
'imagepreset',
response.data.presetimages,
);
}).
catch(
error =>
{
}).catch(
error => {
console.log(
error);
......@@ -249,12 +204,10 @@ export default new Vuex.Store(
},
async saveToken(
{commit, state},
study)
{
study) {
var config = {
onUploadProgress: function(progressEvent)
{
onUploadProgress: function (progressEvent) {
state.newinterview.uploadProgress = Math.round(
(progressEvent.loaded *
100) /
......@@ -269,29 +222,24 @@ export default new Vuex.Store(
study: study,
},
config,
).
then(
response =>
{
).then(
response => {
commit(
'changeToken');
state.newinterview.uploadProgress = 0;
}).
catch(
error =>
{
}).catch(
error => {
console.log(
error);
state.newinterview.uploadProgress = 0;
});
},
togglePersonModal({commit,state})
{
togglePersonModal({commit, state}) {
const body = document.querySelector(
'body');
const modal = document.querySelector(
'.modal'+state.newinterview.sorting);
'.modal' + state.newinterview.sorting);
modal.classList.toggle(
'opacity-0');
modal.classList.toggle(
......
......@@ -60,7 +60,7 @@
</div>
<span v-show="interviewpage == 1" class="flex">
<div class="flex items-center flex-shrink-1 text-white text-center ">
<div class="flex items-center flex-shrink-1 text-white text-center " v-if="sortingType !== 3">
<a class="text-center bg-green-500 hover:text-gray-300 hover:bg-green-800 p-2 ml-2"
@click="interviewaddsorting">
<strong> {{ __('Add Sorting') }}</strong>
......@@ -80,6 +80,11 @@
</a>
</div>
<div class="flex flex-shrink-1 ml-2 items-center">
<img v-if="selectedToken" :src="selectedToken.image_path" style="width: 50px;height: 50px;z-index:100;">
</div>
</span>
</nav>
......
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