Skip to content
GitLab
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
Hide whitespace changes
Inline Side-by-side
app/Token.php
View file @ 17d1811f
......@@ -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":""}';
}
/**
......
resources/js/app.js
View file @ 17d1811f
......@@ -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: {
......
resources/js/components/Interview/newinterview.vue
View file @ 17d1811f
......@@ -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';
});
......
resources/js/components/Interview/q-sort.vue
View file @ 17d1811f
<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];
......
resources/js/components/newstudy.vue
View file @ 17d1811f
......@@ -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();
});
}
......
resources/js/store/index.js
View file @ 17d1811f
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);
Vuex);
Vue.use(
Buefy);
Buefy);
export default new Vuex.Store(
{
state: {
newinterview: {
toggleCards: false,
center_x: 0,
center_y: 0,
bounds: {},
parentPos: 0,
imagepreset: [],
newtoken: {},
fetchtoken: false,
uploadProgress: 0,
page: 0,
sorting: 1,
sortingtotal: 1,
pagenames: [
'Pre-Sorting Questions',
'Sorting',
'Post-Sorting Questions'],
buttonnames: [
[
'',
'Sorting >'],
[
'< Questions',
'Questions >'],
[
'< Sorting',
'End Interview']],
loadedsortings: 0,
newtokenmodal: false,
selectedclassifier: {},
presortQuestions: true,
postsortQuestions: true,
sortingType: 0
},
},
mutations: {
newinterview(
state,
interview)
{
state.newinterview = interview;
},
setCenterAndBounds(state,payload)
{
state.newinterview.center_x = payload.center_x
state.newinterview.center_y = payload.center_y
state.newinterview.bounds = payload.bounds
state.newinterview.parentPos = payload.parentPos
},
imagepreset(
state,
images)
{
state.newinterview.imagepreset = images;
{
state: {
newinterview: {
toggleCards: false,
center_x: 0,
center_y: 0,
bounds: {},
parentPos: 0,
imagepreset: [],
newtoken: {},
fetchtoken: false,
uploadProgress: 0,
page: 0,
sorting: 1,
sortingtotal: 1,
pagenames: [
'Pre-Sorting Questions',
'Sorting',
'Post-Sorting Questions'],
buttonnames: [
[
'',
'Sorting >'],
[
'< Questions',
'Questions >'],
[
'< Sorting',
'End Interview']],
loadedsortings: 0,
newtokenmodal: false,
selectedclassifier: {},
presortQuestions: true,
postsortQuestions: true,
sortingType: 0,
selectedToken: {}
},
},
mutations: {
newinterview(
state,
interview) {
state.newinterview = interview;
},
setCenterAndBounds(state, payload) {
state.newinterview.center_x = payload.center_x
state.newinterview.center_y = payload.center_y
state.newinterview.bounds = payload.bounds
state.newinterview.parentPos = payload.parentPos
},
imagepreset(
state,
images) {
state.newinterview.imagepreset = images;
},
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)
{
},
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) {
let im = new Image();
im.onload = function()
{
let im = new Image();
im.onload = function () {
var canvas = document.createElement(
'canvas'),
ctx = canvas.getContext(
'2d');
canvas.width = 100;
canvas.height = 100;
if (im.width <
100 ||
im.height <
100)
{
ctx.drawImage(
im,
0,
0,
100,
100,
0,
0,
canvas.width,
canvas.height,
);
}
else
{
self.drawImageProp(
ctx,
im,
0,
0,
canvas.width,
canvas.height,
);
}
var canvas = document.createElement(
'canvas'),
ctx = canvas.getContext(
'2d');
canvas.width = 100;
canvas.height = 100;
if (im.width <
100 ||
im.height <
100) {
ctx.drawImage(
im,
0,
0,
100,
100,
0,
0,
canvas.width,
canvas.height,
);
}
else {
self.drawImageProp(
ctx,
im,
0,
0,
canvas.width,
canvas.height,
);
}
let newimgUri = canvas.toDataURL(
'image/*').
toString();
let newimgUri = canvas.toDataURL(
'image/*').toString();
document.getElementById(
'newtoken').src = newimgUri;
};
im.src = file.target.result;
document.getElementById(
'newtoken').src = newimgUri;
};
im.src = file.target.result;
// create a new property in
// self.sorting.tokens[index] to save the base64
// then save the file object in .file
// to solve the error for the file object
// create a new property in
// self.sorting.tokens[index] to save the base64
// then save the file object in .file
// to solve the error for the file object
self.sorting.tokens[index].base64 = file.target.result;
};
reader.readAsDataURL(
file);
if (state.newinterview.newtoken.name ===
'')
{
state.newinterview.newtoken.name = state.newinterview.newtoken.file.name;
}
},
changeToken: function(state)
{
Vue.set(
state,
'fetchtoken',
true,
);
},
setFetchToken: function(
state,
value)
{
Vue.set(
state,
'fetchtoken',
value,
);
},
resetToken: function(state)
{
state.newinterview.newtoken.file.name = '';
},
updatepage: function(
state,
value)
{
state.newinterview.page = value;
},
updatesortingnumber: function(
state,
value)
{
state.newinterview.sorting = value;
},
updateselectedclassifier: function(
state,
value)
{
state.newinterview.selectedclassifier = value;
},
increasemaxsorting: function(state)
{
state.newinterview.sortingtotal++;
},
updateloadedsorting: function(
state,
value)
{
state.newinterview.loadedsortings = value;
},
newtokenmodal: function(
state,
value)
{
state.newinterview.newtokenmodal = !state.newinterview.newtokenmodal;
},
aretherepresortquestion: function(
state,
value)
{
state.newinterview.presortQuestions = value;
},
aretherepostsortquestions: function(
state,
value)
{
state.newinterview.postsortQuestions = value;
},
typeofsorting: function(
state,
value)
{
state.newinterview.sortingType = value;
self.sorting.tokens[index].base64 = file.target.result;
};
reader.readAsDataURL(
file);
if (state.newinterview.newtoken.name ===
'') {
state.newinterview.newtoken.name = state.newinterview.newtoken.file.name;
}
},
changeToken: function (state) {
Vue.set(
state,
'fetchtoken',
true,
);
},
setFetchToken: function (state, value) {
Vue.set(
state,
'fetchtoken',
value,
);
},
resetToken: function (state) {
state.newinterview.newtoken.file.name = '';
},
updatepage: function (state, value) {
state.newinterview.page = value;
},
updatesortingnumber: function (state, value) {
state.newinterview.sorting = value;
},
updateselectedtoken: function (state, value) {
state.newinterview.selectedToken = value
},
updateselectedclassifier: function (state, value) {
state.newinterview.selectedclassifier = value;
},
increasemaxsorting: function (state) {
state.newinterview.sortingtotal++;
},
updateloadedsorting: function (state, value) {
state.newinterview.loadedsortings = value;
},
newtokenmodal: function (state, value) {
state.newinterview.newtokenmodal = !state.newinterview.newtokenmodal;
},
aretherepresortquestion: function (state, value) {
state.newinterview.presortQuestions = value;
},
aretherepostsortquestions: function (state, value) {
state.newinterview.postsortQuestions = value;
},
typeofsorting: function (state, value) {
state.newinterview.sortingType = value;