Initial commit

.env

+SITENAME=Příjmy z veřejných rozpočtů
+KEYCLOAK_REMOTE_HOST=https://auth.pirati.cz
+KEYCLOAK_REALM=pirati
+KEYCLOAK_CLIENT_ID=profits
+STYLEGUIDE=https://styleguide.pirati.cz/2.11.0/css/styles.css

.gitignore

+node_modules
+dist
+.nuxt

.gitlab-ci.yml

+image: node:14.13
+
+variables:
+  SITE_NAME: profits.pirati.cz
+  ARTIFACTS_PATH: build
+  REACT_APP_API_BASE_URL: /api
+  WEBHOOK_URL: https://ha-web.pirati.cz
+
+before_script:
+  - apt-get update && DEBIAN_FRONTEND=noninteractive apt-get install -yq curl
+
+build:
+  stage: build
+  script:
+    - npm install
+    - npm run generate
+  after_script:
+    - echo "{\"name\":\"$SITE_NAME\" }" > request.json
+    - "curl -k -H 'Content-Type: application/json' -X POST -d @request.json $WEBHOOK_URL"
+  artifacts:
+    expire_in: 30 min
+    paths:
+     - $ARTIFACTS_PATH
+

README

+https://v2.nuxt.com/docs/get-started/installation/
+
+npm install
+npm run dev
+

layouts/default.vue

+<template>
+<div>
+<nav class="navbar navbar--simple __js-root">
+  <div class="container container--wide navbar__content" :class="{'navbar__content--initialized': true}">
+
+    <div class="navbar__brand my-4 flex items-center lg:pr-8 lg:my-0">
+      <a href="/">
+        <img src="https://styleguide.pirati.cz/latest//images/logo-round-white.svg" class="w-8" />
+      </a>
+      <span class="pl-4 font-bold text-xl lg:pr-8"><a href="/">{{ siteName }}</a></span>
+    </div>
+
+    <div class="navbar__menutoggle my-4 flex justify-end lg:hidden">
+      <a href="#" @click="showNav = !showNav" class="no-underline hover:no-underline">
+        <i class="ico--menu text-3xl"></i>
+      </a>
+    </div>
+
+    <div v-if="showNav || isLgScreen()" class="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto flex items-center">
+
+      <div class="flex-grow">
+          <ul class="navbar-menu text-white" v-if="this.$auth.loggedIn">
+          <li class="navbar-menu__item"><NuxtLink class="navbar-menu__link" to="/functions">Moji funkce</NuxtLink></li>
+          <li class="navbar-menu__item"><NuxtLink class="navbar-menu__link" to="/agents">Moji zmocněnci</NuxtLink></li>
+          <li class="navbar-menu__item"><NuxtLink class="navbar-menu__link" to="/profits">Moji přijmý</NuxtLink></li>
+          </ul>
+      </div>
+
+      <div class="flex items-center space-x-4">
+          <div class="flex items-center space-x-4" v-if="this.$auth.loggedIn">
+            <span class="head-heavy-2xs">{{ this.$auth.user.name }}</span>
+            <div class="avatar avatar--2xs">
+              <img :src="'https://a.pirati.cz/piratar/300/'+this.$auth.user.preferred_username+'.jpg'" :alt="this.$auth.user.name" />
+             </div>
+            <a href="/logout"><button class="text-grey-200 hover:text-white" @click="Logout()"><i class="ico--log-out"></i></button></a>
+          </div>
+          <div class="flex items-center space-x-4" v-if="! this.$auth.loggedIn">
+                  <button class="btn btn--icon btn--grey-125 btn--hoveractive" @click="Login()">
+                    <div class="btn__body-wrap">
+                      <div class="btn__body">Přihlásit se</div>
+                      <div class="btn__icon">
+                        <i class="ico--pirati"></i>
+                      </div>
+                    </div>
+                  </button>
+          </div>
+      </div>
+    </div>
+  </div>
+</nav>
+
+<section class="container container--default py-8">
+<Nuxt/>
+</section>
+
+</div>
+</template>
+
+
+
+<script>
+export default {
+  data () {
+    return {
+      siteName: process.env.SITENAME,
+      showNav: true,
+      config: {},
+    }
+  },
+
+  created () {
+    this.getConfig();
+  },
+
+  head () {
+    return {
+      link: [
+        { rel: 'stylesheet', href: process.env.STYLEGUIDE }
+      ]
+    }
+  },
+
+  methods: {
+
+    isLgScreen() {
+        return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0) > 900;
+    },
+
+    async getConfig() {
+        this.config = await fetch(
+            "https://iapi.pirati.cz/v1/groups",
+            {
+//                headers: {
+//                    "X-Authorization": this.$cookie.get('auth._token.keycloak')
+//                }
+            }
+        ).then(res => res.json() )
+    },
+
+    async Login() {
+      console.log(this.$auth)
+
+      try {
+        this.$auth.loginWith('keycloak')
+      } catch (err) {
+        console.log(err)
+      }
+        console.log(this.$auth)
+        console.log(this.$auth.user)
+    },
+
+    async Logout() {
+      console.log(this.$auth)
+      this.$auth.logout()
+    }
+
+  },
+
+
+}
+</script>
+

nuxt.config.js

+export default {
+  target: 'static',
+  modules: [
+    '@nuxtjs/dotenv',
+    '@nuxtjs/axios',
+    '@nuxtjs/auth-next',
+    '@leandromatos/nuxt-cookie',
+    '@nuxtjs/vuetify'
+  ],
+  auth: {
+    strategies: {
+
+    keycloak: {
+        scheme: 'oauth2',
+        endpoints: {
+          authorization: `${process.env.KEYCLOAK_REMOTE_HOST}/auth/realms/${process.env.KEYCLOAK_REALM}/protocol/openid-connect/auth`,
+          token: undefined,
+          userInfo: `${process.env.KEYCLOAK_REMOTE_HOST}/auth/realms/${process.env.KEYCLOAK_REALM}/protocol/openid-connect/userinfo`,
+          logout: `${process.env.KEYCLOAK_REMOTE_HOST}/auth/realms/${process.env.KEYCLOAK_REALM}/protocol/openid-connect/logout?redirect_uri=`
+                    + encodeURIComponent(String(process.env.REMOTE_API))
+        },
+        token: {
+          property: 'access_token',
+          type: 'Bearer',
+          name: 'Authorization',
+          maxAge: 1800
+        },
+        refreshToken: {
+          property: 'refresh_token',
+          maxAge: 60 * 60 * 24 * 30
+        },
+        responseType: 'token',
+        grantType: 'authorization_code',
+        clientId: process.env.KEYCLOAK_CLIENT_ID,
+        scope: ['openid', 'profile'],
+        codeChallengeMethod: 'S256',
+      }
+    },
+  }
+}
+
+
+

package.json

+{
+  "name": "Profits",
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "generate": "nuxt generate",
+    "start": "nuxt start"
+  },
+  "dependencies": {
+    "@leandromatos/nuxt-cookie": "^0.0.1",
+    "@nuxtjs/auth-next": "^5.0.0-1667386184.dfbbb54",
+    "@nuxtjs/axios": "^5.13.6",
+    "@nuxtjs/dotenv": "^1.4.1",
+    "nuxt": "^2.16.1"
+  },
+  "devDependencies": {
+    "@nuxtjs/vuetify": "^1.12.3"
+  }
+}

pages/agents.vue

+<template>
+<main>
+  <h1 class="head-alt-md mb-8">Moji zmocněnci</h1>
+  <p>
+    Jsem vělice zaněprazdněný věřejný funkcionář a nemam čas na vedeni evidence přijmu. Proto předam plnou moc k tomuto ukolu své asistentce nebo asistentovi
+  </p>
+</main>
+</template>
+
+<script>
+  export default {
+  }
+</script>
+

pages/functions.vue

+<template>
+<main>
+  <h1 class="head-alt-md mb-8">Moji funkce</h1>
+  <p>
+    Abych zjednodušil zadavání přjmu z veřejných rozpočtů zaeviduji tady sve veřejné funkce
+  </p>
+</main>
+</template>
+
+<script>
+  export default {
+  }
+</script>
+

pages/index.vue

+<template>
+<main>
+  <div>
+    <v-data-table
+      :headers="headers"
+      :items="desserts"
+      :options.sync="options"
+      :server-items-length="totalDesserts"
+      :loading="loading"
+      class="elevation-1"
+    ></v-data-table>
+  </div>
+</main>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        totalDesserts: 0,
+        desserts: [],
+        loading: true,
+        options: {},
+        headers: [
+          {
+            text: 'Dessert (100g serving)',
+            align: 'start',
+            sortable: false,
+            value: 'name',
+          },
+          { text: 'Calories', value: 'calories' },
+          { text: 'Fat (g)', value: 'fat' },
+          { text: 'Carbs (g)', value: 'carbs' },
+          { text: 'Protein (g)', value: 'protein' },
+          { text: 'Iron (%)', value: 'iron' },
+        ],
+      }
+    },
+    watch: {
+      options: {
+        handler () {
+          this.getDataFromApi()
+        },
+        deep: true,
+      },
+    },
+    methods: {
+      getDataFromApi () {
+        this.loading = true
+        this.fakeApiCall().then(data => {
+          this.desserts = data.items
+          this.totalDesserts = data.total
+          this.loading = false
+        })
+      },
+      /**
+       * In a real application this would be a call to fetch() or axios.get()
+       */
+      fakeApiCall () {
+        return new Promise((resolve, reject) => {
+          const { sortBy, sortDesc, page, itemsPerPage } = this.options
+
+          let items = this.getDesserts()
+          const total = items.length
+
+          if (sortBy.length === 1 && sortDesc.length === 1) {
+            items = items.sort((a, b) => {
+              const sortA = a[sortBy[0]]
+              const sortB = b[sortBy[0]]
+
+              if (sortDesc[0]) {
+                if (sortA < sortB) return 1
+                if (sortA > sortB) return -1
+                return 0
+              } else {
+                if (sortA < sortB) return -1
+                if (sortA > sortB) return 1
+                return 0
+              }
+            })
+          }
+
+          if (itemsPerPage > 0) {
+            items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+          }
+
+          setTimeout(() => {
+            resolve({
+              items,
+              total,
+            })
+          }, 1000)
+        })
+      },
+      getDesserts () {
+        return [
+          {
+            name: 'Frozen Yogurt',
+            calories: 159,
+            fat: 6.0,
+            carbs: 24,
+            protein: 4.0,
+            iron: 1,
+          },
+          {
+            name: 'Ice cream sandwich',
+            calories: 237,
+            fat: 9.0,
+            carbs: 37,
+            protein: 4.3,
+            iron: 1,
+          },
+          {
+            name: 'Eclair',
+            calories: 262,
+            fat: 16.0,
+            carbs: 23,
+            protein: 6.0,
+            iron: 7,
+          },
+          {
+            name: 'Cupcake',
+            calories: 305,
+            fat: 3.7,
+            carbs: 67,
+            protein: 4.3,
+            iron: 8,
+          },
+          {
+            name: 'Gingerbread',
+            calories: 356,
+            fat: 16.0,
+            carbs: 49,
+            protein: 3.9,
+            iron: 16,
+          },
+          {
+            name: 'Jelly bean',
+            calories: 375,
+            fat: 0.0,
+            carbs: 94,
+            protein: 0.0,
+            iron: 0,
+          },
+          {
+            name: 'Lollipop',
+            calories: 392,
+            fat: 0.2,
+            carbs: 98,
+            protein: 0,
+            iron: 2,
+          },
+          {
+            name: 'Honeycomb',
+            calories: 408,
+            fat: 3.2,
+            carbs: 87,
+            protein: 6.5,
+            iron: 45,
+          },
+          {
+            name: 'Donut',
+            calories: 452,
+            fat: 25.0,
+            carbs: 51,
+            protein: 4.9,
+            iron: 22,
+          },
+          {
+            name: 'KitKat',
+            calories: 518,
+            fat: 26.0,
+            carbs: 65,
+            protein: 7,
+            iron: 6,
+          },
+        ]
+      },
+    },
+  }
+</script>

pages/login.vue

+<template>
+<main>
+  <h1>Logged in</h1>
+</main>
+</template>
+
+<script>
+  export default {
+  }
+</script>

pages/logout.vue

+<template>
+<main>
+  <h1>Logged out</h1>
+</main>
+</template>
+
+<script>
+  export default {
+  }
+</script>
+

pages/profits.vue

+<template>
+<main>
+  <h1 class="head-alt-md mb-8">Můj profil</h1>
+</main>
+</template>
+
+<script>
+  export default {
+  }
+</script>
+
+