doc

alex

2025-06-13 67fac4670b104afbea6976bd4a12f62d7b39c5c4

 vue/src/App.vue

@@ -1,47 +1,90 @@
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'

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_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>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>
   <header>
      <Header />
   </header>

  <main>
    <TheWelcome />
  </main>
   <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 scoped>
header {
  line-height: 1.5;
<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"
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}
header
   position fixed;
   top 0
   left 0
   right 0

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }
main
   margin 0 auto
   padding 0 1em
   margin-top 3rlh
   max-width 1280px;

  .logo {
    margin: 0 2rem 0 0;
  }
footer
   padding 1.5em 0

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
//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>