feature-model-edit.component.html 5.47 KB
Newer Older
1
2
3
4
<ng-template #deleteModal>
  <app-delete-feature-confirm
    [feature]="modalFeature"
    (deletionResult)="deleteFeature($event)"
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
5
6
    (closeModal)="closeModal()"
  ></app-delete-feature-confirm>
7
8
9
10
11
12
13
</ng-template>

<ng-template #dependencyModal>
  <app-cross-tree-relationship-modal
    [featureModel]="featureModel"
    [feature]="modalFeature"
    (closeModal)="closeModal()"
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
14
15
16
17
    (removeRelationship)="
      removeRelationship($event.type, $event.fromFeatureId, $event.toFeatureId)
    "
  ></app-cross-tree-relationship-modal>
18
19
20
21
</ng-template>

<ng-template #updateModal>
  <div class="modal-header">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
22
23
24
25
26
27
28
    <h4 class="modal-title" id="modal-basic-title">{{ modalFeature.name }}</h4>
    <button
      type="button"
      class="close"
      aria-label="Close"
      (click)="closeModal()"
    >
29
30
31
32
33
34
35
36
37
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div class="text-muted pt-3">
      <app-feature-form
        [feature]="modalFeature"
        [disabledSubfeatures]="modalSubfeatureIds"
        [featureList]="featureList"
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
38
39
        (submitFeatureForm)="updateFeature($event)"
      ></app-feature-form>
40
41
42
43
    </div>
  </div>
</ng-template>

Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
44
<div class="my-3 alert alert-info container" role="alert">
45
  <p>View and edit the feature tree. You can:</p>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
46
  <ul>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
47
48
    <li>
      at the bottom of the page
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
49
50
51
52
53
54
      <ul>
        <li>Check for problems (e.g. inconsistencies)</li>
        <li>Add new features</li>
        <li>Add Cross-Tree Relationships</li>
      </ul>
    </li>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
55
56
    <li>
      in the feature tree
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
57
58
      <ul>
        <li>List and remove Cross-Tree Relationships</li>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
59
60
61
62
        <li>
          Update features (e.g. change name/description, Tree relationship (XOR,
          OR), &hellip;)
        </li>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
63
64
65
66
67
        <li>Remove features</li>
      </ul>
    </li>
  </ul>
</div>
68

Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
69
70
<!-- List of Features -->
<div class="my-3 p-3 bg-white rounded shadow-sm">
71
  <h6 class="border-bottom border-gray pb-2 mb-0">Feature tree</h6>
72

Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
73
74
75
76
77
78
79
  <div class="row">
    <div class="col-sm-12">
      <app-feature-tree
        *ngIf="featureModel && featureModel.features"
        (openDependenciesEmitter)="openDependenciesModal($event)"
        (updateFeatureEmitter)="updateFeatureModal($event)"
        (deleteFeatureEmitter)="deleteFeatureModal($event)"
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
80
81
82
83
        [features]="featureModel.features"
        [problemFeatureIds]="problemFeatureIds"
        [supportsHurtsProblemFeatureIds]="supportsHurtsProblemFeatureIds"
      >
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
84
      </app-feature-tree>
85
    </div>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
86
  </div>
87

Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
88
89
  <div class="row">
    <div class="col-4"><strong>Legend:</strong></div>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
90
91
92
    <div class="col-4">
      <i class="fa fa-circle" aria-hidden="true"></i
      ><span class="sr-only">mandatory</span>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
93
      Mandatory Feature
94
    </div>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
95
96
97
    <div class="col-4">
      <i class="fa fa-circle-o" aria-hidden="true"></i
      ><span class="sr-only">optional</span>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
98
      Optional Feature
99
    </div>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
100
101
102
  </div>
  <div class="row">
    <div class="col-4">&nbsp;</div>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
103
104
105
    <div class="col-4">
      <i class="fa fa-angle-up" aria-hidden="true"></i
      ><span class="sr-only">xor subfeatures</span>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
106
      Alternative (Xor)
107
    </div>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
108
109
110
    <div class="col-4">
      <i class="fa fa-caret-up" aria-hidden="true"></i
      ><span class="sr-only">or subfeatures</span>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
111
112
113
114
115
      Or
    </div>
  </div>
  <div class="row" *ngIf="problems">
    <div class="col-4">&nbsp;</div>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
116
117
118
119
120
121
    <div class="col-4">
      <span class="text-warning">Supports/Hurts error (see below)</span>
    </div>
    <div class="col-4">
      <span class="text-danger">Instantiation errors (see below)</span>
    </div>
122
  </div>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
123
</div>
124

Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
125
126
127
128
<div class="my-3 p-3 bg-white rounded shadow-sm">
  <h6 class="border-bottom border-gray pb-2 mb-0">Check for problems</h6>
  <div class="pt-3">
    <div>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
129
130
131
132
133
      <button
        class="btn btn-sm btn-dark btn-block"
        *ngIf="!problems"
        (click)="checkInstantiationPossible()"
      >
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
134
135
        Activate check
      </button>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
136
137
138
139
140
      <button
        class="btn btn-sm btn-dark btn-block"
        *ngIf="problems"
        (click)="deactivateInstantiationCheck()"
      >
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
141
142
143
144
        Deactivate check
      </button>
    </div>
    <div class="mt-4" *ngIf="problems">
145
      <!-- TODO: maybe rename -->
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
146
147
148
149
      <h6>Instantiation problems:</h6>
      <p *ngIf="problems.length === 0">No problems detected.</p>
      <ul *ngIf="problems.length > 0">
        <li *ngFor="let problem of problems">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
150
          {{ problem }}
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
151
152
153
154
155
156
157
158
        </li>
      </ul>
    </div>
    <div class="mt-4" *ngIf="supportsHurtsProblems">
      <h6>Supports/Hurts problems:</h6>
      <p *ngIf="supportsHurtsProblems.length === 0">No problems detected.</p>
      <ul *ngIf="supportsHurtsProblems.length > 0">
        <li *ngFor="let problem of supportsHurtsProblems">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
159
          {{ problem }}
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
160
161
        </li>
      </ul>
162
163
    </div>
  </div>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
164
</div>
165

Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
166
167
168
169
170
171
172
<!-- Add a Feature-->
<div class="my-3 p-3 bg-white rounded shadow-sm">
  <h6 class="border-bottom border-gray pb-2 mb-0">Add Feature</h6>
  <div class="text-muted pt-3">
    <app-feature-form
      submitButtonText="Add Feature"
      [featureList]="featureList"
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
173
174
      (submitFeatureForm)="insertFeature($event)"
    ></app-feature-form>
175
  </div>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
176
</div>
177

Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
178
179
<!-- Add a Relationship-->
<div class="my-3 p-3 bg-white rounded shadow-sm">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
180
181
182
  <h6 class="border-bottom border-gray pb-2 mb-0">
    Add Cross-Tree Relationship
  </h6>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
183
  <div class="text-muted pt-3">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
184
185
    <app-cross-tree-relationship-form
      [featureList]="featureList"
186
      [relationshipTypes]="featureModel.definition.relationshipTypes"
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
187
188
      (submitRelationshipForm)="addRelationship($event)"
    ></app-cross-tree-relationship-form>
189
  </div>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
190
</div>