bootstrap pokracovani

5 months ago · 6b3d4768ce
19 changed files with 11618 additions and 1 deletions
--- a/vue/11_routerclock/routerclock/src/views/AboutView.vue
+++ b/vue/11_routerclock/routerclock/src/views/AboutView.vue
@ -1,5 +1,35 @@
 <template>
  <div class="about">
    <h1>This is an about page</h1>
    <h1> Kontakt </h1>
    <br>
    <form>
      <div class="mb-3">
        <label for="nameIn" class="form-label">Jméno:</label>
        <input type="text" id="nameIn" name="nameIn" 
        v-model="name" class="form-control"
        placeholder="Napiště jméno zde">
      </div>
      <div class="mb-3">
        <label for="textTest" class="form-label">Váš text</label>
        <textarea name="textTest" id="textTest"
        v-model="message" class="form-control"
        placeholder="Napište svou zpravu sem..."></textarea>
      </div>
      <button type="submit" class="btn btn-outline-primary">ODESLAT</button>
    </form>
  </div>
 </template>
 <script>
 export default {
  name: "AboutView",
  data() {
    return {
      name: "",
      message: "",
    }
  }
 }
 </script>
--- a/vue/14_bootstrapintro2/bootintro2/.browserslistrc
+++ b/vue/14_bootstrapintro2/bootintro2/.browserslistrc
@ -0,0 +1,4 @@
 > 1%
 last 2 versions
 not dead
 not ie 11
--- a/vue/14_bootstrapintro2/bootintro2/.eslintrc.js
+++ b/vue/14_bootstrapintro2/bootintro2/.eslintrc.js
@ -0,0 +1,17 @@
 module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
 }
--- a/vue/14_bootstrapintro2/bootintro2/.gitignore
+++ b/vue/14_bootstrapintro2/bootintro2/.gitignore
@ -0,0 +1,23 @@
 .DS_Store
 node_modules
 /dist
 # local env files
 .env.local
 .env.*.local
 # Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 # Editor directories and files
 .idea
 .vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
--- a/vue/14_bootstrapintro2/bootintro2/README.md
+++ b/vue/14_bootstrapintro2/bootintro2/README.md
@ -0,0 +1,24 @@
 # bootintro
 ## Project setup
 ```
 npm install
 ```
 ### Compiles and hot-reloads for development
 ```
 npm run serve
 ```
 ### Compiles and minifies for production
 ```
 npm run build
 ```
 ### Lints and fixes files
 ```
 npm run lint
 ```
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/vue/14_bootstrapintro2/bootintro2/babel.config.js
+++ b/vue/14_bootstrapintro2/bootintro2/babel.config.js
@ -0,0 +1,5 @@
 module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
 }
--- a/vue/14_bootstrapintro2/bootintro2/jsconfig.json
+++ b/vue/14_bootstrapintro2/bootintro2/jsconfig.json
@ -0,0 +1,19 @@
 {
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
 }
--- a/vue/14_bootstrapintro2/bootintro2/package-lock.json
+++ b/vue/14_bootstrapintro2/bootintro2/package-lock.json
--- a/vue/14_bootstrapintro2/bootintro2/package.json
+++ b/vue/14_bootstrapintro2/bootintro2/package.json
@ -0,0 +1,26 @@
 {
  "name": "bootintro",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "bootstrap": "^5.3.3",
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  }
 }
--- a/vue/14_bootstrapintro2/bootintro2/public/favicon.ico
+++ b/vue/14_bootstrapintro2/bootintro2/public/favicon.ico
--- a/vue/14_bootstrapintro2/bootintro2/public/index.html
+++ b/vue/14_bootstrapintro2/bootintro2/public/index.html
@ -0,0 +1,17 @@
 <!DOCTYPE html>
 <html lang="">
  <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><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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>
--- a/vue/14_bootstrapintro2/bootintro2/src/App.vue
+++ b/vue/14_bootstrapintro2/bootintro2/src/App.vue
@ -0,0 +1,78 @@
 <template>
  <div id="app">
    <!-- Header -->
    <header class="bg-success text-white py-3">
      <div class="container">
        <h1 class="m-1">Název stránky</h1>
      </div>
    </header>
    <!-- navbar -->
    <nav class="navbar navbar-light bg-light">
      <div class="container">
        <ul class="nav nav-pills">
          <li class="nav-item">
            <router-link to="/" class="nav-link" 
            :class="{active: $route.path === '/'}">Home</router-link>
          </li>
          <li class="nav-item">
            <router-link to="/about" class="nav-link" 
            :class="{active: $route.path === '/about'}">About</router-link>
          </li>
        </ul>
      </div>
    </nav>
    <!-- MAIN -->
    <main class="container py-4">
      <router-view/>
    </main>
    <!-- Footer -->
    <footer class="bg-dark text-white py-3 mt-auto">
      <div class="container text-center">
        <small>Příjmení @ {{letosniRok}}</small>
      </div>
    </footer>
  </div>
  <!-- ORIGNAL SIMPLE CODE 
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/> -->
 </template>
 <script>
 export default {
  name: "App",
  computed: {
    letosniRok() {
      return new Date().getFullYear();
    }
  }
 }
 </script>
 <style>
 #app {
  text-align: center;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
 }
 main {
  flex-grow: 1;
 }
 body {
  margin: 0;
 }
 /* nav a.router-link-exact-active {
  color: #42b983;
 } */
 </style>
--- a/vue/14_bootstrapintro2/bootintro2/src/assets/logo.png
+++ b/vue/14_bootstrapintro2/bootintro2/src/assets/logo.png
--- a/vue/14_bootstrapintro2/bootintro2/src/components/HelloWorld.vue
+++ b/vue/14_bootstrapintro2/bootintro2/src/components/HelloWorld.vue
@ -0,0 +1,59 @@
 <template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
 </template>
 <script>
 export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
 }
 </script>
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 h3 {
  margin: 40px 0 0;
 }
 ul {
  list-style-type: none;
  padding: 0;
 }
 li {
  display: inline-block;
  margin: 0 10px;
 }
 a {
  color: #42b983;
 }
 </style>
--- a/vue/14_bootstrapintro2/bootintro2/src/main.js
+++ b/vue/14_bootstrapintro2/bootintro2/src/main.js
@ -0,0 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import "bootstrap"
 import "bootstrap/dist/css/bootstrap.min.css"
 createApp(App).use(router).mount('#app')
--- a/vue/14_bootstrapintro2/bootintro2/src/router/index.js
+++ b/vue/14_bootstrapintro2/bootintro2/src/router/index.js
@ -0,0 +1,25 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
 ]
 const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
 })
 export default router
--- a/vue/14_bootstrapintro2/bootintro2/src/views/AboutView.vue
+++ b/vue/14_bootstrapintro2/bootintro2/src/views/AboutView.vue
@ -0,0 +1,69 @@
 <template>
  <div class="about">
    <h1> Kontakt </h1>
    <br>
    <form @submit.prevent="submitForm">
      <div class="mb-3">
        <label for="nameIn" class="form-label">Jméno:</label>
        <input type="text" id="nameIn" name="nameIn" 
        v-model="name" class="form-control"
        placeholder="Napiště jméno zde">
      </div>
      <div class="mb-3">
        <label for="textTest" class="form-label">Váš text</label>
        <textarea name="textTest" id="textTest"
        v-model="message" class="form-control"
        placeholder="Napište svou zpravu sem..."></textarea>
      </div>
      <button type="submit" class="btn btn-outline-primary">ODESLAT</button>
    </form>
    <div v-if="subMessage" class="mt-4 ">
      <h3> Vaše zpráva</h3>
      <div class="card ">
        <div class="card-body rounded">
          <h5 class="card-title">{{ subName }}</h5>
          <p class="card-text">{{ subMessage }}</p>
        </div>
      </div>
    </div>
  </div>
 </template>
 <script>
 export default {
  name: "AboutView",
  data() {
    return {
      name: "",
      message: "",
      subName: null,
      subMessage: null,
    }
  },
  methods: {
    submitForm() {
      if (this.name.trim() == "" || this.message.trim() == "") {
        alert("Prosím, zadejte své jméno a zprávu!");
        return;
      }
      this.subName = this.name;
      this.subMessage = this.message;
      this.name = "";
      this.message = "";
    }
  }
 }
 </script>
 <style scoped>
 .card {
  border: 2px solid #00ff11;
 }
 .card-body {
  background-color: #ccffbd;
 }
 </style>
--- a/vue/14_bootstrapintro2/bootintro2/src/views/HomeView.vue
+++ b/vue/14_bootstrapintro2/bootintro2/src/views/HomeView.vue
@ -0,0 +1,43 @@
 <template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <br>
    <button type="button" class="btn btn-primary"
    data-bs-toggle="modal" data-bs-target="#exampleModal">
      Otevřít modal
    </button>
    <div class="modal fade" id="exampleModal">
      <div class="modal-dialog"> 
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">TEST</h5>
          </div>
          <div class="modal-body">
            <p>TOTO JE TEST K MODAL</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary"
            data-bs-dismiss="modal">Zavřít</button>
          </div>
        </div>
      </div>
    </div>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
 </template>
 <script>
 // @ is an alias to /src
 import HelloWorld from '@/components/HelloWorld.vue'
 export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
 }
 </script>
--- a/vue/14_bootstrapintro2/bootintro2/vue.config.js
+++ b/vue/14_bootstrapintro2/bootintro2/vue.config.js
@ -0,0 +1,4 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
  transpileDependencies: true
 })