Skip to content

Commit

Permalink
Made ConceptMapAuthoringController extend ComponentAuthoringController.
Browse files Browse the repository at this point in the history 
#2701
  • Loading branch information
@geoffreykwan
geoffreykwan committed Oct 22, 2020
1 parent 197c2e1 commit 421a7fd
Show file tree
Hide file tree
Showing 5 changed files with 88 additions and 322 deletions.
1 change: 0 additions & 1 deletion src/main/webapp/wise5/components/componentAuthoringController.ts
View file
Expand Up @@ -292,7 +292,6 @@ export abstract class ComponentAuthoringController {
}
if (numberOfAllowedComponents === 1) {
connectedComponent.componentId = allowedComponent.id;
connectedComponent.type = 'importWork';
}
this.automaticallySetConnectedComponentTypeIfPossible(connectedComponent);
}
Expand Down
188 changes: 26 additions & 162 deletions src/main/webapp/wise5/components/conceptMap/authoring.html
View file
Expand Up @@ -51,7 +51,7 @@ <h6>{{ ::'advancedAuthoringOptions' | translate }}</h6>
ng-model='rule.type'
ng-true-value='"link"'
ng-false-value='"node"'
ng-change='conceptMapController.authoringRuleLinkCheckboxClicked($index)'/>
ng-change='conceptMapController.ruleLinkCheckboxClicked($index)'/>
<select ng-model='rule.linkLabel'
ng-change='conceptMapController.authoringViewComponentChanged()'
ng-if='rule.type == "link"'>
Expand All @@ -69,22 +69,22 @@ <h6>{{ ::'advancedAuthoringOptions' | translate }}</h6>
<option ng-repeat='node in conceptMapController.authoringComponentContent.nodes'
value='{{node.label}}'>{{node.label}}</option>
</select>
<button ng-click="conceptMapController.authoringViewMoveRuleUpButtonClicked($index)">{{ ::'UP' | translate }}</button>
<button ng-click="conceptMapController.authoringViewMoveRuleDownButtonClicked($index)">{{ ::'DOWN' | translate }}</button>
<button ng-click='conceptMapController.authoringViewRuleDeleteButtonClicked($index)'>{{ ::'DELETE' | translate }}</button>
<button ng-click="conceptMapController.moveRuleUpButtonClicked($index)">{{ ::'UP' | translate }}</button>
<button ng-click="conceptMapController.moveRuleDownButtonClicked($index)">{{ ::'DOWN' | translate }}</button>
<button ng-click='conceptMapController.ruleDeleteButtonClicked($index)'>{{ ::'DELETE' | translate }}</button>
<br/>
<div style='text-indent: 80px'>
<button ng-click="conceptMapController.authoringViewAddCategoryToRule(rule)">{{ ::'conceptMap.addCategoryOptional' | translate }}</button>
<button ng-click="conceptMapController.addCategoryToRule(rule)">{{ ::'conceptMap.addCategoryOptional' | translate }}</button>
<span ng-repeat='category in rule.categories track by $index'>
<input ng-model='rule.categories[$index]'
ng-change='conceptMapController.authoringViewComponentChanged()'
ng-model-options='{ debounce: 1000 }'/>
<button ng-click="conceptMapController.authoringViewDeleteCategoryFromRule(rule, $index)">x</button>
<button ng-click="conceptMapController.deleteCategoryFromRule(rule, $index)">x</button>
</span>
</div>
<br/>
</div>
<button ng-click='conceptMapController.authoringAddRule()'>{{ ::'conceptMap.addRule' | translate }}</button>
<button ng-click='conceptMapController.addRule()'>{{ ::'conceptMap.addRule' | translate }}</button>
<br/>
<br/>
{{ ::'conceptMap.customRuleEvaluator' | translate }}
Expand Down Expand Up @@ -176,7 +176,7 @@ <h6>{{ ::'advancedAuthoringOptions' | translate }}</h6>
{{ ::'CONNECTED_COMPONENTS' | translate }}
</label>
<md-button class='topButton md-raised md-primary'
ng-click='conceptMapController.authoringAddConnectedComponent()'>
ng-click='conceptMapController.addConnectedComponent()'>
<md-icon>add</md-icon>
<md-tooltip md-direction='top'
class='projectButtonTooltip'>
Expand All @@ -191,7 +191,7 @@ <h6>{{ ::'advancedAuthoringOptions' | translate }}</h6>
<md-input-container style='margin-right: 20; width: 300;'>
<label>{{ ::'step' | translate }}</label>
<md-select ng-model='connectedComponent.nodeId'
ng-change='conceptMapController.authoringConnectedComponentNodeIdChanged(connectedComponent)'
ng-change='conceptMapController.connectedComponentNodeIdChanged(connectedComponent)'
style='width: 300'>
<md-option ng-repeat='item in conceptMapController.idToOrder | toArray | orderBy : "order"'
value='{{item.$key}}'
Expand All @@ -203,7 +203,7 @@ <h6>{{ ::'advancedAuthoringOptions' | translate }}</h6>
<md-input-container style='margin-right: 20; width: 300;'>
<label>{{ ::'component' | translate }}</label>
<md-select ng-model='connectedComponent.componentId'
ng-change='conceptMapController.authoringConnectedComponentComponentIdChanged(connectedComponent)'
ng-change='conceptMapController.connectedComponentComponentIdChanged(connectedComponent)'
style='width: 300'>
<md-option ng-repeat='(componentIndex, component) in conceptMapController.getComponentsByNodeId(connectedComponent.nodeId)'
value='{{component.id}}'
Expand All @@ -218,7 +218,7 @@ <h6>{{ ::'advancedAuthoringOptions' | translate }}</h6>
<md-input-container style='margin-right: 20; width: 200;'>
<label>{{ ::'type' | translate }}</label>
<md-select ng-model='connectedComponent.type'
ng-change='conceptMapController.authoringConnectedComponentTypeChanged(connectedComponent)'
ng-change='conceptMapController.connectedComponentTypeChanged(connectedComponent)'
style='width: 200'>
<md-option value='importWork'>
{{ ::'importWork' | translate }}
Expand All @@ -231,19 +231,19 @@ <h6>{{ ::'advancedAuthoringOptions' | translate }}</h6>
<span flex></span>
<md-input-container style='margin-left: 20;'>
<md-button class='topButton md-raised md-primary'
ng-click='conceptMapController.authoringDeleteConnectedComponent($index)'>
ng-click='conceptMapController.deleteConnectedComponent($index)'>
<md-icon>delete</md-icon>
<md-tooltip md-direction='top'
class='projectButtonTooltip'>
{{ ::'DELETE' | translate }}
</md-tooltip>
</md-button>
</md-input-container>
<div ng-if='conceptMapController.authoringGetConnectedComponentType(connectedComponent) == "Draw" || conceptMapController.authoringGetConnectedComponentType(connectedComponent) == "Embedded" || conceptMapController.authoringGetConnectedComponentType(connectedComponent) == "Graph" || conceptMapController.authoringGetConnectedComponentType(connectedComponent) == "Label" || conceptMapController.authoringGetConnectedComponentType(connectedComponent) == "Table"' flex>
<div ng-if='conceptMapController.getConnectedComponentType(connectedComponent) == "Draw" || conceptMapController.getConnectedComponentType(connectedComponent) == "Embedded" || conceptMapController.getConnectedComponentType(connectedComponent) == "Graph" || conceptMapController.getConnectedComponentType(connectedComponent) == "Label" || conceptMapController.getConnectedComponentType(connectedComponent) == "Table"' flex>
<md-input-container style='margin-right: 20;'>
<md-checkbox class='md-primary'
ng-model='connectedComponent.importWorkAsBackground'
ng-change='conceptMapController.authoringImportWorkAsBackgroundClicked(connectedComponent)'
ng-change='conceptMapController.importWorkAsBackgroundClicked(connectedComponent)'
ng-disabled='true'>
{{ ::'importWorkAsBackground' | translate }}
</md-checkbox>
Expand Down Expand Up @@ -391,7 +391,7 @@ <h6>{{ ::'advancedAuthoringOptions' | translate }}</h6>
<div layout='row'>
<h6>{{ ::'conceptMap.nodes' | translate }}</h6>
<md-button class='topButton md-raised md-primary'
ng-click='conceptMapController.authoringViewAddNode()'>
ng-click='conceptMapController.addNode()'>
<md-icon>add</md-icon>
<md-tooltip md-direction='top'
class='projectButtonTooltip'>
Expand Down Expand Up @@ -442,23 +442,23 @@ <h6>{{ ::'conceptMap.nodes' | translate }}</h6>
ng-model-options='{ debounce: 1000 }'/>
</md-input-container>
<md-button class='regularButton md-raised md-primary'
ng-click="conceptMapController.authoringViewMoveNodeUpButtonClicked($index)">
ng-click="conceptMapController.moveNodeUpButtonClicked($index)">
<md-icon>arrow_upward</md-icon>
<md-tooltip md-direction='top'
class='projectButtonTooltip'>
{{ ::'UP' | translate}}
</md-tooltip>
</md-button>
<md-button class='regularButton md-raised md-primary'
ng-click="conceptMapController.authoringViewMoveNodeDownButtonClicked($index)">
ng-click="conceptMapController.moveNodeDownButtonClicked($index)">
<md-icon>arrow_downward</md-icon>
<md-tooltip md-direction='top'
class='projectButtonTooltip'>
{{ ::'DOWN' | translate}}
</md-tooltip>
</md-button>
<md-button class='regularButton md-raised md-primary'
ng-click='conceptMapController.authoringViewNodeDeleteButtonClicked($index)'>
ng-click='conceptMapController.nodeDeleteButtonClicked($index)'>
<md-icon>delete</md-icon>
<md-tooltip md-direction='top'
class='projectButtonTooltip'>
Expand All @@ -469,7 +469,7 @@ <h6>{{ ::'conceptMap.nodes' | translate }}</h6>
<div layout='row'>
<h6>{{ ::'conceptMap.links' | translate }}</h6>
<md-button class='topButton md-raised md-primary'
ng-click='conceptMapController.authoringViewAddLink()'>
ng-click='conceptMapController.addLink()'>
<md-icon>add</md-icon>
<md-tooltip md-direction='top'
class='projectButtonTooltip'>
Expand Down Expand Up @@ -497,23 +497,23 @@ <h6>{{ ::'conceptMap.links' | translate }}</h6>
ng-model-options='{ debounce: 1000 }'/>
</md-input-container>
<md-button class='regularButton md-raised md-primary'
ng-click="conceptMapController.authoringViewMoveLinkUpButtonClicked($index)">
ng-click="conceptMapController.moveLinkUpButtonClicked($index)">
<md-icon>arrow_upward</md-icon>
<md-tooltip md-direction='top'
class='projectButtonTooltip'>
{{ ::'UP' | translate}}
</md-tooltip>
</md-button>
<md-button class='regularButton md-raised md-primary'
ng-click="conceptMapController.authoringViewMoveLinkDownButtonClicked($index)">
ng-click="conceptMapController.moveLinkDownButtonClicked($index)">
<md-icon>arrow_downward</md-icon>
<md-tooltip md-direction='top'
class='projectButtonTooltip'>
{{ ::'DOWN' | translate}}
</md-tooltip>
</md-button>
<md-button class='regularButton md-raised md-primary'
ng-click='conceptMapController.authoringViewLinkDeleteButtonClicked($index)'>
ng-click='conceptMapController.linkDeleteButtonClicked($index)'>
<md-icon>delete</md-icon>
<md-tooltip md-direction='top'
class='projectButtonTooltip'>
Expand All @@ -539,147 +539,11 @@ <h6>{{ ::'conceptMap.links' | translate }}</h6>
</md-button>
</div>
</div>
<div ng-style='{"border": "5px solid black", "padding": "20px"}'>
<div>
<div ng-style='{"border": "5px solid black"}'>
<div ng-style='{"padding-top": "20px", "padding-left": "20px"}'>
<h5>{{ ::'studentPreview' | translate }}</h5>
</div>
<div>
<div>
<md-input-container class='input-container md-block input-container--open-response input-container--component md-no-float'>
<label class='input-label md-no-float'
ng-disabled='conceptMapController.isDisabled'
ng-if='conceptMapController.isPromptVisible'>
<compile data='conceptMapController.getPrompt()'></compile>
</label>
<div class='input-wrapper'>
<md-button class='md-raised md-primary'
ng-click='conceptMapController.resetConceptMap()'>
{{ ::'RESET' | translate }}
</md-button>
<md-button class='md-accent'
ng-click='conceptMapController.snip($event)'
ng-if='::conceptMapController.isAddToNotebookEnabled()'>
<md-icon> note_add </md-icon> {{ ::'ADD_TO_NOTEBOOK' | translate:{label:tableController.notebookConfig.label} }}
</md-button>
<div id='{{conceptMapController.conceptMapContainerId}}'
style='display: flex'>
<div id='{{conceptMapController.selectNodeBarId}}'
style='flex: 10; border: 1px solid black'>
<div ng-repeat='availableNode in conceptMapController.availableNodes'
style='text-align: center; border: 1px solid black'>
<img ng-src='{{availableNode.fileName}}'
style='cursor: pointer'
ng-mousedown='conceptMapController.selectNode($event, availableNode)'
width='{{availableNode.width}}'
height='{{availableNode.height}}'/>
<br/>
<span>{{availableNode.name}}</span>
</div>
</div>
<div style='flex: 90'>
<svg id='{{conceptMapController.svgId}}'
width='800'
height='600'
ng-style='{"background-image": conceptMapController.background != null ? "url(" + conceptMapController.background + ")" : "",
"background-size": conceptMapController.backgroundSize,
"background-repeat": "no-repeat",
"border": "1px solid black",
"-moz-user-select": "none",
"-webkit-user-select": "none",
"-ms-user-select":"none",
"user-select":"none",
"-o-user-select":"none"}'>
</svg>
</div>
<div ng-if='conceptMapController.displayLinkTypeChooserModalOverlay'
ng-style='conceptMapController.linkTypeChooserModalOverlayStyle'>
</div>
<div container-width='conceptMapController.modalWidth'
container-height='conceptMapController.modalHeight'
ng-if='conceptMapController.displayLinkTypeChooser'
class='ng-modal'
ng-style='conceptMapController.linkTypeChooserStyle'>
<div style='display: inline-block;'>
<span>{{conceptMapController.getLinksTitle()}}</span>
</div>
<md-radio-group ng-model='conceptMapController.selectedLinkType'
ng-change='conceptMapController.studentDataChanged()'>
<div ng-repeat='link in conceptMapController.availableLinks'>
<md-radio-button class='md-primary'
ng-value='link.id'
ng-click='conceptMapController.isDisabled || conceptMapController.linkTypeSelected(link)'
ng-disabled='conceptMapController.isDisabled'
style='display: inline-block; margin: 8px;'>
<div style='background-color: {{link.color}}; width: 30px; height: 15px; display: inline-block; margin-right: 4px'></div>
<span>
<compile data='link.label'></compile>
</span>
</md-radio-button>
</div>
</md-radio-group>
<div style='display: flex'>
<div style='margin-right: auto;'><md-button class='md-primary md-button md-raised' ng-click='conceptMapController.cancelLinkTypeChooser()'>{{ ::'CANCEL' | translate }}</md-button></div>
<div style='margin-right: auto;'><md-button class='md-primary md-button md-raised' ng-click='conceptMapController.linkDeleteButtonClicked($event, conceptMapController.highlightedElement)'>{{ ::'DELETE' | translate }}</md-button></div>
</div>
</div>
</div>
<div id='{{conceptMapController.feedbackContainerId}}'></div>
</div>
</md-input-container>
</div>
</div>
<div class='component__actions'
ng-if='conceptMapController.isStudentAttachmentEnabled'
layout='row'
layout-wrap='true'>
<div class='component__add-attachment'>
<md-button class='md-accent'
ng-click='nodeController.showStudentAssets($event, component.id, conceptMapController.isDisabled)'>
<md-icon>image</md-icon>
<span>{{ ::'conceptMap.addFile' | translate }}</span>
</md-button>
</div>
<div class='component__attachment'
ng-repeat='attachment in conceptMapController.attachments'>
<img ng-src='{{attachment.iconURL}}'
class='component__attachment__content' />
<md-button ng-if='!conceptMapController.isDisabled'
class='component__attachment__delete'
ng-click='conceptMapController.removeAttachment(attachment)'
title='Remove file'>
<md-icon>cancel</md-icon>
</md-button>
</div>
</div>
<div ng-if='conceptMapController.isSaveButtonVisible || conceptMapController.isSubmitButtonVisible'
class='component__actions'
layout='row'
layout-align='start center'>
<md-button class='md-primary md-raised'
ng-class='{"md-raised": !conceptMapController.isSubmitButtonVisible}'
ng-click='conceptMapController.saveButtonClicked()'
ng-disabled='conceptMapController.isDisabled || !conceptMapController.isDirty'
ng-if='conceptMapController.isSaveButtonVisible'
aria-label='Save'
translate='SAVE'>
</md-button>
<md-button class='md-raised md-primary'
ng-click='conceptMapController.submitButtonClicked()'
ng-disabled='conceptMapController.isSubmitButtonDisabled || conceptMapController.isDisabled || !conceptMapController.isSubmitDirty'
ng-if='conceptMapController.isSubmitButtonVisible'
aria-label='Submit'
translate='SUBMIT'>
</md-button>
<span ng-if='conceptMapController.saveMessage.text'
class='component__actions__info md-caption'>
{{conceptMapController.saveMessage.text}}
<span class='component__actions__more'>
<md-tooltip md-direction='top'>
{{ conceptMapController.saveMessage.time | amDateFormat:'ddd, MMM D YYYY, h:mm a' }}
</md-tooltip>
<span am-time-ago='conceptMapController.saveMessage.time'></span>
</span>
</span>
</div>
<preview-component component-content='conceptMapController.componentContent'
node-id='{{conceptMapController.nodeId}}'/>
</div>
</div>

0 comments on commit 421a7fd

Please sign in to comment.