Веб дизајн/Јун 2020

Јунски рок 2020. године одржан је 19. јуна. Поставка је доступна са странице предмета.

1. задатак

Поставка

Направити следећу мини интернет апликацију за интерни рад аеродрома Никола Тесла. Веб апликацију реализовати користећи Вуе технологију.

На почетној страни апликације, направити ХТМЛ форму, преко које могу да се улогују корисници система, а то су запослени на аеродрому и посетиоци. Запослени и посетилац треба да имају могућност уношења корисничког имена и лозинке. У случају исправно унетих података, кориснику треба омогућити рад са остатком система (за сваки тип треба приказати посебну почетну страницу/компоненту након логовања). Уколико корисник не унесе неки од података или унесе погрешне податке, потребно је исписати поруку црвеним словима са могућношћу исправљања грешке.

Запослени на аеродрому након сваке успешне пријаве на систем има могућност да дода нови лет, тако што уноси идентификациони број лета, почетну дестинацију, крајњу дестинацију и дужину трајања лета у минутима. Сва поља морају бити попуњена.

Посетилац након сваке успешне пријаве на систем види табеларни приказ свих летова које постоје. Сви летови који трају дуже од 200 минута, потребно је обојити зеленом бојом. Посетилац може да означи који лет жели да резервише, тако што кликне на дугме Резервиши поред сваког лета у табели. Кликом на дугме Резервиши приказује се нова компонента, на којој се исписују сви резервисани летови тог корисника.

Податке чувати на нивоу лоцалСтораге-а.

Корисници који постоје у систему:

• Име: Петар, Презиме: Петровић, Тип: запослени, Корисничко име: пера, Лозинка: пера123
• Име: Никола, Презиме: Николић, Тип: посетилац, Корисничко име: никола, Лозинка: никола123
• Име: Лазар, Презиме: Лазић, Тип: посетилац, Корисничко име: лаза, Лозинка: лаза123

Студенти треба да користе податке који су наведени у тексту задатка, у супротном губе 5 поена.

НАПОМЕНА: По завршетку колоквијума само срц фолдер пројекта сачувати на L диск.

Решење

App.vue

<template>
<main id="app">
  <router-view />
</main>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  justify-content: center;
  color: #2c3e50;
}
</style>

views

Home.vue

<template>
<section>
  <h1>Login</h1>
  <form @submit.prevent="login()">
    <p>
      <label for="username">Username</label>
      <input type="text" name="username" id="username" v-model="username" required>
    </p>
    <p>
      <label for="password">Password</label>
      <input type="password" name="password" id="password" v-model="password" required>
    </p>
    <input type="submit" value="Login">
    <p class="error">{{error}}</p>
  </form>
</section>
</template>

<style scoped>
label {
  padding-right: 10px;
}
p {
  margin: 0;
  margin-bottom: 2px;
}
.error {
  color: red;
}
</style>

<script>
export default {
  name: 'Home',
  data() {
    return {
      username: '',
      password: '',
      error: '',
      users: []
    }
  },
  created() {
    const savedUsers = localStorage.getItem('users')
    this.users = savedUsers ? JSON.parse(savedUsers) : [
      {
        name: 'Petar',
        surname: 'Petrović',
        username: 'pera',
        password: 'pera123',
        type: 'employee'
      },
      {
        name: 'Nikola',
        surname: 'Nikolić',
        username: 'nikola',
        password: 'nikola123',
        type: 'visitor'
      },
      {
        name: 'Lazar',
        surname: 'Lazić',
        username: 'laza',
        password: 'laza123',
        type: 'visitor'
      }
    ]
  },
  methods: {
    login() {
      if (this.username === '') {
        this.error = 'Unesite korisničko ime.'
        return
      }
      if (this.password === '') {
        this.error = 'Unesite lozinku.'
        return
      }
      const user = this.users.find(({username}) => username === this.username)
      if (!user) {
        this.error = 'Korisničko ime ne postoji u sistemu.'
        return
      }
      const {username, password, type} = user
      if (password !== this.password) {
        this.error = 'Pogrešna lozinka.'
        return
      }
      this.$router.push(type)
      localStorage.setItem('user', username)
    }
  }
}
</script>

Employee.vue

<template>
<section>
  <h1>Zaposleni</h1>
  <form @submit.prevent="submit()">
    <p>
      <label for="id">Identifikacioni broj</label>
      <input type="number" name="id" id="id" v-model="id" required>
    </p>
    <p>
      <label for="start">Početna destinacija</label>
      <input type="text" name="start" id="start" v-model="start" required>
    </p>
    <p>
      <label for="end">Krajnja destinacija</label>
      <input type="text" name="end" id="end" v-model="end" required>
    </p>
    <p>
      <label for="duration">Trajanje u minutima</label>
      <input type="number" name="duration" id="duration" v-model="duration" required>
    </p>
    <input type="submit" value="Unesi">
    <p class="error">{{error}}</p>
  </form>
</section>
</template>

<style scoped>
label {
  padding-right: 10px;
}
p {
  margin: 0;
  margin-bottom: 2px;
}
.error {
  color: red;
}
</style>

<script>
export default {
  name: 'Employee',
  data() {
    return {
      id: '',
      start: '',
      end: '',
      duration: '',
      error: '',
      flights: []
    }
  },
  created() {
    this.flights = JSON.parse(localStorage.getItem('flights') || '[]')
  },
  methods: {
    submit() {
      if (
        this.id === '' ||
        this.start === '' ||
        this.end == '' ||
        this.duration == ''
      ) {
        return
      }
      const flight = this.flights.find(({id}) => id === Number(this.id))
      if (flight) {
        this.error = 'Let sa zadatim identifikatorom već postoji u sistemu.'
        return
      }
      this.flights.push({
        duration: Number(this.duration),
        end: this.end,
        id: Number(this.id),
        start: this.start
      })
      localStorage.setItem('flights', JSON.stringify(this.flights))
    }
  }
}
</script>

Visitor.vue

<template>
<section>
  <h1>Posetilac: {{username}}</h1>
  <table>
    <tr>
      <th>Identifikacioni broj</th>
      <th>Početna destinacija</th>
      <th>Krajnja destinacija</th>
      <th>Trajanje u minutima</th>
      <th>Akcija</th>
    </tr>
    <tr v-for="flight of flights" :key="flight.id" :class="flight.duration > 200 ? 'long' : ''">
      <td>{{flight.id}}</td>
      <td>{{flight.start}}</td>
      <td>{{flight.end}}</td>
      <td>{{flight.duration}}</td>
      <td><button @click="book(flight)">Rezerviši</button></td>
    </tr>
  </table>
  <p class="error">{{error}}</p>
</section>
</template>

<style scoped>
.error {
  color: red;
}
.long {
  color: green;
  font-weight: bold;
}
</style>

<script>
export default {
  name: 'Visitor',
  data() {
    return {
      error: '',
      flights: [],
      reservations: [],
      username: ''
    }
  },
  created() {
    this.username = localStorage.getItem('user')
    this.flights = JSON.parse(localStorage.getItem('flights') || '[]')
    this.reservations = JSON.parse(localStorage.getItem('reservations') || '{}')
  },
  methods: {
    book(flight) {
      const reservations = this.reservations[this.username] || []
      const reservation = reservations.find(({id}) => id === flight.id)
      if (reservation) {
        this.error = 'Već ste rezervisali taj let.'
        return
      }
      reservations.push({...flight})
      this.reservations[this.username] = reservations
      localStorage.setItem('reservations', JSON.stringify(this.reservations))
      this.$router.push('reservations')
    }
  }
}
</script>

Reservations.vue

<template>
<section>
  <h1>Rezervacije korisnika: {{username}}</h1>
  <table>
    <tr>
      <th>Identifikacioni broj</th>
      <th>Početna destinacija</th>
      <th>Krajnja destinacija</th>
      <th>Trajanje u minutima</th>
    </tr>
    <tr v-for="reservation of reservations" :key="reservation.id">
      <td>{{reservation.id}}</td>
      <td>{{reservation.start}}</td>
      <td>{{reservation.end}}</td>
      <td>{{reservation.duration}}</td>
    </tr>
  </table>
  <button @click="back()">Nazad</button>
</section>
</template>

<script>
export default {
  name: 'Reservations',
  data() {
    return {
      mojeRezervacije : [],
      username: ''
    }
  },
  created() {
    this.username = localStorage.getItem('user')
    this.reservations = JSON.parse(localStorage.getItem('reservations'))[this.username]
  },
  methods: {
    back() {
      this.$router.back()
    }
  }
}
</script>

router

index.js

import { createRouter, createWebHistory } from 'vue-router'
import Employee from '../views/Employee.vue'
import Home from '../views/Home.vue'
import Reservations from '../views/Reservations.vue'
import Visitor from '../views/Visitor.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/employee',
    name: 'Employee',
    component: Employee
  },
  {
    path: '/visitor',
    name: 'Visitor',
    component: Visitor
  },
  {
    path: '/reservations',
    name: 'Reservations',
    component: Reservations
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

2. задатак

Овај задатак није решен. Помозите СИ Wики тако што ћете га решити.