Commit 37245491 authored by ZeMKI's avatar ZeMKI

Bugfixed multiple sorting screenshot

* now the section labels are saved in the sorting screenshot.
* new study layout optimization.
parent 2cb63229
......@@ -3,7 +3,8 @@
<component name="ChangeListManager">
<list default="true" id="b51d2beb-a115-4b2a-80a2-b27cfb404d6c" name="Default Changelist" comment="">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/app/Helpers/Helper.php" beforeDir="false" afterPath="$PROJECT_DIR$/app/Helpers/Helper.php" afterDir="false" />
<change beforePath="$PROJECT_DIR$/resources/js/components/Interview/newinterview.vue" beforeDir="false" afterPath="$PROJECT_DIR$/resources/js/components/Interview/newinterview.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/resources/js/components/Interview/sorting_preview.vue" beforeDir="false" afterPath="$PROJECT_DIR$/resources/js/components/Interview/sorting_preview.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/resources/js/components/newstudy.vue" beforeDir="false" afterPath="$PROJECT_DIR$/resources/js/components/newstudy.vue" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
......@@ -264,7 +265,7 @@
<workItem from="1590480658730" duration="551000" />
<workItem from="1590484643170" duration="25829000" />
<workItem from="1590656055131" duration="4234000" />
<workItem from="1590665422138" duration="796000" />
<workItem from="1590665422138" duration="1497000" />
</task>
<servers />
</component>
......@@ -321,12 +322,12 @@
</state>
<state x="0" y="23" width="2048" height="1257" key="SettingsEditor/128.-1080.1920.1080/0.0.2048.1280@0.0.2048.1280" timestamp="1590056101932" />
<state x="0" y="23" key="SettingsEditor/65.-1080.1920.1080/0.0.2048.1280@0.0.2048.1280" timestamp="1590665405159" />
<state x="754" y="390" width="598" height="526" key="StructurePopup" timestamp="1590664935009">
<state x="754" y="390" width="598" height="526" key="StructurePopup" timestamp="1590666782790">
<screen x="0" y="0" width="2048" height="1280" />
</state>
<state x="754" y="390" width="597" height="524" key="StructurePopup/0.0.2048.1280@0.0.2048.1280" timestamp="1590585143194" />
<state x="754" y="390" width="597" height="524" key="StructurePopup/128.-1080.1920.1080/0.0.2048.1280@0.0.2048.1280" timestamp="1590054141097" />
<state x="754" y="390" width="598" height="526" key="StructurePopup/65.-1080.1920.1080/0.0.2048.1280@0.0.2048.1280" timestamp="1590664935009" />
<state x="754" y="390" width="598" height="526" key="StructurePopup/65.-1080.1920.1080/0.0.2048.1280@0.0.2048.1280" timestamp="1590666782790" />
<state x="772" y="-751" width="560" height="443" key="StructurePopup/65.-1080.1920.1080/0.0.2048.1280@65.-1080.1920.1080" timestamp="1590168084313" />
<state x="349" y="331" key="com.intellij.ide.ui.customization.CustomizableActionsPanel$EditIconDialog" timestamp="1590665402287">
<screen x="0" y="0" width="2048" height="1280" />
......@@ -359,24 +360,12 @@
</state>
<state x="824" y="505" key="scopes/128.-1057.1920.1057/0.0.2048.1280@0.0.2048.1280" timestamp="1590055889310" />
<state x="824" y="505" width="498" height="379" key="scopes/128.-1080.1920.1080/0.0.2048.1280@0.0.2048.1280" timestamp="1590055356254" />
<state x="689" y="292" width="715" height="677" key="search.everywhere.popup" timestamp="1590665227104">
<state x="689" y="292" width="715" height="677" key="search.everywhere.popup" timestamp="1590667028046">
<screen x="0" y="0" width="2048" height="1280" />
</state>
<state x="689" y="291" width="670" height="676" key="search.everywhere.popup/0.0.2048.1280@0.0.2048.1280" timestamp="1590150028065" />
<state x="689" y="291" width="670" height="676" key="search.everywhere.popup/128.-1080.1920.1080/0.0.2048.1280@0.0.2048.1280" timestamp="1590054146808" />
<state x="689" y="292" width="715" height="677" key="search.everywhere.popup/65.-1080.1920.1080/0.0.2048.1280@0.0.2048.1280" timestamp="1590665227104" />
<state x="689" y="292" width="715" height="677" key="search.everywhere.popup/65.-1080.1920.1080/0.0.2048.1280@0.0.2048.1280" timestamp="1590667028046" />
<state x="711" y="-834" width="670" height="571" key="search.everywhere.popup/65.-1080.1920.1080/0.0.2048.1280@65.-1080.1920.1080" timestamp="1590165045513" />
</component>
<component name="XDebuggerManager">
<breakpoint-manager>
<breakpoints>
<line-breakpoint enabled="true" type="javascript">
<url>file://$PROJECT_DIR$/resources/js/components/newstudy.vue</url>
<line>929</line>
<properties lambdaOrdinal="-1" />
<option name="timeStamp" value="2" />
</line-breakpoint>
</breakpoints>
</breakpoint-manager>
</component>
</project>
\ No newline at end of file
......@@ -348,14 +348,16 @@
},
centerLabel: function()
{
function substrInBetween(whole_str, str1, str2){
function substrInBetween(whole_str, str1, str2)
{
return whole_str.substring(
whole_str.indexOf(str1) + str1.length,
whole_str.lastIndexOf(str2)
whole_str.lastIndexOf(str2),
);
}
return substrInBetween(this.study.sortings[0].pivot.details,'center|','||');
return substrInBetween(this.study.sortings[0].pivot.details, 'center|', '||');
},
}, mounted()
......@@ -397,8 +399,6 @@
self.loading = false;
}, 50);
if (this.gotos)
{
this.interview.currentpage = 1;
......@@ -1117,6 +1117,8 @@
self.interview.structure.sortingnumber++;
}
document.querySelectorAll('.sectionLabel').forEach(el => el.remove());
}).catch(function(e)
{
self.addElementsHiddenBefore();
......@@ -1145,8 +1147,6 @@
,
nextpage: async function()
{
document.querySelectorAll('.sectionLabel').forEach(el => el.remove());
let self = this;
setTimeout(function()
......@@ -1222,6 +1222,7 @@
this.resetSelectedClassifier();
await this.capture_screenshot();
this.loading = false;
return;
......
......@@ -57,24 +57,21 @@
<script>
export default {
props: ['circles', 'sortingdetails', 'sections', 'sortingid','names','centerLabel'],
props: ['circles', 'sortingdetails', 'sections', 'sortingid', 'names', 'centerLabel'],
data()
{
return {
bounds: {},
center_x: 0,
center_y: 0,
disableinput: false
disableinput: false,
};
},
watch: {
'circles': function(newVal, oldVal)
{
document.querySelectorAll('[class^="round-sorting"]').forEach(el => el.remove());
document.querySelectorAll('[id^="sectionLabel"]').forEach(el => el.remove());
document.querySelectorAll('.triangle').forEach(el => el.remove());
document.querySelectorAll('.sectionLabel').forEach(el => el.remove());
this.removePreviousElements();
let self = this;
if (this.sortingid === 1 || this.sortingid === 2)
{
......@@ -89,10 +86,8 @@
},
'sections': function(newVal, oldVal)
{
document.querySelectorAll('[class^="round-sorting"]').forEach(el => el.remove());
document.querySelectorAll('[id^="sectionLabel"]').forEach(el => el.remove());
document.querySelectorAll('.triangle').forEach(el => el.remove());
document.querySelectorAll('.sectionLabel').forEach(el => el.remove());
this.removePreviousElements();
let self = this;
if (this.sortingid === 1 || this.sortingid === 2)
{
......@@ -110,55 +105,56 @@
self.createSections(self.sections);
}
},
'names': function (newVal,oldVal){
document.querySelectorAll('[class^="round-sorting"]').forEach(el => el.remove());
document.querySelectorAll('[id^="sectionLabel"]').forEach(el => el.remove());
document.querySelectorAll('.triangle').forEach(el => el.remove());
document.querySelectorAll('.sectionLabel').forEach(el => el.remove());
let self = this;
if (this.sortingid === 1 || this.sortingid === 2)
{
document.querySelectorAll('[class^="round-sorting"]').forEach(el => el.remove());
'names': function(newVal, oldVal)
{
this.removePreviousElements();
let self = this;
if (this.sortingid === 1 || this.sortingid === 2)
{
document.querySelectorAll('[class^="round-sorting"]').forEach(el => el.remove());
this.createcircles();
this.createcircles();
}
if (this.sortingid === 2)
{
document.querySelectorAll('.triangle').forEach(el => el.remove());
}
if (this.sortingid === 2)
{
document.querySelectorAll('.triangle').forEach(el => el.remove());
this.center_x = this.bounds.left + (document.querySelector('.round-sorting' + this.circles).offsetWidth / 2);
this.center_y = (document.querySelector('.round-sorting' + this.circles).offsetHeight / 2) + this.bounds.top;
self.createSections(self.sections);
}
},
'centerLabel': function (newVal,oldVal){
document.querySelectorAll('[class^="round-sorting"]').forEach(el => el.remove());
document.querySelectorAll('[id^="sectionLabel"]').forEach(el => el.remove());
document.querySelectorAll('.triangle').forEach(el => el.remove());
document.querySelectorAll('.sectionLabel').forEach(el => el.remove());
let self = this;
if (this.sortingid === 1 || this.sortingid === 2)
{
this.center_x = this.bounds.left + (document.querySelector('.round-sorting' + this.circles).offsetWidth / 2);
this.center_y = (document.querySelector('.round-sorting' + this.circles).offsetHeight / 2) + this.bounds.top;
self.createSections(self.sections);
}
},
'centerLabel': function(newVal, oldVal)
{
document.querySelectorAll('[class^="round-sorting"]').forEach(el => el.remove());
document.querySelectorAll('[id^="sectionLabel"]').forEach(el => el.remove());
document.querySelectorAll('.triangle').forEach(el => el.remove());
document.querySelectorAll('.sectionLabel').forEach(el => el.remove());
let self = this;
if (this.sortingid === 1 || this.sortingid === 2)
{
document.querySelectorAll('[class^="round-sorting"]').forEach(el => el.remove());
this.createcircles();
this.createcircles();
}
if (this.sortingid === 2)
{
document.querySelectorAll('.triangle').forEach(el => el.remove());
}
if (this.sortingid === 2)
{
document.querySelectorAll('.triangle').forEach(el => el.remove());
this.center_x = this.bounds.left + (document.querySelector('.round-sorting' + this.circles).offsetWidth / 2);
this.center_y = (document.querySelector('.round-sorting' + this.circles).offsetHeight / 2) + this.bounds.top;
self.createSections(self.sections);
}
}
this.center_x = this.bounds.left + (document.querySelector('.round-sorting' + this.circles).offsetWidth / 2);
this.center_y = (document.querySelector('.round-sorting' + this.circles).offsetHeight / 2) + this.bounds.top;
self.createSections(self.sections);
}
},
},
computed: {
sectionNames: function(){
return Object.assign({}, this.names)
}
sectionNames: function()
{
return Object.assign({}, this.names);
},
},
created()
{
......@@ -185,6 +181,14 @@
},
methods: {
removePreviousElements: function()
{
document.querySelectorAll('[class^="round-sorting"]').forEach(el => el.remove());
document.querySelectorAll('[id^="sectionLabel"]').forEach(el => el.remove());
document.querySelectorAll('.triangle').forEach(el => el.remove());
document.querySelectorAll('.sectionLabel').forEach(el => el.remove());
document.querySelectorAll('.centerLabel').forEach(el => el.remove());
},
toggleSortingPreviewModal()
{
const body = document.querySelector('body');
......@@ -193,7 +197,6 @@
modal.classList.toggle('pointer-events-none');
body.classList.toggle('modal-active');
},
createcircles: async function()
{
......@@ -415,15 +418,15 @@
}
}
let centerLabel = document.createElement('div');
centerLabel.className = 'bg-gray-900 text-white absolute rounded-full text-center align-middle p-3 whitespace-no-wrap';
centerLabel.className = 'bg-gray-900 text-white absolute rounded-full text-center align-middle p-3 whitespace-no-wrap centerLabel';
centerLabel.style.height = '50px';
centerLabel.style.width = '50px';
centerLabel.style.left = (this.center_x - 25) + 'px';
centerLabel.style.top = (this.center_y - 25) + 'px';
centerLabel.style.top = (this.center_y - 25) + 'px';
centerLabel.innerText = this.centerLabel;
container.appendChild(centerLabel);
this.computeSectionValues(parseInt(this.sections))
this.computeSectionValues(parseInt(this.sections));
},
computeSectionValues: function(sectionNumber)
{
......@@ -477,7 +480,7 @@
p.style.top = (edgeRight_point.y + offsetY) + 'px';
p.id = 'sectionLabel'.i;
this.$forceUpdate()
this.$forceUpdate();
}
}
break;
......@@ -695,7 +698,7 @@
}
}
},
},
};
......
......@@ -51,7 +51,7 @@
<div class="control w-full">
<textarea class="textarea w-full"
style="resize: none;white-space: nowrap;overflow-x: scroll;"
:class="response.indexOf(errormessages.studyname) > -1 ? 'bg-gray-200 focus:bg-white border-transparent focus:border-blue-400 border-red-500': 'bg-gray-200 focus:bg-white border-transparent focus:border-blue-400'"
:class="response.indexOf(errormessages.studyname) > -1 ? 'bg-gray-200 focus:bg-gray-200 border-transparent focus:border-blue-400 border-red-500': 'bg-gray-200 focus:bg-gray-200 border-transparent focus:border-blue-400'"
type="text" placeholder="" id="studyname" v-model="name"
:maxlength="inputLength.studyname" row="1">
</textarea>
......@@ -67,7 +67,7 @@
<label class="label">{{ trans('Responsible Researcher(s)') }}</label>
<div class="control">
<textarea class="textarea"
:class="response.indexOf(errormessages.author) > -1 ? 'bg-gray-200 focus:bg-white border-transparent focus:border-blue-400 border-red-500': 'bg-gray-200 focus:bg-white border-transparent focus:border-blue-400'"
:class="response.indexOf(errormessages.author) > -1 ? 'bg-gray-200 focus:bg-gray-200 border-transparent focus:border-blue-400 border-red-500': 'bg-gray-200 focus:bg-gray-200 border-transparent focus:border-blue-400'"
type="text" placeholder="" v-model="author"
:maxlength="inputLength.author"></textarea>
<span
......@@ -84,7 +84,7 @@
<label class="label">{{ trans('Short description of study') }}</label>
<div class="control">
<textarea class="textarea"
:class="response.indexOf(errormessages.short_description) > -1 ? 'bg-gray-200 focus:bg-white border-transparent focus:border-blue-400 border-red-500': 'bg-gray-200 focus:bg-white border-transparent focus:border-blue-400'"
:class="response.indexOf(errormessages.short_description) > -1 ? 'bg-gray-200 focus:bg-gray-200 border-transparent focus:border-blue-400 border-red-500': 'bg-gray-200 focus:bg-gray-200 border-transparent focus:border-blue-400'"
placeholder="" v-model="short_description"
:maxlength="inputLength.short_description"></textarea>
<span
......@@ -109,7 +109,7 @@
</label>
<div class="control w-full">
<textarea v-model="sorting.description"
class="textarea bg-gray-200 focus:bg-white border-transparent focus:border-blue-400"
class="textarea bg-gray-200 focus:bg-gray-200 border-transparent focus:border-blue-400"
id="sortingDescription"
type="text"
placeholder="" :maxlength="inputLength.sorting_description"></textarea>
......@@ -196,7 +196,7 @@
<div class="content">
<label class="label is-small">Token name</label>
<input
class="bg-white focus:outline-none focus:shadow-outline border border-gray-300 py-2 px-4 block w-full appearance-none leading-normal"
class="bg-gray-200 focus:outline-none focus:shadow-outline border border-gray-300 py-2 px-4 block w-full appearance-none leading-normal"
type="text" v-model="t.name"
@input="validTokenName(index,t.name)"/>
<label class="label is-small mt-5">Preset tokens</label>
......@@ -270,7 +270,7 @@
<label class="label">{{trans('Question')}}</label>
<div class="control">
<input v-model="q.question"
class="bg-white focus:outline-none focus:shadow-outline border border-gray-300 py-2 px-4 block w-full appearance-none leading-normal"
class="bg-gray-200 focus:outline-none focus:shadow-outline border border-gray-300 py-2 px-4 block w-full appearance-none leading-normal"
type="text" placeholder="">
</div>
<div class="columns">
......@@ -315,7 +315,7 @@
<label class="label">{{trans('Answers')}}</label>
<div class="control">
<input v-model="q.answers[na-1]"
class="bg-white focus:outline-none focus:shadow-outline border border-gray-300 py-2 px-4 block w-full appearance-none leading-normal"
class="bg-gray-200 focus:outline-none focus:shadow-outline border border-gray-300 py-2 px-4 block w-full appearance-none leading-normal"
type="text" placeholder="">
</div>
</div>
......@@ -330,7 +330,7 @@
</label>
<div class="control">
<input
class="input bg-gray-200 focus:bg-white border-transparent focus:border-blue-400"
class="input bg-gray-200 focus:bg-gray-200 border-transparent focus:border-blue-400"
type="number" v-model="q.scalemin" min="0">
</div>
<label class="label mt-2">
......@@ -338,7 +338,7 @@
</label>
<div class="control">
<input
class="input bg-gray-200 focus:bg-white border-transparent focus:border-blue-400"
class="input bg-gray-200 focus:bg-gray-200 border-transparent focus:border-blue-400"
type="text" v-model="q.minlabel">
</div>
</div>
......@@ -348,7 +348,7 @@
<label class="label">{{ trans('Max Value') }}</label>
<div class="control">
<input
class="input bg-gray-200 focus:bg-white border-transparent focus:border-blue-400"
class="input bg-gray-200 focus:bg-gray-200 border-transparent focus:border-blue-400"
type="number" v-model="q.scalemax">
</div>
<label class="label mt-2">
......@@ -356,7 +356,7 @@
</label>
<div class="control">
<input
class="input bg-gray-200 focus:bg-white border-transparent focus:border-blue-400"
class="input bg-gray-200 focus:bg-gray-200 border-transparent focus:border-blue-400"
type="text" v-model="q.maxlabel">
</div>
</div>
......@@ -381,7 +381,7 @@
</label>
<div class="control">
<input v-model="q.question"
class="input bg-gray-200 focus:bg-white border-transparent focus:border-blue-400"
class="input bg-gray-200 focus:bg-gray-200 border-transparent focus:border-blue-400"
type="text" placeholder="">
</div>
<div class="columns">
......@@ -429,7 +429,7 @@
<label class="label">{{trans('Answers')}}</label>
<div class="control">
<input v-model="q.answers[na-1]"
class="bg-white focus:outline-none focus:shadow-outline border border-gray-300 py-2 px-4 block w-full appearance-none leading-normal"
class="bg-gray-200 focus:outline-none focus:shadow-outline border border-gray-300 py-2 px-4 block w-full appearance-none leading-normal"
type="text" placeholder="">
</div>
......@@ -443,13 +443,13 @@
<label class="label">{{ trans('Minimum Value') }}</label>
<div class="control">
<input
class="input bg-gray-200 focus:bg-white border-transparent focus:border-blue-400"
class="input bg-gray-200 focus:bg-gray-200 border-transparent focus:border-blue-400"
type="number" v-model="q.scalemin" min="0">
</div>
<label class="label mt-2">{{ trans('Label Minimum Value') }}</label>
<div class="control">
<input
class="bg-white focus:outline-none focus:shadow-outline border border-gray-300 py-2 px-4 block w-full appearance-none leading-normal"
class="bg-gray-200 focus:outline-none focus:shadow-outline border border-gray-300 py-2 px-4 block w-full appearance-none leading-normal"
type="text" v-model="q.minlabel">
</div>
......@@ -460,13 +460,13 @@
<label class="label">{{ trans('Max Value') }}</label>
<div class="control">
<input
class="input bg-gray-200 focus:bg-white border-transparent focus:border-blue-400"
class="input bg-gray-200 focus:bg-gray-200 border-transparent focus:border-blue-400"
type="number" v-model="q.scalemax">
</div>
<label class="label mt-2">{{ trans('Label Max Value') }}</label>
<div class="control">
<input
class="bg-white focus:outline-none focus:shadow-outline border border-gray-300 py-2 px-4 block w-full appearance-none leading-normal"
class="bg-gray-200 focus:outline-none focus:shadow-outline border border-gray-300 py-2 px-4 block w-full appearance-none leading-normal"
type="text" v-model="q.maxlabel">
</div>
......
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