Skip to content

Commit

Permalink
Centralize collapsable panels to make easy upgrading possible
Browse files Browse the repository at this point in the history
  • Loading branch information
@stitch
stitch committed Nov 5, 2020
1 parent 459a82e commit 01bbc1d
Show file tree
Hide file tree
Showing 6 changed files with 91 additions and 81 deletions.
54 changes: 54 additions & 0 deletions dashboard_frontend/src/components/collapse_panel.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<style scoped>
.panel-content {
padding-bottom: 10px;
padding-left: 20px;
}
.chart_collapse_panel {
border-top: 1px solid gray;
border-bottom: 1px solid gray;
margin-top: 10px;
margin-bottom: 10px;
}
.panel-title {
font-size: 1.0em;
padding-left: 20px;
}
</style>

<template>
<div class="chart_collapse_panel">
<h1 class="panel-title">
<a href="" aria-expanded="false">
<span class="visuallyhidden">-:</span>
{{ title }}
<span class="pre-icon visuallyhidden"></span>
<span class="icon"><img src="/static/images/vendor/internet_nl/push-open.png" alt=""></span>
</a>
</h1>
<div class="panel-content">
<slot name="content">
default content
</slot>
</div>
</div>
</template>

<script>
export default {
name: "collapse_panel.vue",
props: {
title: {
type: String,
default: ""
},
}
}
</script>

<style scoped>
</style>
16 changes: 4 additions & 12 deletions dashboard_frontend/src/components/domains/DomainListManager.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,17 +44,9 @@ Fixed: when deleting a list, it is re-added to the list of lists when adding a n
<router-link tag="button" to="/domains/upload">📓 {{ $t("bulk_upload_link") }}</router-link>
</p>

<div class="testresult_without_icon">
<h2 style="font-size: 1.0em;" class="panel-title">
<a href="" aria-expanded="false">
<span class="visuallyhidden">-:</span>
{{ $t("icon_legend.title") }}
<span class="pre-icon visuallyhidden"></span>
<span class="icon"><img src="/static/images/vendor/internet_nl/push-open.png" alt=""></span>
</a>
</h2>
<div class="panel-content">
<p>{{ $t("icon_legend.intro") }}</p>
<collapse-panel :title='$t("icon_legend.title")'>
<div slot="content">
<p>{{ $t("icon_legend.intro") }}</p>
<ul>
<li>
<span role="img" :aria-label="$t('icons.can_connect')">🌍️</span>
Expand All @@ -69,7 +61,7 @@ Fixed: when deleting a list, it is re-added to the list of lists when adding a n
</li>
</ul>
</div>
</div>
</collapse-panel>

<internet_nl_modal v-if="show_add_new" @close="stop_adding_new()">
<h3 slot="header">📚 {{ $t("new_list.add_new_list") }}</h3>
Expand Down
58 changes: 21 additions & 37 deletions dashboard_frontend/src/components/reports/Report.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,47 +24,24 @@

<template v-if="reports.length && !is_loading">

<div class="do-not-print testresult_without_icon" v-if="selected_report.length < 2">
<h2 style="font-size: 1.0em;" class="panel-title">
<a href="" aria-expanded="false">
<span class="visuallyhidden">-:</span>
{{ $t("download.title") }}
<span class="pre-icon visuallyhidden"></span>
<span class="icon"><img src="/static/images/vendor/internet_nl/push-open.png" alt=""></span>
</a>
</h2>
<div class="panel-content">
<collapse-panel :title='$t("download.title") ' class="do-not-print" v-if="selected_report.length < 2">
<div slot="content">
<p>{{ $t("download.intro") }}</p>
<ul style="list-style: disc !important; padding-left: 20px">
<li><a :href="'/data/download-spreadsheet/' + reports[0].id + '/xlsx/'">{{
$t("download.xlsx")
}}</a></li>
<li><a :href="'/data/download-spreadsheet/' + reports[0].id + '/ods/'">{{
$t("download.ods")
}}</a></li>
<li><a :href="'/data/download-spreadsheet/' + reports[0].id + '/csv/'">{{
$t("download.csv")
}}</a></li>
<li><a :href="make_downloadlink(reports[0].id, 'xlsx')">{{ $t("download.xlsx") }}</a></li>
<li><a :href="make_downloadlink(reports[0].id, 'ods')">{{ $t("download.ods") }}</a></li>
<li><a :href="make_downloadlink(reports[0].id, 'csv')">{{ $t("download.csv") }}</a></li>
</ul>
</div>
</div>

<div class="do-not-print testresult_without_icon">
<h2 style="font-size: 1.0em;" class="panel-title">
<a href="" aria-expanded="false">
<span class="visuallyhidden">-:</span>
{{ $t("settings.title") }}
<span class="pre-icon visuallyhidden"></span>
<span class="icon"><img src="/static/images/vendor/internet_nl/push-open.png" alt=""></span>
</a>
</h2>
<div class="panel-content">
<VisibleMetrics
:scan_methods="scan_methods"
:report_type="selected_report[0].type"
></VisibleMetrics>
</collapse-panel>

<collapse-panel :title='$t("settings.title")' class="do-not-print">
<div slot="content">
<VisibleMetrics :scan_methods="scan_methods"
:report_type="selected_report[0].type"></VisibleMetrics>
</div>
</div>
</collapse-panel>

</template>

</div>
Expand Down Expand Up @@ -123,7 +100,8 @@
</ReportCharts>

<!-- The table is only displayed with up to two reports (the first as the source of the table, the second as a comparison). -->
<div v-if="original_urls !== undefined && selected_report.length < 3" class="block fullwidth" style="page-break-before: always;">
<div v-if="original_urls !== undefined && selected_report.length < 3" class="block fullwidth"
style="page-break-before: always;">

<ReportTable
:differences_compared_to_current_list="differences_compared_to_current_list"
Expand Down Expand Up @@ -241,6 +219,7 @@ export default {
mixins: [legacy_mixin],
data: function () {
return {
is_loading: false,
// Supporting multiple reports at the same time is hard to understand. Don't know how / if we can do
Expand Down Expand Up @@ -335,6 +314,11 @@ export default {
}, 300)
},
methods: {
make_downloadlink: function (report_id, filetype) {
return `${this.$store.state.dashboard_endpoint}/data/download-spreadsheet/${report_id}/${filetype}/`
},
load: function (report_id) {
this.get_report_data(report_id);
},
Expand Down
19 changes: 5 additions & 14 deletions dashboard_frontend/src/components/reports/ReportTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,16 +36,8 @@
</template>
</p>

<div class="testresult_without_icon faq-report">
<h2 style="font-size: 1.0em;" class="panel-title">
<a href="" aria-expanded="false">
<span class="visuallyhidden">-:</span>
{{ $t("icon_legend.title") }}
<span class="pre-icon visuallyhidden"></span>
<span class="icon"><img src="/static/images/vendor/internet_nl/push-open.png" alt=""></span>
</a>
</h2>
<div class="panel-content">
<collapse-panel :title='$t("icon_legend.title")' class="do-not-print">
<div slot="content">
<h3>{{ $t("test_title") }}</h3>
<ul>
<li><span class="faq-test category_passed"><span
Expand Down Expand Up @@ -82,7 +74,7 @@
}}</span>{{ $t("icon_legend.subtest_error_in_test") }}</span></li>
</ul>
</div>
</div>
</collapse-panel>

<div class="sticky-table-container" style="position: relative; page-break-before: always;">
<div id="horrible-chrome-td-sticky-white-background-fix"></div>
Expand Down Expand Up @@ -316,7 +308,7 @@ export default {
// this.debounce(function() {this.methods.filter_urls(newValue);});
},
},
mounted: function(){
mounted: function () {
// should be copied?
this.filtered_urls = this.original_urls;
Expand All @@ -332,7 +324,7 @@ export default {
},
filter_urls(keyword) {
// in case of filter reset, or initializiation of this value.
if (keyword === ""){
if (keyword === "") {
console.log("Removing filter");
this.filtered_urls = this.order_urls(this.original_urls)
return
Expand Down Expand Up @@ -1014,7 +1006,6 @@ div.rotate > span {
"nl": {
"score": "Score",
"domain": "Domein",

"report": {
"title": "Rapport",
"intro": "Deze tabel toont de details van het rapport. Het is mogelijk dit rapport te vergelijken met een vorig of ander rapport. Wanneer deze vergelijking wordt gemaakt, wordt bij de gegevens van het eerste rapport voortgangsindicatoren geplaats waar relevant. De domeinen van het tweede rapport worden alleen vergeleken, niet getoond.",
Expand Down
23 changes: 5 additions & 18 deletions dashboard_frontend/src/components/scans/ScanMonitor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,23 +88,9 @@ h4 {
}},<br>{{ humanize_relative_date(scan.started_on) }}</span><br>
<br>


<div class="testresult" style="padding-left: 0px !important;">
<h4 class="panel-title">
<a href="" aria-expanded="false">
<span class="visuallyhidden">-:</span>
<span v-if="!['finished', 'cancelled'].includes(scan.state)">
<img width="15" style="border-radius: 50%"
src="/static/images/vendor/internet_nl/probe-animation.gif">
</span> &nbsp;
{{ $t("scan history") }}
<span class="pre-icon visuallyhidden"></span>
<span class="icon">
<img src="/static/images/vendor/internet_nl/push-open.png" alt=""></span>
</a>
</h4>
<div class="panel-content" style="font-size: 0.7em;">
<ul>
<collapse-panel :title='$t("scan history")'>
<div slot="content">
<ul style="font-size: 0.7em;">
<li v-for="log_item in scan.log" :key="log_item.id">
- {{ log_item.state }}, {{ humanize_relative_date(log_item.at_when) }}
</li>
Expand All @@ -113,7 +99,8 @@ h4 {
<button @click="start_stop_scan(scan)">{{ $t("stop_scan") }}</button>
</template>
</div>
</div>
</collapse-panel>

<br>

<template v-if="scan.status_url">
Expand Down
2 changes: 2 additions & 0 deletions dashboard_frontend/src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import InstantAddAccount from './components/admin/InstantAddAccount'
import Account from './components/account/Account'
import Demo from './components/Demo'
import Unsubscribe from './components/mail/Unsubscribe'
import collapse_panel from './components/collapse_panel'
import App from './App'
import Beta from './components/beta'
// https://stackoverflow.com/questions/50925793/proper-way-of-adding-css-file-in-vue-js-application
Expand All @@ -48,6 +49,7 @@ Vue.component('autorefresh', autorefresh)
Vue.component('loading', loading)
Vue.component('internet_nl_modal', internet_nl_modal)
Vue.component('server-response', server_response)
Vue.component('collapse-panel', collapse_panel)

Vue.config.productionTip = false

Expand Down

0 comments on commit 01bbc1d

Please sign in to comment.