<script setup>
|
|
import Header from "./components/Header.vue"
|
import {apiTokenValid, setApiToken} from './lib/api.js'
|
import "./assets/styles.styl"
|
import {ref, watch} from "vue"
|
import {useDebounceFn} from '@vueuse/core'
|
|
console.log("import.meta.env.VITE_API_BASE",import.meta.env.VITE_API_BASE)
|
console.log("import.meta.env.VITE_ILIAS_BASE",import.meta.env.VITE_ILIAS_BASE)
|
console.log("import.meta.env.VITE_POPCORN_BASE",import.meta.env.VITE_POPCORN_BASE2)
|
console.log("import.meta.env.VITE_ROUTER_BASE",import.meta.env.VITE_ROUTER_BASE)
|
|
const apiToken = ref("")
|
|
function updateApiToken (evt) {
|
console.log("update apiToken ", apiToken.value)
|
console.log(evt)
|
setApiToken(apiToken.value)
|
}
|
|
|
</script>
|
|
<template>
|
|
<header>
|
<Header />
|
</header>
|
|
<main>
|
<RouterView v-if="apiTokenValid" />
|
<div v-if="!apiTokenValid">
|
<form @submit.prevent="updateApiToken" style="display:flex; gap: .33em">
|
Enter API Token: <input v-model="apiToken" name="apiToken" size="32" />
|
<input type="submit" value="Save" autofocus />
|
</form>
|
</div>
|
</main>
|
|
<footer></footer>
|
|
</template>
|
|
<style lang="stylus">
|
|
html, body {
|
margin 0
|
padding 0
|
font-family ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji"
|
}
|
|
header
|
position fixed;
|
top 0
|
left 0
|
right 0
|
|
main
|
margin 0 auto
|
padding 0 1em
|
margin-top 3rlh
|
max-width 1280px;
|
|
footer
|
padding 1.5em 0
|
|
//border 1px solid orange
|
|
table
|
border 1px solid
|
border-collapse collapse
|
|
thead
|
background-color #ccc;
|
|
tbody
|
tr:nth-child(even)
|
background-color #eee;
|
|
td, th
|
margin 0
|
padding .33em .66em
|
border 1px solid #ccc
|
|
|
small
|
color #555
|
font-size .66em;
|
|
</style>
|
