Mercurial > gemma
diff client/src/components/map/fairway/Profiles.vue @ 1480:9b81ac91a43e
fix: linting
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 04 Dec 2018 10:02:31 +0100 |
parents | bb47531bdd22 |
children | cff2cf1f3038 |
line wrap: on
line diff
--- a/client/src/components/map/fairway/Profiles.vue Tue Dec 04 09:56:11 2018 +0100 +++ b/client/src/components/map/fairway/Profiles.vue Tue Dec 04 10:02:31 2018 +0100 @@ -1,5 +1,10 @@ <template> - <div :class="['box ui-element rounded bg-white text-nowrap', { expanded: showProfiles }]"> + <div + :class="[ + 'box ui-element rounded bg-white text-nowrap', + { expanded: showProfiles } + ]" + > <div style="width: 20rem"> <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> <font-awesome-icon icon="chart-area" class="mr-2"></font-awesome-icon> @@ -10,12 +15,14 @@ @click="$store.commit('application/showProfiles', false)" ></font-awesome-icon> </h6> - <div class="d-flex flex-column p-3 flex-grow-1 text-left position-relative"> + <div + class="d-flex flex-column p-3 flex-grow-1 text-left position-relative" + > <div class="loading d-flex justify-content-center align-items-center" v-if="surveysLoading || profileLoading" > - <font-awesome-icon icon="spinner" spin/> + <font-awesome-icon icon="spinner" spin /> </div> <select @click="moveToBottleneck" @@ -29,7 +36,8 @@ v-for="bn in bottlenecks" :key="bn.properties.name" :value="bn.properties.name" - >{{ bn.properties.name }}</option> + >{{ bn.properties.name }}</option + > </select> <div v-if="selectedBottleneck"> <div class="d-flex mt-2"> @@ -37,60 +45,79 @@ <small class="text-muted"> <translate>Sounding Result</translate>: </small> - <select v-model="selectedSurvey" class="form-control form-control-sm"> + <select + v-model="selectedSurvey" + class="form-control form-control-sm" + > <option v-for="survey in surveys" :key="survey.date_info" :value="survey" - >{{ survey.date_info }}</option> + >{{ survey.date_info }}</option + > </select> </div> - <div class="flex-fill ml-3" v-if="selectedSurvey && surveys.length > 1"> + <div + class="flex-fill ml-3" + v-if="selectedSurvey && surveys.length > 1" + > <small class="text-muted mt-1"> <translate>Compare with</translate>: </small> - <select v-model="additionalSurvey" class="form-control form-control-sm"> + <select + v-model="additionalSurvey" + class="form-control form-control-sm" + > <option :value="null">None</option> <option v-for="survey in additionalSurveys" :key="survey.date_info" :value="survey" - >{{ survey.date_info }}</option> + >{{ survey.date_info }}</option + > </select> </div> </div> - <hr class="w-100 mb-0"> + <hr class="w-100 mb-0" /> <small class="text-muted d-block mt-2"> <translate>Saved cross profiles</translate>: </small> <div class="d-flex"> <select - :class="['form-control form-control-sm flex-fill', { 'rounded-left-only': selectedCut }]" + :class="[ + 'form-control form-control-sm flex-fill', + { 'rounded-left-only': selectedCut } + ]" v-model="selectedCut" > <option></option> - <option v-for="(cut, index) in previousCuts" :value="cut" :key="index">{{ cut.label }}</option> + <option + v-for="(cut, index) in previousCuts" + :value="cut" + :key="index" + >{{ cut.label }}</option + > </select> <button class="btn btn-sm btn-danger input-button-right" @click="confirmDeleteSelectedCut = true" v-if="selectedCut && !confirmDeleteSelectedCut" > - <font-awesome-icon icon="trash"/> + <font-awesome-icon icon="trash" /> </button> <button class="btn btn-sm btn-info rounded-0" @click="confirmDeleteSelectedCut = false" v-if="selectedCut && confirmDeleteSelectedCut" > - <font-awesome-icon icon="times"/> + <font-awesome-icon icon="times" /> </button> <button class="btn btn-sm btn-danger input-button-right" @click="deleteSelectedCut" v-if="selectedCut && confirmDeleteSelectedCut" > - <font-awesome-icon icon="check"/> + <font-awesome-icon icon="check" /> </button> </div> <small class="text-muted d-block mt-2"> @@ -101,31 +128,25 @@ class="form-control form-control-sm pr-5" placeholder="Lat,Lon,Lat,Lon" v-model="coordinatesInput" - > + /> <button class="btn btn-sm btn-info position-absolute input-button-right" @click="applyManualCoordinates" style="top: 0; right: 0;" v-if="coordinatesInputIsValid" > - <font-awesome-icon icon="check"/> + <font-awesome-icon icon="check" /> </button> </div> <small class="d-flex text-left mt-2" v-if="startPoint && endPoint"> <div class="text-nowrap mr-3"> - <b> - <translate>Start</translate>: - </b> - <br> - Lat: {{ startPoint[1] }} - <br> + <b> <translate>Start</translate>: </b> <br /> + Lat: {{ startPoint[1] }} <br /> Lon: {{ startPoint[0] }} </div> <div class="text-nowrap"> - <b>End:</b> - <br> - Lat: {{ endPoint[1] }} - <br> + <b>End:</b> <br /> + Lat: {{ endPoint[1] }} <br /> Lon: {{ endPoint[0] }} </div> <button @@ -133,19 +154,29 @@ v-clipboard:success="onCopyCoordinates" class="btn btn-info btn-sm ml-auto mt-auto" > - <font-awesome-icon icon="copy"/> + <font-awesome-icon icon="copy" /> </button> </small> <div class="d-flex mt-3"> - <div class="pr-3 w-50" v-if="startPoint && endPoint && !selectedCut"> - <button class="btn btn-info btn-sm w-100" @click="showLabelInput = !showLabelInput"> - <font-awesome-icon :icon="showLabelInput ? 'times' : 'check'"/> + <div + class="pr-3 w-50" + v-if="startPoint && endPoint && !selectedCut" + > + <button + class="btn btn-info btn-sm w-100" + @click="showLabelInput = !showLabelInput" + > + <font-awesome-icon :icon="showLabelInput ? 'times' : 'check'" /> {{ showLabelInput ? "Cancel" : "Save" }} </button> </div> - <div :class="startPoint && endPoint && !selectedCut ? 'w-50' : 'w-100'"> + <div + :class="startPoint && endPoint && !selectedCut ? 'w-50' : 'w-100'" + > <button class="btn btn-info btn-sm w-100" @click="toggleCutTool"> - <font-awesome-icon :icon="cutTool && cutTool.getActive() ? 'times' : 'plus'"></font-awesome-icon> + <font-awesome-icon + :icon="cutTool && cutTool.getActive() ? 'times' : 'plus'" + ></font-awesome-icon> {{ cutTool && cutTool.getActive() ? "Cancel" : "New" }} </button> </div> @@ -155,14 +186,17 @@ <translate>Enter label for cross profile</translate>: </small> <div class="position-relative"> - <input class="form-control form-control-sm pr-5" v-model="cutLabel"> + <input + class="form-control form-control-sm pr-5" + v-model="cutLabel" + /> <button class="btn btn-sm btn-info position-absolute input-button-right" @click="saveCut" v-if="cutLabel" style="top: 0; right: 0;" > - <font-awesome-icon icon="check"/> + <font-awesome-icon icon="check" /> </button> </div> </div>