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 @@
}
}
},
},
};
......
This diff is collapsed.
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