additional n8n functions

This commit is contained in:
usmannasir
2025-04-11 15:44:51 +05:00
parent 283ae39c12
commit b5b0cda41a

View File

@@ -138,6 +138,90 @@
border: 1px solid #ddd; border: 1px solid #ddd;
} }
} }
.action-buttons {
display: flex;
align-items: center;
}
.action-buttons .btn-group {
margin-left: 8px;
}
.action-buttons .btn {
padding: 6px 12px;
font-size: 14px;
}
.action-buttons .btn i {
margin-right: 4px;
}
.badge {
padding: 5px 10px;
border-radius: 4px;
font-weight: 500;
}
.badge-success {
background-color: #28a745;
color: white;
}
.badge-danger {
background-color: #dc3545;
color: white;
}
.badge-warning {
background-color: #ffc107;
color: #212529;
}
.btn-outline-success {
color: #28a745;
border-color: #28a745;
}
.btn-outline-success:hover {
color: white;
background-color: #28a745;
}
.btn-outline-warning {
color: #ffc107;
border-color: #ffc107;
}
.btn-outline-warning:hover {
color: #212529;
background-color: #ffc107;
}
.btn-outline-danger {
color: #dc3545;
border-color: #dc3545;
}
.btn-outline-danger:hover {
color: white;
background-color: #dc3545;
}
.btn-outline-primary {
color: #007bff;
border-color: #007bff;
}
.btn-outline-primary:hover {
color: white;
background-color: #007bff;
}
.btn-outline-info {
color: #17a2b8;
border-color: #17a2b8;
}
.btn-outline-info:hover {
color: white;
background-color: #17a2b8;
}
.ms-2 {
margin-left: 0.5rem;
}
.me-3 {
margin-right: 1rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.m-0 {
margin: 0;
}
</style> </style>
<script> <script>
@@ -302,28 +386,39 @@
<div ng-repeat="web in ContainerList"> <div ng-repeat="web in ContainerList">
<div class="mb-5"> <div class="mb-5">
<div id="page-title" class="mb-4"> <div id="page-title" class="mb-4">
<h2 id="domainNamePage" class="d-flex justify-content-between align-items-center"> <div class="d-flex justify-content-between align-items-center mb-2">
<span>{% trans "Currently managing: " %} {$ web.name $}</span> <h2 class="m-0">{% trans "Currently managing: " %} {$ web.name $}</h2>
<div class="btn-group"> <div class="action-buttons">
<button class="btn btn-success" ng-click="cAction('start')" ng-if="web.status !== 'running'"> <div class="btn-group" role="group">
<i class="fa fa-play"></i> Start <button class="btn btn-outline-success" ng-click="cAction('start', web)" ng-if="web.status !== 'running'" title="Start Container">
</button> <i class="fa fa-play"></i>
<button class="btn btn-warning" ng-click="cAction('restart')" ng-if="web.status === 'running'"> </button>
<i class="fa fa-refresh"></i> Restart <button class="btn btn-outline-warning" ng-click="cAction('restart', web)" ng-if="web.status === 'running'" title="Restart Container">
</button> <i class="fa fa-refresh"></i>
<button class="btn btn-danger" ng-click="cAction('stop')" ng-if="web.status === 'running'"> </button>
<i class="fa fa-stop"></i> Stop <button class="btn btn-outline-danger" ng-click="cAction('stop', web)" ng-if="web.status === 'running'" title="Stop Container">
</button> <i class="fa fa-stop"></i>
<button class="btn btn-primary" ng-click="openSettings(web)"> </button>
<i class="fa fa-cog"></i> Settings </div>
</button>
<a class="btn btn-info" href="http://{$ location.hostname $}:{$ web.ports['5678/tcp'][0].HostPort $}" target="_blank" ng-if="web.status === 'running'"> <div class="btn-group ms-2" role="group">
<i class="fa fa-external-link"></i> Open n8n <button class="btn btn-outline-primary" ng-click="openSettings(web)" title="Container Settings">
</a> <i class="fa fa-cog"></i>
</button>
<a class="btn btn-outline-info" href="http://{$ location.hostname $}:{$ web.ports['5678/tcp'][0].HostPort $}" target="_blank"
ng-if="web.status === 'running'" title="Open n8n Interface">
<i class="fa fa-external-link"></i> n8n
</a>
</div>
</div> </div>
</h2> </div>
<p class="text-muted"> <p class="text-muted mb-0">
{% trans "Container ID" %}: <code>{$ web.id $}</code> <span class="me-3">{% trans "Container ID" %}: <code>{$ web.id $}</code></span>
<span class="badge" ng-class="{
'badge-success': web.status === 'running',
'badge-danger': web.status === 'stopped',
'badge-warning': web.status !== 'running' && web.status !== 'stopped'
}">{$ web.status $}</span>
</p> </p>
</div> </div>