add: create toast notifications in the dashboard

This commit is contained in:
tdurieux
2021-08-24 12:32:49 +02:00
parent 80678c51a8
commit 1506de0367
3 changed files with 57 additions and 4 deletions

View File

@@ -61,7 +61,7 @@
<script src="/script/external/ace/ace.js"></script>
<script src="/script/external/ui-ace.min.js"></script>
<script src="/script/langColors.js"></script>
<!-- Notebook -->
<script src="/script/external/marked.min.js"></script>
<script src="/script/external/purify.min.js"></script>
@@ -79,6 +79,36 @@
<body keypress-events class="d-flex flex-column">
<ng-include src="'partials/header.htm'"></ng-include>
<ng-view class="align-items-stretch h-100 w-100 overflow-auto"></ng-view>
<div
class="position-fixed bottom-0 right-0 p-3"
style="z-index: 5; right: 0; bottom: 0"
>
<div
id="liveToast"
class="toast show"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-delay="2000"
ng-repeat="toast in toasts"
>
<div class="toast-header">
<strong class="mr-auto" ng-bind="toast.title"></strong>
<button
type="button"
class="ml-2 mb-1 close"
data-dismiss="toast"
aria-label="Close"
ng-click="removeToast(toast);"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="toast-body" ng-bind="toast.body"></div>
</div>
</div>
<script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script>
<script>
kofiWidgetOverlay.draw("tdurieux", {

View File

@@ -211,8 +211,7 @@
ng-bind="repo.source.commit.substring(0, 8)"
></a>
</span>
anonymized
{{repo.anonymizeDate | humanTime}}
anonymized {{repo.anonymizeDate | humanTime}}
</span>
</div>
<div class="color-text-secondary mt-2">

View File

@@ -359,6 +359,13 @@ angular
$scope.user = { status: "connection" };
$scope.site_options;
$scope.toasts = [];
$scope.removeToast = function (toast) {
const index = $scope.toasts.indexOf(toast);
$scope.toasts = $scope.toasts.splice(index, index);
};
$scope.path = $location.url();
$scope.paths = $location.path().substring(1).split("/");
@@ -591,15 +598,32 @@ angular
`Are you sure that you want to remove the repository ${repo.repoId}?`
)
) {
const toast = {
title: `Removing ${repo.repoId}...`,
date: new Date(),
body: `The repository ${repo.repoId} is going to be removed.`,
};
$scope.toasts.push(toast);
$http.delete(`/api/repo/${repo.repoId}`).then(() => {
toast.title = `${repo.repoId} is removed.`;
toast.body = `The repository ${repo.repoId} is removed.`;
getRepositories();
});
}
};
$scope.updateRepository = (repo) => {
const toast = {
title: `Refreshing ${repo.repoId}...`,
date: new Date(),
body: `The repository ${repo.repoId} is going to be removed.`,
};
$scope.toasts.push(toast);
$http.post(`/api/repo/${repo.repoId}/refresh`).then(() => {
alert(`${repo.repoId} is refreshed.`);
toast.title = `${repo.repoId} is refreshed.`;
toast.body = `The repository ${repo.repoId} is refreshed.`;
getRepositories();
});
};