Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Relationship quality #140

Open
wants to merge 18 commits into
base: main
Choose a base branch
from
Open

Relationship quality #140

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
0a799dd
Dialog für Beziehungsqualitäten und Konflikthafte Beziehungen
julia221501 Mar 6, 2024
6841e2e
Qulitäten in Ansichtseinstellungen
julia221501 Mar 17, 2024
0177828
Icons für Qualitäten
julia221501 Mar 18, 2024
88f9586
Pfeile für Support erstellt
julia221501 Mar 24, 2024
ddd8b86
Abstand Pfeile erhöht, Icon klickbar
julia221501 Mar 25, 2024
6838c6b
Filter für Support im Panel
julia221501 Apr 1, 2024
0ad1654
Filter weitergeführt
julia221501 Apr 2, 2024
294ff69
Ansicht Filter geändert
julia221501 Apr 14, 2024
66ba50d
Start Filter Support
julia221501 Apr 28, 2024
cd57679
Finish Filter Support
julia221501 Apr 29, 2024
cf35c5d
Merge branch 'main' into relationship_quality
julia221501 Aug 12, 2024
dc8d0a1
main merged und neue icons hinzugefügt
julia221501 Aug 12, 2024
2f8d225
ADD translation, and changed code for clearer structure and avoid red…
Eliasboss2006 Aug 29, 2024
cbcfe6e
left side of the form fixed, and no symbols in map when mode off
Eliasboss2006 Aug 29, 2024
1edcd51
ADD trnaslation, andd bug fixes
Eliasboss2006 Aug 29, 2024
375f0fc
styling and translation
Eliasboss2006 Aug 29, 2024
75fa609
Lint verwendet, Unterstützung von Anfang an übersetzt, Unterstützungs…
julia221501 Sep 20, 2024
49c55d2
Rechtschreibfehler ausgebessert
julia221501 Sep 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions src/components/AlteriEditForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,41 @@
</div>
</div>

<div v-if="showQuality" class="field is-horizontal">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

only alteri that are connected with ego (alterEdgeType = 1 or 2)

<div class="field-label">
<label class="label" for="chk-new-checkbox">{{ t("conflictual") }}</label>
</div>
<div class="field-body">
<label>
<input
id="chk-new-checkbox"
type="checkbox"
v-model="alterConflict"
/>
</label>
</div>
</div>

<div v-if="showQuality" style="margin-bottom: 1.5em;">
<div class="field is-horizontal" v-for="(label, key) in supportOptions" :key="key">
<div class="field-label is-normal">
<label class="label" style="width: 100px;">{{ t(label) }}</label>
</div>
<div class="field-body">
<div class="control">
<div class="select is-fullwidth">
<select v-model="supportValues[key]">
<option value="0">{{ t("nosupport") }}</option>
<option value="1">{{ t("isupport") }} {{ alter.name }}</option>
<option value="2">{{ alter.name }} {{ t("supportsme") }}</option>
<option value="3">{{ t("supporteachother") }}</option>
</select>
</div>
</div>
</div>
</div>
</div>

<div class="field">
<div class="control">
<textarea
Expand Down Expand Up @@ -265,6 +300,24 @@ export default defineComponent({

const selectedRoleLabel = ref(props.alter?.role);

const newCheckboxModel = ref(false);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unused -> remove


const supportOptions = ref({
emotional: "emotional",
instrumental: "instrumental",
informational: "informational",
social: "social",
linking: "linking",
});
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is a ref () necessary or can it be a constant?


const supportValues = ref({
emotional: accessor<number>("supportEmotional"),
instrumental: accessor<number>("supportMaterial"),
informational: accessor<number>("supportCognitive"),
social: accessor<number>("supportSocial"),
linking: accessor<number>("supportPractical"),
});

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ref() oder array of accessor's?

// name field is special because it must not be empty
// the data item is only used for validity check & never stored
const alterNameInUI = ref(props.alter?.name);
Expand Down Expand Up @@ -429,14 +482,17 @@ export default defineComponent({
addingNewAlter,
alterNameInUI,
alterRole,
newCheckboxModel,
localizedRole,
invalidName,
invalidPosition,
alterHuman: accessor<boolean>("human"),
alterGender: accessor<string>("currentGender"),
alterDeceased: accessor<boolean>("deceased"),
alterConflict: accessor<boolean>("conflict"),
alterEdgeType: accessor<number>("edgeType"),
isConnectable: computed(() => isConnectable(props.alter as Alter)),
showQuality: computed(() => store.state.session.qualityRelationship),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Modus Qualitäten als ViewSetting (in localstorage) oder in Session?

commitEdit,
focusRole,
blurRole,
Expand All @@ -448,6 +504,8 @@ export default defineComponent({
altername,
domButton,
SYMBOL_DECEASED,
supportOptions,
supportValues,
};
},
});
Expand Down
171 changes: 168 additions & 3 deletions src/components/NetworkMap.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,10 @@

<g v-if="connections">
<line
v-for="(mark, index) in connectionMarks"
v-for="(mark, index) in connectionMarks.filter(
(mark) =>
!emotional && !cognitive && !social && !material && !practical
)"
:key="'conn' + index"
:x1="mark.x1"
:y1="mark.y1"
Expand All @@ -86,7 +89,18 @@
/>
</g>

<g v-for="mark in alteriMarks" :key="mark.d.id">
<g
v-for="mark in alteriMarks.filter(
(mark) =>
(emotional && mark.d.supportEmotional >= 1) ||
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

computed

(cognitive && mark.d.supportCognitive >= 1) ||
(social && mark.d.supportSocial >= 1) ||
(material && mark.d.supportMaterial >= 1) ||
(practical && mark.d.supportPractical >= 1) ||
(!emotional && !cognitive && !social && !material && !practical)
)"
:key="mark.d.id"
>
<line
v-if="connections && mark.d.edgeType >= 1"
:class="{ select: mark.selected }"
Expand All @@ -95,6 +109,75 @@
:x2="mark.x"
:y2="mark.y"
:filter="mark.d.edgeType == 2 ? 'url(#dilate-and-xor)' : undefined"
:style="mark.d.conflict ? 'stroke: red' : 'stroke: #afafaf'"
/>
<marker
id="arrowheadMe"
markerWidth="10"
markerHeight="7"
refX="12"
refY="3.5"
orient="auto"
>
<polygon points="0 0, 10 3.5, 0 7" stroke="#afafaf" fill="none" />
</marker>
<marker
id="arrowheadAlter"
markerWidth="10"
markerHeight="7"
refX="25"
refY="3.5"
orient="auto"
>
<polygon points="10 0, 0 3.5, 10 7" stroke="#afafaf" fill="none" />
</marker>
<line
v-if="
connections &&
mark.d.edgeType >= 1 &&
(mark.d.supportPractical == 2 ||
mark.d.supportPractical == 3 ||
mark.d.supportSocial == 2 ||
mark.d.supportSocial == 3 ||
mark.d.supportMaterial == 2 ||
mark.d.supportMaterial == 3 ||
mark.d.supportEmotional == 2 ||
mark.d.supportEmotional == 3 ||
mark.d.supportCognitive == 2 ||
mark.d.supportCognitive == 3)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

computed

"
:class="{ select: mark.selected }"
:x1="egoCoords[0]"
:y1="egoCoords[1]"
:x2="mark.x"
:y2="mark.y"
:filter="mark.d.edgeType == 2 ? 'url(#dilate-and-xor)' : undefined"
:style="mark.d.conflict ? 'stroke: red' : 'stroke: #afafaf'"
marker-end="url(#arrowheadAlter)"
/>
<line
v-if="
connections &&
mark.d.edgeType >= 1 &&
(mark.d.supportPractical == 1 ||
mark.d.supportPractical == 3 ||
mark.d.supportSocial == 1 ||
mark.d.supportSocial == 3 ||
mark.d.supportMaterial == 1 ||
mark.d.supportMaterial == 3 ||
mark.d.supportEmotional == 1 ||
mark.d.supportEmotional == 3 ||
mark.d.supportCognitive == 1 ||
mark.d.supportCognitive == 3)
"
:class="{ select: mark.selected }"
:x1="egoCoords[0]"
:y1="egoCoords[1]"
:x2="mark.x"
:y2="mark.y"
:filter="mark.d.edgeType == 2 ? 'url(#dilate-and-xor)' : undefined"
:style="mark.d.conflict ? 'stroke: red' : 'stroke: #afafaf'"
marker-end="url(#arrowheadMe)"
/>
<text
v-if="alteriNames && useTextBG"
Expand Down Expand Up @@ -125,6 +208,71 @@
{{ showRole ? " / " + getRoleShort(mark.d.role) : "" }}
</text>
</g>
<g
v-for="mark in alteriMarks.filter(
(mark) =>
(emotional && mark.d.supportEmotional >= 1) ||
(cognitive && mark.d.supportCognitive >= 1) ||
(social && mark.d.supportSocial >= 1) ||
(material && mark.d.supportMaterial >= 1) ||
(practical && mark.d.supportPractical >= 1) ||
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

computed

(!emotional && !cognitive && !social && !material && !practical)
)"
:key="mark.d.id"
>
<!-- Hier werden die Icons für jedes Alter platziert -->
<template v-if="mark.d.supportEmotional >= 1 && showQuality">
<font-awesome-icon
icon="heart"
height="3"
width="3"
style="color: #afafaf"
:x="mark.x < 0 ? mark.x - 20 : mark.x + 2"
:y="mark.y < 0 ? mark.y : mark.y + 5"
/>
</template>
<template v-if="mark.d.supportMaterial >= 1 && showQuality">
<font-awesome-icon
icon="toolbox"
height="3"
width="3"
style="color: #afafaf"
:x="mark.x < 0 ? mark.x - 16 : mark.x + 6"
:y="mark.y < 0 ? mark.y : mark.y + 5"
/>
</template>
<template v-if="mark.d.supportCognitive >= 1 && showQuality">
<font-awesome-icon
icon="lightbulb"
height="3"
width="3"
style="color: #afafaf"
:x="mark.x < 0 ? mark.x - 12 : mark.x + 10"
:y="mark.y < 0 ? mark.y : mark.y + 5"
/>
</template>
<template v-if="mark.d.supportSocial >= 1 && showQuality">
<font-awesome-icon
icon="users"
height="3"
width="3"
style="color: #afafaf"
:x="mark.x < 0 ? mark.x - 8 : mark.x + 14"
:y="mark.y < 0 ? mark.y : mark.y + 5"
/>
</template>
<template v-if="mark.d.supportPractical >= 1 && showQuality">
<font-awesome-icon
icon="link"
height="3"
width="3"
style="color: #afafaf"
:x="mark.x < 0 ? mark.x - 4 : mark.x + 18"
:y="mark.y < 0 ? mark.y : mark.y + 5"
/>
</template>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

revise: a computed prepares an array of the icon="" strings, and use v-for here

</g>

<use
id="ego"
:href="'#' + egoShape"
Expand All @@ -139,7 +287,15 @@
<g class="brushParent"></g>
<g class="marksForegroundLayer">
<use
v-for="mark in alteriMarks"
v-for="mark in alteriMarks.filter(
(mark) =>
(emotional && mark.d.supportEmotional >= 1) ||
(cognitive && mark.d.supportCognitive >= 1) ||
(social && mark.d.supportSocial >= 1) ||
(material && mark.d.supportMaterial >= 1) ||
(practical && mark.d.supportPractical >= 1) ||
(!emotional && !cognitive && !social && !material && !practical)
)"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

computed

:key="mark.d.id"
:href="'#' + mark.shape"
:x="mark.x"
Expand Down Expand Up @@ -742,6 +898,11 @@ export default defineComponent({
egoShape: computed(() =>
shapeByGender(true, store.state.nwk.ego.currentGender)
),
emotional: computed(() => store.state.session.emotional),
cognitive: computed(() => store.state.session.cognitive),
social: computed(() => store.state.session.social),
material: computed(() => store.state.session.material),
practical: computed(() => store.state.session.practical),
isEditMode,
isConnectMode,
clickAlter,
Expand Down Expand Up @@ -777,6 +938,7 @@ export default defineComponent({
showComparisonSlider: computed(
() => store.state.session.nwkchange || store.state.session.nwkcomparison
),
showQuality: computed(() => store.state.session.qualityRelationship),
};
},
});
Expand Down Expand Up @@ -860,4 +1022,7 @@ line.select {
right: 2px;
bottom: 1.5rem;
}
.fa {
display: flex;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wird das wirklich verwendet?

}
</style>
Loading