Commit ea0d499a authored by Janis Streib's avatar Janis Streib 🦉
Browse files

Nettvs

parent b2190c31
Pipeline #144381 passed with stages
in 6 minutes and 32 seconds
<template>
<div id="app">
<Navbar/>
<div id="wrapper" :class="$store.state.show_sidebar ? 'squished' : null">
<div id="page-content-wrapper">
<div class="container">
<b-alert v-if="$sysinfo.host_oper_mode.is_devel" show variant="warning">
<b-row>
<b-col cols="1" style="margin-top: auto; margin-bottom: auto" class="vertical-center">
<font-awesome-icon :icon="['fas', 'dumpster-fire']" size="3x"></font-awesome-icon>
</b-col>
<b-col style="margin-top: auto; margin-bottom: auto">
<template v-if="$store.state.spec_ready || $route.path !== '/'">
<Navbar/>
<div id="wrapper" :class="$store.state.show_sidebar ? 'squished' : null">
<div id="page-content-wrapper">
<div class="container">
<b-alert v-if="$sysinfo.host_oper_mode.is_devel" show variant="warning">
<b-row>
<b-col cols="1" style="margin-top: auto; margin-bottom: auto" class="vertical-center">
<font-awesome-icon :icon="['fas', 'dumpster-fire']" size="3x"></font-awesome-icon>
</b-col>
<b-col style="margin-top: auto; margin-bottom: auto">
<span><b> WIP!</b>
Diese Anwendung befindet sich in aktiver Entwicklung. Einige Features könnten eingeschränkt funktionieren oder unerwartete Ergebnisse liefern.</span>
</b-col>
</b-row>
</b-alert>
<b-breadcrumb :items="breadcrumbs"/>
<router-view v-bind:key="$store.state.reload_count"/>
<Footer/>
</b-col>
</b-row>
</b-alert>
<b-breadcrumb :items="breadcrumbs"/>
<router-view v-bind:key="$store.state.reload_count"/>
<Footer/>
</div>
</div>
<b-card id="sidebar-wrapper" no-body :class="$store.state.show_sidebar ? 'hide' : null">
<Sidebar/>
</b-card>
</div>
<b-card id="sidebar-wrapper" no-body :class="$store.state.show_sidebar ? 'hide' : null">
<Sidebar/>
</b-card>
</div>
<b-modal content-class="text-center" centered id="net-suite-error" hide-footer hide-header size="lg">
<h1>
<font-awesome-icon icon="poo-storm" size="3x"></font-awesome-icon>
</h1>
<h3>Etwas ist schief gelaufen...</h3>
<CopyField class="shadow" variant="danger"
:text="global_error"
multiline/>
<hr/>
<a target="_blank" href="https://git.scc.kit.edu/scc-net/netvs/netvs-core/issues">
<font-awesome-icon icon="bug"/>
Fehler melden</a> |
Unterstützung für diese Anwendung und die API: <a href="mailto:netvs@scc.kit.edu">netvs∂scc.kit.edu</a>
</b-modal>
<b-modal content-class="text-center" centered id="net-suite-error" hide-footer hide-header size="lg">
<h1>
<font-awesome-icon icon="poo-storm" size="3x"></font-awesome-icon>
</h1>
<h3>Etwas ist schief gelaufen...</h3>
<CopyField class="shadow" variant="danger"
:text="global_error"
multiline/>
<hr/>
<a target="_blank" href="https://git.scc.kit.edu/scc-net/netvs/netvs-core/issues">
<font-awesome-icon icon="bug"/>
Fehler melden</a> |
Unterstützung für diese Anwendung und die API: <a href="mailto:netvs@scc.kit.edu">netvs∂scc.kit.edu</a>
</b-modal>
</template>
<template v-else-if="ready && !$store.state.spec_ready">
<Netflix/>
</template>
</div>
</template>
......@@ -47,13 +52,15 @@ import CopyField from './components/CopyField'
import Footer from './components/Footer'
import Sidebar from './components/Sidebar'
import {EventBus} from '@/eventbus'
import Netflix from '@/views/Netflix'
export default {
components: {Sidebar, Footer, Navbar, CopyField},
components: {Sidebar, Footer, Navbar, CopyField, Netflix},
data() {
return {
global_error: null,
breadcrumbs: []
breadcrumbs: [],
ready: false
}
},
watch: {
......@@ -104,6 +111,11 @@ export default {
self.global_error = JSON.stringify(self.global_error, null, 4)
this.$bvModal.show('net-suite-error')
})
if (!this.$store.state.user) {
this.$router.push('/login')
}
window.console.debug('Path' + window.location.pathname)
this.ready = window.location.pathname === '/' || window.location.pathname.trim() === '' || this.$route.path === '/'
}
}
</script>
......
......@@ -13,29 +13,7 @@
<!-- Collect the nav links, forms, and other content for toggling -->
<b-collapse is-nav id="navbarNavDropdown" ref="navdropdown">
<b-navbar-nav>
<b-nav-item v-if="$sysinfo_js_mods.includes('dnsvs') && $store.state.token" to="/dnsvs/"
:active="$route.path.startsWith('/dnsvs/')">DNSVS
</b-nav-item>
<b-nav-item v-if="$sysinfo_js_mods.includes('macauth') && $store.state.token" to="/macauth/"
:active="$route.path.startsWith('/macauth')">MACAuth
</b-nav-item>
<b-nav-item v-if="$sysinfo_mods_by_name['dhcp_leases'] && $store.state.token" to="/dhcp-leases/"
:active="$route.path.startsWith('/dhcp-leases/')">DHCP-Leases
</b-nav-item>
<b-nav-item v-if="$sysinfo_js_mods.includes('netdoc')" to="/netdoc/"
:active="$route.path.startsWith('/netdoc/')">
NETDOC
</b-nav-item>
<b-nav-item
:href="$sysinfo.host_oper_mode.is_prod?'https://www-net.scc.kit.edu/~netadmin/natvs/user/wrapper.cgi/':`https://www-net-${$sysinfo.host_oper_mode.mode}.scc.kit.edu/~netadmin/natvs/user/wrapper.cgi/`"
target="_blank">
NATVS+
</b-nav-item>
<b-nav-item
:href="$sysinfo.host_oper_mode.is_prod?'https://www-net.scc.kit.edu/~netadmin/netdoc/user/wrapper.cgi/':`https://www-net-${$sysinfo.host_oper_mode.mode}.scc.kit.edu/~netadmin/netdoc/user/wrapper.cgi/`"
target="_blank">
Netdoc
</b-nav-item>
<NavbarContent></NavbarContent>
</b-navbar-nav>
<b-navbar-nav class="ml-auto">
<GlobalSearch v-if="$store.state.user"/>
......@@ -105,10 +83,11 @@
<script>
import LoginService from '@/api-services/login.service'
import GlobalSearch from '@/components/GlobalSearch'
import NavbarContent from '@/components/NavbarContent'
export default {
name: 'Navbar',
components: {GlobalSearch},
components: {NavbarContent, GlobalSearch},
data() {
return {
usr_ico: 'user',
......
<template>
<b-nav :style="n_style" :class="n_class">
<b-nav-item v-if="$sysinfo_js_mods.includes('dnsvs') && $store.state.token" to="/dnsvs/"
:active="$route.path.startsWith('/dnsvs/')">DNSVS
</b-nav-item>
<b-nav-item v-if="$sysinfo_js_mods.includes('macauth') && $store.state.token" to="/macauth/"
:active="$route.path.startsWith('/macauth')">MACAuth
</b-nav-item>
<b-nav-item v-if="$sysinfo_mods_by_name['dhcp_leases'] && $store.state.token" to="/dhcp-leases/"
:active="$route.path.startsWith('/dhcp-leases/')">DHCP-Leases
</b-nav-item>
<b-nav-item v-if="$sysinfo_js_mods.includes('netdoc')" to="/netdoc/"
:active="$route.path.startsWith('/netdoc/')">
NETDOC
</b-nav-item>
<b-nav-item
:href="$sysinfo.host_oper_mode.is_prod?'https://www-net.scc.kit.edu/~netadmin/natvs/user/wrapper.cgi/':`https://www-net-${$sysinfo.host_oper_mode.mode}.scc.kit.edu/~netadmin/natvs/user/wrapper.cgi/`"
target="_blank">
NATVS+
</b-nav-item>
<b-nav-item
:href="$sysinfo.host_oper_mode.is_prod?'https://www-net.scc.kit.edu/~netadmin/netdoc/user/wrapper.cgi/':`https://www-net-${$sysinfo.host_oper_mode.mode}.scc.kit.edu/~netadmin/netdoc/user/wrapper.cgi/`"
target="_blank">
Netdoc
</b-nav-item>
</b-nav>
</template>
<script>
export default {
name: 'NavbarContent',
props: {
n_style: {
type: String,
required: false
},
n_class: {
type: String,
required: false
}
}
}
</script>
......@@ -50,7 +50,12 @@ import {
faEthernet,
faPooStorm,
faTools,
faSync
faSync,
faBell,
faGift,
faPlay,
faThumbsUp,
faThumbsDown
} from '@fortawesome/free-solid-svg-icons'
import {
......@@ -121,5 +126,10 @@ library.add(
faEthernet,
faPooStorm,
faTools,
faSync
faSync,
faBell,
faGift,
faPlay,
faThumbsUp,
faThumbsDown
)
......@@ -69,6 +69,7 @@ async function init() {
const store = new Vuex.Store({
state: {
spec_ready: !(new Date().getMonth() === 4 || new Date().getDate() === 1),
user: session_info ? session_info.user : null,
token: session_info ? session_info.token : null,
ta_list: JSON.parse(window.localStorage.getItem('ta_list')),
......
......@@ -14,10 +14,7 @@
export default {
name: 'Home',
created() {
if (!this.$store.state.user) {
this.$router.push('/login')
}
if (this.$store.state.token) {
if (this.$store.state.token && this.$store.state.spec_ready) {
this.$router.push('/dnsvs/bcds')
}
}
......
......@@ -70,6 +70,9 @@ export default {
if (redir === '/' || redir === '/dnsvs') {
redir = '/dnsvs/bcds'
}
if (!this.$store.state.spec_ready) {
redir = '/'
}
router.push(redir)
} else {
// TODO: invalid login
......
<template>
<div class="netflix">
<b-row class="netflix-navbar">
<img alt="Netvs" src="@/assets/img/netvs_logo.png" class="netvs-logo"/>
<NavbarContent n_class="navigation" n_style="min-width: 260px"></NavbarContent>
<GlobalSearch class="netflix-search"/>
<div class="notification-bell">
<font-awesome-icon class="bell-icon" :icon="['fas', 'bell']" size="2x"/>
<div class="notification-badge">0</div>
</div>
<b-dropdown v-if="$store.state.user" right
:toggle-class="$route.path.startsWith('/user/')?'active':''">
<template slot="button-content">
<img alt="User" src="@/assets/img/user.png" class="user-icon"/>
</template>
<template v-if="$store.state.user">
<b-dropdown-item v-if="$store.state.token" to="/user/tokens" :active="$route.path === '/user/tokens'">
<font-awesome-icon dixed-width :icon="['fas', 'code']"/>
Unterkonten & API-Tokens
</b-dropdown-item>
<b-dropdown-divider v-if="$store.state.token" />
<b-dropdown-item @click="logout">
<font-awesome-icon fixed-width :icon="['fas', 'sign-out-alt']"/>
Abmelden
</b-dropdown-item>
</template>
</b-dropdown>
</b-row>
<div class="video-background">
<div class="video-gradient"/>
<video autoplay muted loop class="video-background-video">
<source src="@/assets/img/cringe_trailer.mp4" type="video/mp4">
</video>
</div>
<b-modal size="xl" hide-footer hide-header id="play_me" entered body-class="p-0" body-bg-variant="dark">
<video controls autoplay style="width: 100%">
<source src="@/assets/img/cringe2.mp4" type="video/mp4">
</video>
</b-modal>
<b-row class="movie-preview" align-v="center">
<b-col offset-md="2" offset-sm="1" md="6">
<div class="movie-preview-text p-4">
<h1>{{ random_item(titles) }}</h1>
<p style="opacity: .75; width: 25vw; min-width: 300px">{{random_item(abstracts) }}</p>
<b-button v-b-modal.play_me variant="light" style="border: none; margin-right: 5px">
<font-awesome-icon :icon="['fas','play']"/>
<b> Abspielen</b></b-button>
<b-button style="background-color:rgba(255,255,255,.25); border: none" v-b-modal.more-info><b>Mehr Infos</b></b-button>
<b-modal id="more-info" title="April, April..." centered body-class="text-center">
Es ist mal wieder so weit. Ganz liebe Grüße und einen verwirrenden Tag wünscht das NETVS Team! 🤡<br>
Die Texte wurden übrigens von 😱<b>Künstlicher Intelligenz</b>😱 aus <a href="https://www.kit.edu/" target="_blank">kit.edu</a> Inhalten erdichtet.
<a href="https://app.inferkit.com/demo" target="_blank">Viel Spaß beim Ausprobieren!</a>
<template #modal-footer="{ ok, cancel}">
<b-button size="sm" variant="danger" @click="cancel()">
Nicht OK
</b-button>
<b-button size="sm" variant="primary" @click="ok()">
OK
</b-button>
</template>
</b-modal>
</div>
</b-col>
</b-row>
<b-row class="continue-watching-title">
<b-col offset-md="1">
<h4>Mit dem Profil von {{$store.state.user.login_name}} weiterschauen</h4>
<div class="container-fluid pl-0">
<b-row class="movie-suggestions flex-row flex-nowrap p-2">
<b-col v-for="thumbnail in thumbnails" :key="thumbnail" class="movie-suggestion">
<b-aspect aspect="16:9" class="movie-suggestion-img">
<img :src="thumbnail" class="img-fluid"/>
</b-aspect>
<h5 class="movie-suggestion-title">{{random_item(titles)}}</h5>
<div class="movie-suggestion-info">
<div class="movie-suggestion-btns">
<button class="movie-suggestion-btn active">
<font-awesome-icon :icon="['fas','play']"/>
</button>
<button class="movie-suggestion-btn">
<font-awesome-icon :icon="['fas','plus']"/>
</button>
<button class="movie-suggestion-btn">
<font-awesome-icon :icon="['fas','thumbs-up']"/>
</button>
<button class="movie-suggestion-btn">
<font-awesome-icon :icon="['fas','thumbs-down']"/>
</button>
</div>
<div class="p-3">
<p>
<nobr><span class="match-text">{{ Math.floor(Math.random() * 30) + 70 }}% Übereinstimmung</span>
</nobr>
<span
class="age-rating">{{ random_item(age_ratings) }}</span>
<nobr> {{ Math.floor(Math.random() * 15) }} Teile</nobr>
</p>
<p> {{ random_item(tags) }} <span
style="color: rgba(255,255,255,.5); padding-left: 3px; padding-right: 3px">&#8226; </span>
{{ random_item(tags) }} <span
style="color: rgba(255,255,255,.5); padding-left: 3px; padding-right: 3px">&#8226; </span>
{{ random_item(tags) }}</p>
</div>
</div>
</b-col>
</b-row>
</div>
</b-col>
</b-row>
<div class="bottom-space"/>
<div class="p-4"><Footer/></div>
</div>
</template>
<script>
import GlobalSearch from '@/components/GlobalSearch'
import NavbarContent from '@/components/NavbarContent'
import Footer from '@/components/Footer'
export default {
name: 'Netflix',
components: {Footer, NavbarContent, GlobalSearch},
created() {
this.shuffle_list(this.thumbnails)
},
data() {
return {
abstracts: [
'Alle Arbeiten in unseren Universitäten und technischen Instituten werden nicht mehr von Menschen durchgeführt. Auch in der wissenschaftlichen Forschung und Entwicklung führen wir nur noch begrenzt Experimente durch. Das Labor ist jetzt der Ort, an dem wir neue Menschen bauen. Das betrifft auch die Menschen, die hier arbeiten. Sie sind natürlich nicht in der Stimmung, darüber zu sprechen, was im nächsten Jahr passieren wird. Wir sind alle überrascht und nervös.',
'Das KIT SCC ist eine einheitliche IT-Umgebung, einschließlich eines privaten und eines öffentlichen Bereichs, sowohl für die Regierung als auch für die Universitätsgemeinschaft. Ein neu errichteter KIT-Server für PIM und ein Netzwerkbereich für das 3G-Netz an der Karl-Ferdinand-von-Ossietzky-Universität in Hamburg sorgen für eine zuverlässige Verbindung sowohl für die Regierung als auch für die Universitätsgemeinschaft. Als erste Stufe ist das Netz in das öffentliche Funknetz der Universität integriert.'
],
thumbnails: ['spaghett.jpg', 'robocop.jpg', 'over_9000.jpg', 'dj.jpg', 'coop.jpg'],
age_ratings: [0, 6, 12, 18, 69],
titles: ['Tales of Boy', 'The Thing of the History', 'Why My Mother Told', 'Keeping the Traveling Pants 2', 'Eight Days To You', 'Double Life of Terror in Town', 'Glass House Next Door', 'Tränen des Kaisers', 'Der Zauberer der Berührung', 'Traum im Geheimnis', 'Die Seelen des Steins', 'Der Himmel der Prinzessin'],
tags: ['Affig', 'Ulkig', 'Schräg', 'KIT', 'Realistisch', 'Träge', 'Abstrakt', 'Hoch', 'Schnell', 'Horror', 'Mathematisch', 'Cyber', 'Digital', 'Campus 4.0', 'Spannend', 'Gruselig', 'Prokrastination']
}
},
methods: {
random_item(list) {
return list[Math.floor(Math.random() * list.length)]
},
shuffle_list(list) {
for (let i = list.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1))
const temp = list[i]
this.$set(list, i, list[j])
this.$set(list, j, temp)
}
}
}
}
</script>
<style scoped>
.netflix {
position: absolute;
top: 0;
left: 0;
right: 0;
background: black;
color: white;
overflow-x: hidden;
}
.netflix-navbar {
background: #141414;
height: 68px;
width: 100vw;
padding: 0 88px 0 88px;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
flex-wrap: nowrap;
}
.netvs-logo {
height: 50%;
margin-right: 20px;
}
.navigation {
flex: 1;
}
/deep/ .nav-link {
color: #bfbfbf;
padding: 3px 8px 3px 8px;
}
/deep/ .nav-link.active {
color: white;
font-weight: 500;
}
.user-icon {
border-radius: 6px;
height: 70%;
}
.user-dropdown {
margin: 10px;
}
.bell-icon {
margin-right: 30px;
height: 25px;
}
.kids-link {
margin-right: 30px;
color: white;
}
.netflix-search {
padding-right: 10px;
}
.notification-bell {
position: relative;
}
.notification-badge {
width: 18px;
height: 18px;
background: red;
position: absolute;
border-radius: 50%;
text-align: center;
line-height: 18px;
top: -4px;
left: 12px;
font-size: 14px;
}
.movie-preview {
min-height: 60vh;
z-index: 3;
position: relative;
}
.movie-suggestions {
z-index: 3;
position: relative;
}
.movie-suggestion {
transition: transform 300ms, margin-right 300ms, margin-left 300ms;
padding: 5px;
min-width: 300px;
}
.movie-suggestion:hover {
transform: scale(1.2) translateY(-100px);
z-index: 5;
margin-left: 40px;
margin-right: 40px;
}
.movie-suggestion-img {
position: relative;
z-index: 5;
}
.movie-suggestion:hover > .movie-suggestion-img img {
border-radius: 6px 6px 0 0;
}
.movie-suggestion-btn {
width: 35px;
height: 35px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, .6);
background: rgba(255, 255, 255, .05);
color: white;
margin: 5px;
}
.movie-suggestion-btn.active {
background: white;
color: black;
}
.match-text {
color: #57C387;
font-weight: bold;
margin-right: 5px;
}
.age-rating {
border: 1px solid rgba(255, 255, 255, .5);
padding: 1px 5px;
margin: 5px;
}
.movie-suggestion-info {
transition: transform 250ms, opacity 250ms;
padding: 10px;
background: #191819;
border-radius: 0 0 8px 8px;
position: relative;
top: 0;
left: 0;
right: 0;
transform: translateY(-100px);
opacity: 0;
font-size: 83%;
max-height:0;
}
.movie-suggestion:hover > .movie-suggestion-info {
transform: translateY(0);
opacity: 1;
height:auto;
}
.video-background {
position: absolute;
}