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 ...@@ -52,13 +52,15 @@ class Token extends Model
$token = new self; $token = new self;
$token->name = $tokenToSave['name']; $token->name = $tokenToSave['name'];
$token->image_path = isset($tokenToSave['file']) ? $tokenToSave['file'] : $tokenToSave['image_path']; $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); $token->studies()->sync($study->id);
} else { } else {
self::SaveNewToken($tokenToSave, $study, $isInterview, $token); 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(); $token->save();
} }
...@@ -88,12 +90,6 @@ class Token extends Model ...@@ -88,12 +90,6 @@ class Token extends Model
$studyPath = storage_path('app/study' . $study->id . '/tokens/'); $studyPath = storage_path('app/study' . $study->id . '/tokens/');
File::isDirectory($studyPath) or File::makeDirectory($studyPath, 0775, true, true); File::isDirectory($studyPath) or File::makeDirectory($studyPath, 0775, true, true);
self::saveImage($image, $studyPath, $name, $base64FirstPart, $study, $tokenToSave, $token); 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({ ...@@ -134,7 +134,8 @@ window.app = new Vue({
presortQuestions: (state) => state.newinterview.presortQuestions, presortQuestions: (state) => state.newinterview.presortQuestions,
postsortQuestions: (state) => state.newinterview.postsortQuestions, postsortQuestions: (state) => state.newinterview.postsortQuestions,
sortingType: (state) => state.newinterview.sortingType, sortingType: (state) => state.newinterview.sortingType,
toggleCards: (state) => state.newinterview.toggleCards toggleCards: (state) => state.newinterview.toggleCards,
selectedToken: (state) => state.newinterview.selectedToken,
}), }),
}, data: { }, data: {
newstudy: {}, users: {}, newuser: { newstudy: {}, users: {}, newuser: {
......
...@@ -355,7 +355,10 @@ export default { ...@@ -355,7 +355,10 @@ export default {
qsort.pop(); qsort.pop();
let qsortArray = []; let qsortArray = [];
_.forEach(qsort, function (value, key) { _.forEach(qsort, function (value, key) {
qsortArray.push(value.split('|')); let av = value.replaceAll('--empty--', '').split('|').reverse();
qsortArray.push(av);
}); });
// calculate array with more values // calculate array with more values
...@@ -376,6 +379,7 @@ export default { ...@@ -376,6 +379,7 @@ export default {
} }
qsortArray[key] = value; qsortArray[key] = value;
}) })
this.qsortMaxNumber = maxNumberOfItems; this.qsortMaxNumber = maxNumberOfItems;
return qsortArray; return qsortArray;
...@@ -596,9 +600,10 @@ export default { ...@@ -596,9 +600,10 @@ export default {
let localISOTime = (new Date(Date.now() - timeZoneOffset)).toISOString().slice(0, 19).replace('T', ' '); let localISOTime = (new Date(Date.now() - timeZoneOffset)).toISOString().slice(0, 19).replace('T', ' ');
return localISOTime; return localISOTime;
}, removeElementsFromScreenshot: function () { }, removeElementsFromScreenshot: function () {
let setOpacityTo0 = document.getElementsByClassName('remove-from-screenshot'); let setOpacityTo0 = document.getElementsByClassName('remove-from-screenshot');
let navbarHeight = document.getElementById('main-nav-interview').offsetHeight; 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) { _.forEach(setOpacityTo0, function (o) {
o.style.opacity = '0.0'; o.style.opacity = '0.0';
...@@ -606,7 +611,7 @@ export default { ...@@ -606,7 +611,7 @@ export default {
}, addElementsHiddenBefore: function () { }, addElementsHiddenBefore: function () {
let setOpacityTo1 = document.getElementsByClassName('remove-from-screenshot'); let setOpacityTo1 = document.getElementsByClassName('remove-from-screenshot');
let navbarHeight = document.getElementById('main-nav-interview').offsetHeight; 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) { _.forEach(setOpacityTo1, function (o) {
o.style.opacity = '1.0'; o.style.opacity = '1.0';
}); });
......
<template> <template>
<div class="flex"> <div class="flex">
<div v-show="toggleCards" <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" <div v-for="(t,index) in tokens" :id="t.id"
class="z-50 ml-1 inline-flex" class="z-50 ml-1 inline-flex"
@mouseover="hovertrue(index)" @mouseover="hovertrue(index)"
@mouseleave="hoverfalse(index)" @mouseleave="hoverfalse(index)"
style="width: 50px;height: 50px;z-index:100;" style="width: 50px;height: 50px;z-index:100;"
@click="updateselecttoken(t)"
> >
<div class="block"> <div class="block">
<img :src="t.image_path" <img :src="t.image_path"
...@@ -37,15 +38,18 @@ ...@@ -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 :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-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>
<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"> <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>
<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" <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 @@ ...@@ -62,6 +66,7 @@
<script> <script>
import {mapState} from "vuex" import {mapState} from "vuex"
import store from "../../store"
export default { export default {
name: "q-sort", name: "q-sort",
...@@ -72,7 +77,8 @@ export default { ...@@ -72,7 +77,8 @@ export default {
containerWidth: 24 * this.itemsnumber * 2 * 2, containerWidth: 24 * this.itemsnumber * 2 * 2,
eachContainerHeight: 24 * this.maxnumber * 2, eachContainerHeight: 24 * this.maxnumber * 2,
tokens: [], tokens: [],
descriptionShowninToken: {} descriptionShowninToken: {},
arrayOfQsort: []
} }
}, },
computed: { computed: {
...@@ -81,6 +87,7 @@ export default { ...@@ -81,6 +87,7 @@ export default {
sortingtotal: state => state.newinterview.sortingtotal, sortingtotal: state => state.newinterview.sortingtotal,
currentsorting: state => state.newinterview.sorting, currentsorting: state => state.newinterview.sorting,
currentpage: state => state.newinterview.page, currentpage: state => state.newinterview.page,
selectedToken: state => state.newinterview.selectedToken
}) })
}, },
mounted() { mounted() {
...@@ -90,6 +97,9 @@ export default { ...@@ -90,6 +97,9 @@ export default {
created() { created() {
this.tokens = {}; this.tokens = {};
this.arrayOfQsort = this.columns;
this.arrayOfQsort.forEach((o, i, a) => a[i].forEach((x, j, b) => b[j] = '' ));
setTimeout(function () { setTimeout(function () {
let tokens = document.getElementsByClassName("cards"); let tokens = document.getElementsByClassName("cards");
...@@ -151,6 +161,27 @@ export default { ...@@ -151,6 +161,27 @@ export default {
}, },
methods: 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){ hovertrue: function (i){
Vue.set(this.tokens[i],'hover',true); Vue.set(this.tokens[i],'hover',true);
this.descriptionShowninToken = this.tokens[i]; this.descriptionShowninToken = this.tokens[i];
......
...@@ -1823,13 +1823,11 @@ export default { ...@@ -1823,13 +1823,11 @@ export default {
qsort.pop(); qsort.pop();
let qsortArray = []; let qsortArray = [];
_.forEach(qsort, function (value, key) { _.forEach(qsort, function (value, key) {
let av = value.replaceAll('--empty--', '').split('|'); let av = value.replaceAll('--empty--', '').split('|');
qsortArray.push(av); 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.qsortNumber = qsortArray.length;
this.sorting.qsort = qsortArray; this.sorting.qsort = qsortArray;
for (let i = 0; for (let i = 0;
...@@ -1856,8 +1854,6 @@ export default { ...@@ -1856,8 +1854,6 @@ export default {
} }
setTimeout(function () { setTimeout(function () {
//if(self.sorting.tokennumber > 1) self.sorting.tokens.pop();
for (let i = 0; for (let i = 0;
i < self.studydata.tokens.length; i < self.studydata.tokens.length;
...@@ -1999,6 +1995,7 @@ export default { ...@@ -1999,6 +1995,7 @@ export default {
let qsortbasenumbers = document.getElementsByClassName("qsortbasenumbers"); let qsortbasenumbers = document.getElementsByClassName("qsortbasenumbers");
_.forEach(this.sorting.qsort, (q, key) => { _.forEach(this.sorting.qsort, (q, key) => {
q[1] = qsortbasenumbers[key].innerText; 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}); _.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 { ...@@ -2043,6 +2040,7 @@ export default {
let qsortbasenumbers = document.getElementsByClassName("qsortbasenumbers"); let qsortbasenumbers = document.getElementsByClassName("qsortbasenumbers");
_.forEach(this.sorting.qsort, (q, key) => { _.forEach(this.sorting.qsort, (q, key) => {
q[1] = qsortbasenumbers[key].innerText; q[1] = qsortbasenumbers[key].innerText;
q.reverse();
}); });
} }
......
import Vue import Vue from 'vue';
from 'vue'; import Vuex from 'vuex';
import Vuex import Buefy from 'buefy';
from 'vuex';
import Buefy
from 'buefy';
Vue.use( Vue.use(
Vuex); Vuex);
Vue.use( Vue.use(
Buefy); Buefy);
export default new Vuex.Store( export default new Vuex.Store(
{ {
state: { state: {
newinterview: { newinterview: {
toggleCards: false, toggleCards: false,
center_x: 0, center_x: 0,
center_y: 0, center_y: 0,
bounds: {}, bounds: {},
parentPos: 0, parentPos: 0,
imagepreset: [], imagepreset: [],
newtoken: {}, newtoken: {},
fetchtoken: false, fetchtoken: false,
uploadProgress: 0, uploadProgress: 0,
page: 0, page: 0,
sorting: 1, sorting: 1,
sortingtotal: 1, sortingtotal: 1,
pagenames: [ pagenames: [
'Pre-Sorting Questions', 'Pre-Sorting Questions',
'Sorting', 'Sorting',
'Post-Sorting Questions'], 'Post-Sorting Questions'],
buttonnames: [ buttonnames: [
[ [
'', '',
'Sorting >'], 'Sorting >'],
[ [
'< Questions', '< Questions',
'Questions >'], 'Questions >'],
[ [
'< Sorting', '< Sorting',
'End Interview']], 'End Interview']],
loadedsortings: 0, loadedsortings: 0,
newtokenmodal: false, newtokenmodal: false,
selectedclassifier: {}, selectedclassifier: {},
presortQuestions: true, presortQuestions: true,
postsortQuestions: true, postsortQuestions: true,
sortingType: 0 sortingType: 0,
}, selectedToken: {}
}, },
mutations: { },
newinterview( mutations: {
state, newinterview(
interview) state,
{ interview) {
state.newinterview = interview; state.newinterview = interview;
}, },
setCenterAndBounds(state,payload) setCenterAndBounds(state, payload) {
{ state.newinterview.center_x = payload.center_x
state.newinterview.center_x = payload.center_x state.newinterview.center_y = payload.center_y
state.newinterview.center_y = payload.center_y state.newinterview.bounds = payload.bounds
state.newinterview.bounds = payload.bounds state.newinterview.parentPos = payload.parentPos
state.newinterview.parentPos = payload.parentPos },
}, imagepreset(
imagepreset( state,
state, images) {
images) state.newinterview.imagepreset = images;
{
state.newinterview.imagepreset = images;
}, },
settoken: function(state) settoken: function (state) {
{ state.newinterview.newtoken.ispreset = false;
state.newinterview.newtoken.ispreset = false; state.newinterview.newtoken.image_path = '';
state.newinterview.newtoken.image_path = ''; let reader = new FileReader();
let reader = new FileReader(); let file = state.newinterview.newtoken.file;
let file = state.newinterview.newtoken.file; let self = this;
let self = this; reader.onload = function (file) {
reader.onload = function(file)
{
let im = new Image(); let im = new Image();
im.onload = function() im.onload = function () {
{
var canvas = document.createElement( var canvas = document.createElement(
'canvas'), 'canvas'),
ctx = canvas.getContext( ctx = canvas.getContext(
'2d'); '2d');
canvas.width = 100; canvas.width = 100;
canvas.height = 100; canvas.height = 100;
if (im.width < if (im.width <
100 || 100 ||
im.height < im.height <
100) 100) {
{ ctx.drawImage(
ctx.drawImage( im,
im, 0,
0, 0,
0, 100,
100, 100,
100, 0,
0, 0,
0, canvas.width,
canvas.width, canvas.height,
canvas.height, );
); }
} else {
else self.drawImageProp(
{ ctx,
self.drawImageProp( im,
ctx, 0,
im, 0,
0, canvas.width,
0, canvas.height,
canvas.width, );
canvas.height, }
);
}
let newimgUri = canvas.toDataURL( let newimgUri = canvas.toDataURL(
'image/*'). 'image/*').toString();
toString();
document.getElementById( document.getElementById(
'newtoken').src = newimgUri; 'newtoken').src = newimgUri;
}; };
im.src = file.target.result; im.src = file.target.result;
// create a new property in // create a new property in
// self.sorting.tokens[index] to save the base64 // self.sorting.tokens[index] to save the base64
// then save the file object in .file // then save the file object in .file
// to solve the error for the file object // to solve the error for the file object
self.sorting.tokens[index].base64 = file.target.result; self.sorting.tokens[index].base64 = file.target.result;
}; };
reader.readAsDataURL( reader.readAsDataURL(
file); file);
if (state.newinterview.newtoken.name === if (state.newinterview.newtoken.name ===
'') '') {
{ state.newinterview.newtoken.name = state.newinterview.newtoken.file.name;
state.newinterview.newtoken.name = state.newinterview.newtoken.file.name; }
} },
}, changeToken: function (state) {
changeToken: function(state) Vue.set(
{ state,
Vue.set( 'fetchtoken',
state, true,
'fetchtoken', );
true, },
); setFetchToken: function (state, value) {
}, Vue.set(
setFetchToken: function( state,
state, 'fetchtoken',
value) value,
{ );
Vue.set( },
state,