Add 'Need help?' dialog with restart option (#7671)
This commit is contained in:
Michael Geers
GitHub
parent
1a1a4511b4
commit
59fca4580b
6 changed files with 211 additions and 38 deletions
|
|
@ -145,6 +145,10 @@ a:hover {
|
|||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
.btn {
|
||||
--bs-btn-border-width: 2px;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-primary:focus {
|
||||
background-color: var(--bs-primary);
|
||||
|
|
@ -174,19 +178,16 @@ a:hover {
|
|||
.btn-outline-primary:focus {
|
||||
color: var(--bs-primary);
|
||||
background-color: transparent;
|
||||
border-width: 2px;
|
||||
border-color: var(--bs-primary);
|
||||
}
|
||||
.btn-outline-primary:hover {
|
||||
color: var(--evcc-accent3) !important;
|
||||
background-color: transparent !important;
|
||||
border-width: 2px;
|
||||
border-color: var(--evcc-accent3) !important;
|
||||
}
|
||||
.btn-outline-primary:active {
|
||||
color: var(--evcc-default-text) !important;
|
||||
background-color: var(--evcc-accent3) !important;
|
||||
border-width: 2px;
|
||||
border-color: var(--evcc-accent3) !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
157
assets/js/components/HelpModal.vue
Normal file
157
assets/js/components/HelpModal.vue
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
<template>
|
||||
<Teleport to="body">
|
||||
<div
|
||||
id="helpModal"
|
||||
class="modal fade text-dark"
|
||||
tabindex="-1"
|
||||
role="dialog"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">{{ $t("help.modalTitle") }}</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
{{ $t("help.primaryActions") }}
|
||||
</p>
|
||||
<div
|
||||
class="d-block d-sm-flex justify-content-between align-items-stretch mb-4"
|
||||
>
|
||||
<a
|
||||
href="https://docs.evcc.io/"
|
||||
target="_blank"
|
||||
class="btn btn-outline-primary w-100 w-sm-auto flex-grow-1 mb-3 mb-sm-0 me-sm-3"
|
||||
type="button"
|
||||
>
|
||||
{{ $t("help.documentationButton") }}
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/evcc-io/evcc/discussions"
|
||||
target="_blank"
|
||||
class="btn btn-outline-primary w-100 w-sm-auto flex-grow-1"
|
||||
type="button"
|
||||
>
|
||||
{{ $t("help.discussionsButton") }}
|
||||
</a>
|
||||
</div>
|
||||
<hr class="mb-4" />
|
||||
<p>
|
||||
{{ $t("help.secondaryActions") }}
|
||||
</p>
|
||||
<div
|
||||
class="d-block d-sm-flex justify-content-between align-items-baseline mb-3"
|
||||
>
|
||||
<p class="flex-sm-grow-1 text-muted me-sm-3">
|
||||
{{ $t("help.issueDescription") }}
|
||||
</p>
|
||||
<a
|
||||
href="https://github.com/evcc-io/evcc/issues"
|
||||
target="_blank"
|
||||
class="btn btn-outline-primary text-nowrap"
|
||||
type="button"
|
||||
>
|
||||
{{ $t("help.issueButton") }}
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="d-block d-sm-flex justify-content-between align-items-baseline mb-3"
|
||||
>
|
||||
<p class="flex-sm-grow-1 text-muted me-sm-3">
|
||||
{{ $t("help.restartDescription") }}
|
||||
</p>
|
||||
<button
|
||||
class="btn btn-outline-danger text-nowrap"
|
||||
type="button"
|
||||
data-bs-dismiss="modal"
|
||||
@click="openConfirmRestartModal"
|
||||
>
|
||||
{{ $t("help.restartButton") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
<Teleport to="body">
|
||||
<div
|
||||
id="confirmRestartModal"
|
||||
class="modal fade text-dark"
|
||||
tabindex="-1"
|
||||
role="dialog"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5>{{ $t("help.restart.modalTitle") }}</h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>{{ $t("help.restart.description") }}</p>
|
||||
<p>
|
||||
<small>
|
||||
{{ $t("help.restart.disclaimer") }}
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
<div class="modal-footer d-flex justify-content-between">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-secondary"
|
||||
data-bs-dismiss="modal"
|
||||
@click="openHelpModal"
|
||||
>
|
||||
{{ $t("help.restart.cancel") }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-danger"
|
||||
data-bs-dismiss="modal"
|
||||
@click="restartConfirmed"
|
||||
>
|
||||
{{ $t("help.restart.confirm") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from "bootstrap/js/dist/modal";
|
||||
import api from "../api";
|
||||
|
||||
export default {
|
||||
name: "HelpModal",
|
||||
props: {},
|
||||
methods: {
|
||||
openHelpModal() {
|
||||
const modal = Modal.getOrCreateInstance(document.getElementById("helpModal"));
|
||||
modal.show();
|
||||
},
|
||||
openConfirmRestartModal() {
|
||||
const modal = Modal.getOrCreateInstance(document.getElementById("confirmRestartModal"));
|
||||
modal.show();
|
||||
},
|
||||
async restartConfirmed() {
|
||||
try {
|
||||
await api.post("shutdown");
|
||||
alert(
|
||||
"Server was stopped successfully. Waiting for the operating system to start evcc again."
|
||||
);
|
||||
} catch (e) {
|
||||
alert("Unabled to restart server.");
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -52,43 +52,13 @@
|
|||
</li>
|
||||
</template>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex" href="https://docs.evcc.io/blog/" target="_blank">
|
||||
<span>{{ $t("header.blog") }}</span>
|
||||
<shopicon-regular-newtab
|
||||
size="s"
|
||||
class="ms-2 external"
|
||||
></shopicon-regular-newtab>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item d-flex"
|
||||
href="https://docs.evcc.io/docs/Home/"
|
||||
target="_blank"
|
||||
>
|
||||
<span>{{ $t("header.docs") }}</span>
|
||||
<shopicon-regular-newtab
|
||||
size="s"
|
||||
class="ms-2 external"
|
||||
></shopicon-regular-newtab>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item d-flex"
|
||||
href="https://github.com/evcc-io/evcc"
|
||||
target="_blank"
|
||||
>
|
||||
<span>{{ $t("header.github") }}</span>
|
||||
<shopicon-regular-newtab
|
||||
size="s"
|
||||
class="ms-2 external"
|
||||
></shopicon-regular-newtab>
|
||||
</a>
|
||||
<button type="button" class="dropdown-item" @click="openHelpModal">
|
||||
<span>{{ $t("header.needHelp") }}</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex" href="https://evcc.io/" target="_blank">
|
||||
<span>{{ $t("header.about") }}</span>
|
||||
<span>evcc.io</span>
|
||||
<shopicon-regular-newtab
|
||||
size="s"
|
||||
class="ms-2 external"
|
||||
|
|
@ -97,6 +67,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
<GlobalSettingsModal v-bind="globalSettingsModalProps" />
|
||||
<HelpModal />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -108,13 +79,14 @@ import "@h2d2/shopicons/es/regular/moonstars";
|
|||
import "@h2d2/shopicons/es/regular/menu";
|
||||
import "@h2d2/shopicons/es/regular/newtab";
|
||||
import GlobalSettingsModal from "./GlobalSettingsModal.vue";
|
||||
import HelpModal from "./HelpModal.vue";
|
||||
import collector from "../mixins/collector";
|
||||
|
||||
import baseAPI from "../baseapi";
|
||||
|
||||
export default {
|
||||
name: "TopNavigation",
|
||||
components: { GlobalSettingsModal },
|
||||
components: { GlobalSettingsModal, HelpModal },
|
||||
mixins: [collector],
|
||||
props: {
|
||||
vehicleLogins: {
|
||||
|
|
@ -168,6 +140,10 @@ export default {
|
|||
const modal = Modal.getOrCreateInstance(document.getElementById("globalSettingsModal"));
|
||||
modal.show();
|
||||
},
|
||||
openHelpModal() {
|
||||
const modal = Modal.getOrCreateInstance(document.getElementById("helpModal"));
|
||||
modal.show();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@ export function getLocalePreference() {
|
|||
export function removeLocalePreference(i18n) {
|
||||
settings.locale = null;
|
||||
setI18nLanguage(i18n, getBrowserLocale());
|
||||
ensureCurrentLocaleMessages(i18n);
|
||||
}
|
||||
|
||||
export function setLocalePreference(i18n, locale) {
|
||||
|
|
|
|||
19
i18n/de.toml
19
i18n/de.toml
|
|
@ -73,9 +73,28 @@ blog = "Blog"
|
|||
docs = "Dokumentation"
|
||||
github = "GitHub"
|
||||
login = "Fahrzeug Logins"
|
||||
needHelp = "Hilfe benötigt?"
|
||||
sessions = "Ladevorgänge"
|
||||
settings = "Einstellungen"
|
||||
|
||||
[help]
|
||||
discussionsButton = "GitHub Discussions"
|
||||
documentationButton = "Dokumentation"
|
||||
issueButton = "Bug melden"
|
||||
issueDescription = "Komisches Verhalten gefunden?"
|
||||
modalTitle = "Hilfe benötigt?"
|
||||
primaryActions = "Funktioniert etwas nicht so, wie es soll? Dies sind gute Anlaufstellen, um Hilfe zu erhalten."
|
||||
restartButton = "Neu starten"
|
||||
restartDescription = "Tried turning it off and on again?"
|
||||
secondaryActions = "Noch keine Lösung gefunden? Hier noch ein paar weitere Möglichkeiten."
|
||||
|
||||
[help.restart]
|
||||
cancel = "Abbrechen"
|
||||
confirm = "Ja, neu starten!"
|
||||
description = "Unter normalen Umständen sollte ein Neustart nicht notwendig sein. Melde einen Bug, wenn du evcc regelmäßig neu starten musst."
|
||||
disclaimer = "Hinweis: evcc beendet sich und verlässt sich darauf, vom Betriebssystem neu gestartet zu werden."
|
||||
modalTitle = "Sicher, dass du neu starten möchtest?"
|
||||
|
||||
[main]
|
||||
vehicles = "Parkplatz"
|
||||
|
||||
|
|
|
|||
19
i18n/en.toml
19
i18n/en.toml
|
|
@ -73,9 +73,28 @@ blog = "Blog"
|
|||
docs = "Documentation"
|
||||
github = "GitHub"
|
||||
login = "Vehicle logins"
|
||||
needHelp = "Need help?"
|
||||
sessions = "Charging sessions"
|
||||
settings = "Settings"
|
||||
|
||||
[help]
|
||||
discussionsButton = "GitHub discussions"
|
||||
documentationButton = "Documentation"
|
||||
issueButton = "Report a bug"
|
||||
issueDescription = "Found a strange or wrong behavior?"
|
||||
modalTitle = "Need help?"
|
||||
primaryActions = "Something does not work the way it supposed to do? These are good places to get help."
|
||||
restartButton = "Restart"
|
||||
restartDescription = "Tried turning it off and on again?"
|
||||
secondaryActions = "Still not able to solve your problem? Here are some more heavy handed options."
|
||||
|
||||
[help.restart]
|
||||
cancel = "Cancel"
|
||||
confirm = "Yes, restart!"
|
||||
description = "Under normal circumsances restarting should not be necessary. Please consider filing a bug if you need to restart evcc on a regular basis."
|
||||
disclaimer = "Note: evcc will terminate and rely on the operating system to restart the service."
|
||||
modalTitle = "Are you sure you want to restart?"
|
||||
|
||||
[main]
|
||||
vehicles = "Parking"
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue