Добавление и выбор паттернов

This commit is contained in:
saber-nyan 2019-11-25 19:32:38 +03:00
parent 00f3eff447
commit bc0156211b
No known key found for this signature in database
GPG Key ID: 7B069E9C295E6B4A
5 changed files with 193 additions and 15 deletions

View File

@ -17,6 +17,7 @@
<Settings/>
<AddService @serviceAddComplete="$refs.navbar.updateServices()"/>
<EditService @serviceEditComplete="$refs.navbar.updateServices()"/>
<AddPattern/>
</div>
</template>
@ -25,9 +26,11 @@
import Settings from './views/Settings';
import AddService from './views/AddService';
import EditService from './views/EditService';
import AddPattern from './views/AddPattern';
export default {
components: {
AddPattern,
AddService,
EditService,
Settings,
@ -127,6 +130,16 @@
opacity: 0;
}
/* Patterns dropdown fix */
/*noinspection CssUnusedSymbol*/
.dropdown-menu.show {
position: fixed !important;
/*transform: translate3d(15px, 38px, 0) !important;*/
transform: none !important;
left: 15px !important;
top: 38px !important;
}
[role="main"] {
padding-top: 55px; /* Space for fixed navbar */
}

View File

@ -1,9 +1,11 @@
<template>
<nav class="navbar navbar-dark navbar-expand fixed-top bg-dark flex-md-nowrap p-0 shadow">
<div class="navbar-brand col-sm-3 mr-0" style="cursor: pointer;">
Паттерны
<i class="fas fa-angle-down" style="margin-left: 0.5em"/>
</div>
<!-- <div class="navbar-brand col-sm-3 mr-0" style="cursor: pointer;">-->
<!-- Паттерны-->
<!-- <i class="fas fa-angle-down" style="margin-left: 0.5em"/>-->
<!-- </div>-->
<PatternsDropdown/>
<div class="navbar-collapse collapse">
<ul class="navbar-nav px-3 mr-auto">
@ -32,6 +34,7 @@
<script>
import NavbarService from './NavbarService';
import PatternsDropdown from './PatternsDropdown';
export default {
name: 'Navbar',
@ -65,6 +68,7 @@
},
},
components: {
PatternsDropdown,
NavbarService,
},
};
@ -84,15 +88,6 @@
color: #FFF;
}
.navbar-brand {
padding-top: .5rem;
padding-bottom: .5rem;
font-size: 1rem;
background-color: rgba(0, 0, 0, .25);
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}
nav {
overflow-x: auto;
}
@ -112,5 +107,4 @@
::-webkit-scrollbar-thumb {
background: #C1C1C1
}
</style>

View File

@ -44,7 +44,7 @@
});
},
base64ToHtml(in_) {
return this.escapeHtml(atob(in_)).split('\n').join('<br/>');
return this.escapeHtml(atob(in_)).split('\n').join('<br/>'); // Replace all \n to <br/>
},
},
};

View File

@ -0,0 +1,63 @@
<template>
<b-dropdown no-flip text="Паттерны" block variant="dark" class="col-sm-3 mr-0">
<li role="presentation" style="padding-left: 0.5em; padding-right: 0.5em;">
<button role="menuitem" type="button" class="btn btn-sm btn-primary btn-block"
@click.stop.prevent="showAddService">
<i class="fas fa-plus"/>
</button>
</li>
<b-dropdown-divider/>
<b-dropdown-item-button v-for="pattern in patterns"
:key="pattern.id" @click.stop.prevent="openPattern(pattern.id)">
<strong :style="`color: ${pattern.color};`">{{ pattern.name }}</strong>:
<code>{{ pattern.regex ? `/${pattern.value}/` : `'${pattern.value}'` }}</code>;
search
<template v-if="pattern.type === 'BOTH'">anywhere</template>
<template v-else-if="pattern.type === 'INPUT'">in request</template>
<template v-else>in response</template>
</b-dropdown-item-button>
</b-dropdown>
</template>
<script>
export default {
name: 'PatternsDropdown',
data() {
return {
patterns: Array(),
};
},
mounted() {
this.updatePatterns();
},
methods: {
showAddService() {
this.$bvModal.show('addPatternModal');
},
updatePatterns() {
this.$http.get('pattern/')
.then(r => this.patterns = r.data)
.catch(e => {
this.$bvToast.toast(`Не удалось загрузить паттерны: ${e}`, {
title: 'Сбой',
variant: 'danger',
});
console.error('Failed to load patterns:', e);
});
},
openPattern(patternId) {
console.debug('Opening pattern w/ id', patternId);
this.$router.push({
name: 'stream',
params: this.$route.params,
query: {pattern: patternId,},
});
},
},
};
</script>
<style scoped>
code {
font-family: "Ubuntu Mono", "Lucida Console", monospace;
font-size: 100%;
}
</style>

108
src/views/AddPattern.vue Normal file
View File

@ -0,0 +1,108 @@
<template>
<b-modal @ok="addPattern" @cancel="reset" id="addPatternModal"
title="Добавить паттерн"
cancel-title="Отмена"
centered scrollable>
<form ref="addPatternForm">
<b-form-group
label-cols-sm="4"
label-cols-lg="3"
label="Название"
description="Отображается в списке и при успешном поиске"
label-for="pattern-name">
<b-form-input @keydown.native.enter="addPattern" id="pattern-name" required v-model="newPattern.name"/>
</b-form-group>
<b-form-group
label-cols-sm="4"
label-cols-lg="3"
label="Паттерн"
description="Подстрока или регулярное выражение"
label-for="pattern-value">
<b-form-input @keydown.native.enter="addPattern" id="pattern-value" required
v-model="newPattern.value"/>
</b-form-group>
<b-form-group
label-cols-sm="4"
label-cols-lg="3"
label="Цвет"
description="Как выделять найденный паттерн в пакете и стриме"
label-for="pattern-color">
<b-form-input id="pattern-color" required type="color" v-model="newPattern.color"/>
</b-form-group>
<b-form-group
label-cols-sm="4"
label-cols-lg="3"
label="Регулярное выражение?"
description="Искать регулярное выражение в Java-формате вместо подстроки?"
label-for="pattern-regex">
<b-form-checkbox id="pattern-regex" required v-model="newPattern.isRegex"/>
</b-form-group>
<b-form-group
label-cols-sm="4"
label-cols-lg="3"
label="Тип поиска"
description="В каких пакетах искать паттерн"
label-for="pattern-type">
<b-form-select id="pattern-type" required v-model="newPattern.type">
<option value="INPUT">Запрос</option>
<option value="OUTPUT">Ответ</option>
<option value="BOTH" selected>Везде</option>
</b-form-select>
</b-form-group>
</form>
</b-modal>
</template>
<script>
export default {
name: 'AddPattern',
data() {
return {
newPattern: {
name: String(),
value: String(),
color: String(),
isRegex: Boolean(),
type: String(),
},
};
},
methods: {
checkValidity() {
return this.$refs.addPatternForm.reportValidity();
},
reset() {
this.newPattern = {};
},
addPattern(ev) {
ev.preventDefault();
if (!this.checkValidity()) {
console.debug('Form is invalid');
return;
}
console.debug('Adding pattern...', this.newPattern);
this.$http.post('pattern/', this.newPattern)
.then(response => {
const data = response.data;
console.debug('Done adding pattern', data);
this.$emit('patternAddComplete');
this.reset();
this.$bvModal.hide('addPatternModal');
}).catch(e => {
this.$bvToast.toast(`Не удалось добавить паттерн: ${e}`, {
title: 'Сбой',
variant: 'danger',
});
console.error('Failed to add pattern', e);
});
},
},
};
</script>
<style scoped>
</style>