Commit 36ee7537 authored by janis.streib's avatar janis.streib 🦉
Browse files

restructured project and initial import of the frontend (+ some small api additions)

parent a28737e2
......@@ -3,6 +3,7 @@ config.py
cache
*.pem
*.key
*.p12
.idea/*
.idea
bin/
......
*.pem
*.key
*.p12
.idea/*
.idea
*.swp
*.log
node_modules/
dist/*
# net-suite frontend
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Run your tests
```
npm run test
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
module.exports = {
presets: [
'@vue/app'
]
}
This diff is collapsed.
{
"name": "net-suite",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.14",
"@fortawesome/free-regular-svg-icons": "^5.7.1",
"@fortawesome/free-solid-svg-icons": "^5.7.1",
"@fortawesome/vue-fontawesome": "^0.1.5",
"ajv": "^6.8.1",
"axios": "^0.18.0",
"bootstrap": "^4.2.1",
"bootstrap-vue": "^2.0.0-rc.13",
"http-proxy-middleware": "^0.19.1",
"i": "^0.3.6",
"node-sass": "^4.11.0",
"npm": "^6.9.0",
"popper.js": "^1.14.7",
"sass-loader": "^7.1.0",
"v-debounce": "^0.1.2",
"vue": "^2.6.0",
"vue-awesome": "^3.4.0",
"vue-axios": "^2.1.4",
"vue-router": "^3.0.1",
"vue-virtual-scroller": "^1.0.0-beta.4"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.2.0",
"@vue/cli-plugin-eslint": "^3.2.0",
"@vue/cli-service": "^3.7.0",
"babel-eslint": "^10.0.1",
"css-loader": "^2.1.0",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0-0",
"style-loader": "^0.23.1",
"vue-loader": "^15.6.2",
"vue-template-compiler": "^2.6.0",
"webpack-cli": "^3.2.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>net-suite</title>
</head>
<body>
<noscript>
<strong>We're sorry but net-suite doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<template>
<div id="app">
<b-navbar toggleable="lg" fixed="top" :type="$sysinfo.host_oper_mode.is_prod?'light':'dark'" :variant="$sysinfo.host_oper_mode.is_prod?'light':'dark'" :class="`bg-${$sysinfo.host_oper_mode.mode}`">
<!-- Brand and toggle get grouped for better mobile display -->
<b-navbar-brand to="/">
<img class="d-inline-block align-top scc-img" alt="SCC" src="@/assets/img/scc_logo_small.png"/>
<span v-if="!$sysinfo.host_oper_mode.is_prod"> Instanz: {{$sysinfo.host_oper_mode.mode}}</span>
</b-navbar-brand>
<b-navbar-toggle target="navbarNavDropdown">
<font-awesome-icon icon="bars"></font-awesome-icon>
</b-navbar-toggle>
<!-- Collect the nav links, forms, and other content for toggling -->
<b-collapse is-nav id="navbarNavDropdown">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"
>
<router-link to="/dnsvs/" class="nav-link">DNSVS</router-link>
</li>
<li class="nav-item">
<a href="/dhcp/" class="nav-link">DHCP-Leases</a>
</li>
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle "
data-toggle="dropdown" role="button"
aria-haspopup="true"
aria-expanded="false">Tools</a>
<div class="dropdown-menu">
<a href="/tools/ip_contact/"
class="dropdown-item ">Adressbetreuer kontaktieren</a>
<a href="/tools/macfinder/"
class="dropdown-item ">MACFinder</a>
</div>
</li>
<li class="nav-item">
<a href="https://www-net.scc.kit.edu/~netadmin/natvs/user/wrapper.cgi/"
target="_blank" class="nav-link">NATVS+</a>
</li>
<li class="nav-item">
<a href="https://www-net.scc.kit.edu/~netadmin/netdoc/user/wrapper.cgi/"
target="_blank" class="nav-link">NETDOC</a>
</li>
</ul>
<form method="get" action="/search" class="d-none d-xl-block form-inline my-2 my-lg-0">
<div class="input-group mr-sm-2">
<div id="scope_filter_display" class="input-group-prepend">
<span class="input-group-text">DNSVS</span>
</div>
<input class="form-control" type="search" id="nav-search" name="search"
placeholder="Suchbegriff"
aria-label="Search">
<div class="input-group-append">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="navbar-item">
<a href="/search" class="nav-link">
<span class="d-none d-xl-inline">Erweiterte </span>Suche
</a>
<li class="navbar-item">
<a href="#" id="view-transactions" class="nav-link" data-trigger="focus"
title="Aktuelle Transaktion" data-placement="bottom"
data-content="Hier befindet sich jetzt Ihre geplante Änderung. Alle Änderungen werden erst nach deren Anwendung aktiv.">
<i class="fas fa-tasks" aria-hidden="true"></i> Transaktion <span
class="badge badge-pill badge-success"
id="trans_count">0</span>
</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true"
aria-expanded="false">
<font-awesome-icon :icon="['far', 'user']"></font-awesome-icon>
qk4553 <span
class="caret"></span></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="/logout">Abmelden</a>
</div>
</li>
</ul>
</b-collapse><!-- /.navbar-collapse -->
</b-navbar>
<div id="wrapper">
<div id="page-content-wrapper">
<div class="container">
<b-breadcrumb :items="breadcrumbs"/>
<router-view/>
<footer>
<hr>
<p class="pull-right d-print-none">
<a target="_blank" href="https://www-net-doku.scc.kit.edu/webapi/release/dnscfg-perms/"><font-awesome-icon :icon="['far', 'life-ring']"></font-awesome-icon> Hilfe/Dokumentation</a> |
<a target="_blank" href="https://www-net-devel-doku.scc.kit.edu/webapi/release/intro/"><font-awesome-icon icon="code"></font-awesome-icon> API</a> |
<a target="_blank" href="https://git.scc.kit.edu/scc-net/net-suite/net-suite/issues"><font-awesome-icon icon="bug"></font-awesome-icon> Fehler melden</a> |
Kontakt: <a href="mailto:dns-betrieb@scc.kit.edu">dns-betrieb∂scc.kit.edu</a>
</p>
<p class="pull-left">Instanz: {{$sysinfo.host_oper_mode.mode}} | <b-link v-b-modal.net-suite-version>Version</b-link></p>
<b-modal class="text-center" id="net-suite-version" hide-footer hide-header>
<img alt="SCC" src="@/assets/img/scc_logo_small.png"/>
<h3>NET-Suite</h3>
<p>
Version <a :href="`https://git.scc.kit.edu/scc-net/net-suite/net-suite/commit/${$sysinfo.version}`" target="_blank">{{$sysinfo.version}}</a>
</p>
Module:
<ul>
<li v-for="m in $sysinfo.mods" :key="m.mod_path">MOD_{{m.mod_path}}:
<a target="_blank" :href="`${m.gitlab_url}/commit/${m.version}`">{{m.version}}</a></li>
</ul>
</b-modal>
</footer>
</div>
</div>
</div>
</div>
</template>
<style lang="scss">
@import '../node_modules/bootstrap/scss/bootstrap.scss';
@import '../node_modules/bootstrap-vue/dist/bootstrap-vue.css';
@import 'assets/css/net-suite.css';
@import 'assets/css/net-suite-devel.css';
@import 'assets/css/net-suite-test.css';
</style>
<script>
export default {
data() {
return {
breadcrumbs: []
}
},
watch: {
$route(to, from) {
var m = this.$router.currentRoute.matched
m = m[m.length - 1]
var res = [{text: m.meta.resolveName(this.$route.params), path: m.path}]
while ((m.meta && m.meta.resolveParent) || m.parent) {
if (m.meta && m.meta.resolveParent) {
m = this.$router.resolve(m.meta.resolveParent(this.$route.params)).resolved.matched
m = m[m.length-1]
} else {
m = m.parent
}
console.log(m)
res.unshift({text: m.meta.resolveName(this.$route.params), to: m.path})
}
this.breadcrumbs = res
}
},
methods: {
upd_bread() {
var m = this.$router.currentRoute.matched
var res = []
for (var i = 0; i < m.length; i++) {
res.push({text: m.name, to: m.path})
}
console.log(m)
this.breadcrumbs = res
}
}
}
</script>
import Axios from 'axios';
const RESOURCE_NAME = '/api/colnames';
export default {
getAll() {
return Axios.get(RESOURCE_NAME)
}
};
import Axios from 'axios';
const RESOURCE_NAME = '/api/login';
export default {
login(username, password) {
return Axios.post(RESOURCE_NAME, {'username': username, 'password': password})
}
};
import Axios from 'axios';
const RESOURCE_NAME = '/api/dnsvs/range';
export default {
getAll() {
return Axios.get(RESOURCE_NAME);
},
get(name, suffix) {
return Axios.get(`${RESOURCE_NAME}/${name}/${suffix}`);
},
getRecords(name, suffix) {
return Axios.get(`${RESOURCE_NAME}/${name}/${suffix}/records`);
},
};
import Axios from 'axios';
const RESOURCE_NAME = '/api/system_info';
export default {
getAll() {
return Axios.get(RESOURCE_NAME)
}
};
body {
padding-top: 70px;
position: relative;
}
svg {
fill: currentColor !important;
}
.area-sidebar > .nav-item > a.nav-link.active:focus, .area-sidebar > .nav-item > a.nav-link.active, .area-sidebar > .nav-item > a.nav-link.active {
background-color: transparent;
border-left: 2px solid #2a7c3b;
color: #2a7c3b;
font-weight: 700;
padding-left: 18px;
}
.area-sidebar .nav > li > a {
color: #767676;
display: block;
font-size: 13px;
font-weight: 500;
padding: 4px 20px;
}
.btn.btn-outline-reset {
background-color: #fff;
color: #de7e00;
border-color: #fc9403
}
.btn.btn-outline-reset:hover {
background-color: #fc9403;
border-color: #de7e00;
color: #fff;
}
.btn {
margin-right: .25em;
}
[class*="col-"] {
margin-bottom: 25px;
}
#area-nav {
position: sticky;
top: 130px;
}
.scc-img {
height: 30px;
}
.container {
width: 90% !important;
max-width: 100vw !important;
}
.logincont {
padding-left: 35px;
width: calc(100% - 205px);
}
.logincont textarea {
margin-bottom: 1em;
}
@media (max-width: 991px) {
.logincont {
padding-left: 0px;
width: 100%;
}
}
.mouse-link {
cursor: pointer;
}
.card-table {
width: 100%;
}
.table-responsive {
display: table;
}
.table-responsive.collapse:not(.show) {
display: none;
}
.padding-card-sections {
margin: 15px 0;
}
.btn {
cursor: pointer;
}
@-moz-keyframes rotatecaret /*--for firefox--*/
{
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(-180deg);
}
}
@-webkit-keyframes rotatecaret /*--for webkit--*/
{
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-180deg);
}
}
@keyframes rotatecaret /*--for firefox--*/
{
from {
transform: rotate(0deg);
}
to {
transform: rotate(-180deg);
}
}
@-moz-keyframes rotatecaret-back /*--for firefox--*/
{
from {
-moz-transform: rotate(-180deg);
}
to {
-moz-transform: rotate(0deg);
}
}
@-webkit-keyframes rotatecaret-back /*--for webkit--*/
{
from {
-webkit-transform: rotate(-180deg);
}
to {
-webkit-transform: rotate(0deg);
}
}
@keyframes rotatecaret-back /*--for firefox--*/
{
from {
transform: rotate(-180deg);
}
to {
transform: rotate(0deg);
}
}
.rotatecaret {
animation-name: rotatecaret;
animation-duration: 300ms;
animation-fill-mode: forwards;
transform: rotate(-180deg);
}
.rotatecaret-up {
animation-name: rotatecaret-back;
animation-duration: 300ms;
animation-fill-mode: forwards;
transform: rotate(0deg);
}
table.collapse.in {
display: table;
}
.net-header {
position: sticky;
top: 51px;
background-color: rgba(255, 255, 255, 1);
z-index: 10;
padding: 15px 0;
}
.net-header small, .net-header code {
font-size: .6em !important;
}
.net-filter {
position: sticky;
top: 110px;
background: rgba(255, 255, 255, 0.9);
padding: 20px 0;
z-index: 10;
}
.net-filter-direct {
top: 40px;
position: sticky;
background: rgba(255, 255, 255, 0.9);
padding: 20px 0;
z-index: 10;
}
.inline {
display: inline;
}
/*
Anchor offset for fixed header
*/
.rr-list-anchor {
padding-top: 200px;
margin-top: -200px;
}
.rr-head-anchor {
padding-top: 130px;
margin-top: -130px;
}
.vertical-center {
display: table-cell;
vertical-align: middle !important;
}
.fill {