<template>
<div id="main"> <div v-for="prefix in myJson.prefixes_details"> <div v-if="$route.query.prefix == prefix.name" class="accordion-item"> <div class="prefix">{{prefix.name}}</div> <div v-for="action in prefix.actions.actions_details"> <div v-if="$route.query.method == action.method && $route.query.path == action.path" class="accordion-item"> <div class="action"> <div class="method">{{action.method}}</div> <div class="path">{{action.path}}</div> </div> <div v-if="action.responses.tests_without_responses.length != 0"> <div class="accordion-item"> <div class="tests_without_responses accordion-item-head" v-on:click="accordion"> tests without responses: {{ action.responses.tests_without_responses.length }} ✖ </div> <div class="accordion-item-body"> <div v-for="test_without_responses in action.responses.tests_without_responses"> <div class="test_without_responses"> {{ test_without_responses }} ✖ {{tests[test_without_responses]}} </div> </div> </div> </div> </div> <div v-for="response in action.responses.responses_details"> <div class="response"> <div class="accordion-item"> <div class="accordion-item-head" v-on:click="accordion"> <div v-if="response.combinations.cover_percent == '100%'" class="response_good"> {{ response.combinations.cover_percent }} {{ response.method }} </div> <div v-else class="response_bad"> {{ response.combinations.cover_percent }} {{ response.method }} </div> </div> <div class="accordion-item-body"> <vue-json-compare :oldData="jsonSchemas[response.json_schema]" :newData="jsonSchemas[response.json_schema]"></vue-json-compare> </div> </div> </div> <div v-for="combination in response.combinations.combinations_details"> <div class="combination"> <div class="accordion-item"> <div class="accordion-item-head" v-on:click="accordion"> type: {{ combination.type }}, name: {{ combination.name }}, tests_size: {{ combination.tests_size }} </div> <div class="accordion-item-body"> <vue-json-compare :oldData="jsonSchemas[response.json_schema]" :newData="combinations[combination.json_schema]"></vue-json-compare> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
</template>
<script> import vueJsonCompare from 'vue-json-compare'
export default {
name: 'HelloWorld', props: { msg: String }, components: { vueJsonCompare }, data() { return { myJson: {'stub': 'for action page'}, jsonSchemas: {'stub': 'json-schemas'}, combinations: {'stub': 'combinations'}, tests: {'stub': 'tests'} } }, methods: { accordion: function (event) { event.target.classList.toggle('active'); } }
} </script>
<style> .request {
color: #42b983; background-color: #273645; padding: 0px 0px 0px 8px;
}
.tests_without_responses {
text-align: left; padding: 0px 0px 0px 8px; color: #b94283; background-color: #273645; margin: 2px 0px 0px 24px;
}
.tests_without_responses:hover {
background-color: #2b2b2b;
}
.test_without_responses {
text-align: left; padding: 0px 0px 0px 8px; color: #b94283; background-color: #273645; margin: 2px 0px 0px 32px;
}
.test_without_responses:hover {
background-color: #2b2b2b;
}
.response {
text-align: left; padding: 0px 0px 0px 8px; color: #42b983; background-color: #273645; margin: 2px 0px 0px 24px;
}
.response:hover {
background-color: #2b2b2b;
}
.response_good {
color: #42b983;
}
.response_bad {
color: #b94283;
}
.combination {
text-align: left; padding: 0px 0px 0px 8px; color: #42b983; background-color: #273645; margin: 2px 0px 0px 32px;
}
.combination:hover {
background-color: #2b2b2b;
}
/* darkmode */ .alpaca-json{
background-color: #131a20;
} .alpaca-add{
background-color: #004313;
} .alpaca-del {
background-color: #160004;
} .alpaca-upd{
background-color: #423200;
} </style>