Изворни код странице Веб дизајн/Јул 2020

{{tocright}}
'''Julski rok 2020. godine''' održan je 10. jula. Postavka je dostupna [https://rti.etf.bg.ac.rs/rti/si2vd/rokovi/VD_1920_Jul.zip sa stranice predmeta.]

== 1. zadatak ==
=== Postavka ===
Napraviti sledeću mini internet aplikaciju za interni rad apoteke Sima. Veb aplikaciju realizovati koristeći Vue tehnologiju.

Na početnoj strani aplikacije, napraviti HTML formu, preko koje mogu da se uloguju korisnici sistema, a to su dostavljač robe i apotekar. Dostavljači i apotekari treba da imaju mogućnost unošenja korisničkog imena i lozinke, i radio dugme sa dve opcije, gde biraju tip: dostavljač ili apotekar. U slučaju ispravno unetih podataka, korisniku treba omogućiti rad sa ostatkom sistema (za svaki tip treba prikazati posebnu početnu stranicu/komponentu nakon logovanja). Ukoliko korisnik ne unese neki od podataka ili unese pogrešne podatke, potrebno je ispisati poruku crvenim slovima sa mogućnošću ispravljanja greške. Dostavljač robe nakon svake uspešne prijave na sistem ima mogućnost da doda novi proizvod, tako što unosi naziv proizvoda, količinu, i datum pristizanja. Ukoliko pod određenim nazivom već postoji proizvod u magacinu, potrebno je ažurirati količinu i datum pristizanja. Sva polja moraju biti popunjena.

Apotekar nakon svake uspešne prijave na sistem vidi tabelarni prikaz svih proizvoda koji postoje (prikazati naziv, količinu i datum pristizanja). Svi proizvodi koji su pristigli današnjeg dana treba da budu obojeni zelenom bojom. Apotekar može da označi koji proizvod želi da ukloni iz ponude, tako što klikne na dugme ''Ukloni'' pored svakog proizvoda u tabeli. Klikom na dugme ''Ukloni'' prikazuje se nova komponenta, na kojoj se ispisuju svi preostali proizvodi u apoteci.

Podatke čuvati na nivou localStorage-a.

Korisnici koji postoje u sistemu:
* Ime: Petar, Prezime: Jović, Tip: dostavljač, Korisničko ime: pera, Lozinka: pera123
* Ime: Milica, Prezime: Nikolić, Tip: apotekar, Korisničko ime: mica, Lozinka: mica123
* Ime: Jovan, Prezime: Lazić, Tip: apotekar, Korisničko ime: jova, Lozinka: jova123
Studenti treba da koriste podatke koji su navedeni u tekstu zadatka, u suprotnom gube 5 poena.

'''NAPOMENA:''' Po završetku kolokvijuma '''samo src''' folder projekta sačuvati na L disk.

=== Rešenje ===
==== <code>App.vue</code> ====
<syntaxhighlight lang="html">
<template>
  <router-view />
</template>

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

==== <code>views</code> ====
===== <code>Home.vue</code> =====
<syntaxhighlight lang="html">
<template>
<section>
  <h1>Početna stranica</h1>
  <form @submit.prevent="login()">
    <p>
      <label for="username">Korisničko ime</label>
      <input type="text" name="username" id="username" v-model="username" required>
    </p>
    <p>
      <label for="password">Lozinka</label>
      <input type="password" name="password" id="password" v-model="password" required>
    </p>
    <p>
      <label for="type-distributor">Dostavljač</label>
      <input type="radio" name="type" id="type-distributor" v-model="type" value="distributor">
      <label for="type-pharmacist">Apotekar</label>
      <input type="radio" name="type" id="type-pharmacist" v-model="type" value="pharmacist">
    </p>
    <p><input type="submit" value="Uloguj se"></p>
    <p class="error">{{error}}</p>
  </form>
</section>
</template>

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

<script>
export default {
  name: 'Home',
  data () {
    return {
      username: '',
      password: '',
      type: '',
      error: '',
      users: []
    }
  },
  created () {
    const savedUsers = localStorage.getItem('users')
    this.users = savedUsers ? JSON.parse(savedUsers) : [
      {
        name: 'Petar',
        surname: 'Jović',
        username: 'pera',
        password: 'pera123',
        type: 'distributor'
      },
      {
        name: 'Milica',
        surname: 'Nikolić',
        username: 'mica',
        password: 'mica123',
        type: 'pharmacist'
      },
      {
        name: 'Jovan',
        surname: 'Lazić',
        username: 'jova',
        password: 'jova123',
        type: 'pharmacist'
      }
    ]
  },
  methods: {
    login () {
      if (this.username === '') {
        this.error = 'Unesite korisničko ime.'
        return
      }
      if (this.password === '') {
        this.error = 'Unesite lozinku.'
        return
      }
      if (this.type === '') {
        this.error = 'Izaberite tip.'
        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
      }
      if (type !== this.type) {
        this.error = 'Pogrešan tip.'
        return
      }
      this.$router.push(type)
      localStorage.setItem('user', username)
    }
  }
}
</script>
</syntaxhighlight>

===== <code>Distributor.vue</code> =====
<syntaxhighlight lang="html">
<template>
<section>
  <h1>Dostavljač</h1>
  <form @submit.prevent="submit()">
    <p>
      <label for="name">Naziv</label>
      <input type="text" name="name" id="name" v-model="name" required>
    </p>
    <p>
      <label for="quantity">Količina</label>
      <input type="number" name="quantity" id="quantity" v-model="quantity" required>
    </p>
    <p>
      <label for="date">Datum</label>
      <input type="date" name="date" id="date" v-model="date" required>
    </p>
    <input type="submit" value="Unesi">
  </form>
</section>
</template>

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

<script>
export default {
  name: 'Distributor',
  data () {
    return {
      name: '',
      quantity: '',
      date: '',
      products: []
    }
  },
  created () {
    this.products = JSON.parse(localStorage.getItem('products') || '[]')
  },
  methods: {
    submit () {
      if (
        this.name === '' ||
        this.quantity === '' ||
        this.date === ''
      ) {
        return
      }
      const product = this.products.find(({ name }) => name === this.name)
      if (product) {
        product.quantity += Number(this.quantity)
        product.date = this.date
      } else {
        this.products.push({
          name: this.name,
          quantity: Number(this.quantity),
          date: this.date
        })
      }
      localStorage.setItem('products', JSON.stringify(this.products))
    }
  }
}
</script>
</syntaxhighlight>

===== <code>Pharmacist.vue</code> =====
<syntaxhighlight lang="html">
<template>
<section>
  <h1>Apotekar</h1>
  <table>
    <thead>
      <tr>
        <th>Naziv</th>
        <th>Količina</th>
        <th>Datum</th>
        <th>Akcija</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="product of products" :key="product.name" :class="today(product) ? 'today' : ''">
        <td>{{product.name}}</td>
        <td>{{product.quantity}}</td>
        <td>{{product.date}}</td>
        <td><button @click="remove(product)">Ukloni</button></td>
      </tr>
    </tbody>
  </table>
</section>
</template>

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

<script>
export default {
  name: 'Pharmacist',
  data () {
    return {
      products: []
    }
  },
  created () {
    this.products = JSON.parse(localStorage.getItem('products') || '[]')
  },
  methods: {
    remove (product) {
      console.log(product, this.products)
      this.products = this.products.filter(({ name }) => name !== product.name)
      localStorage.setItem('products', JSON.stringify(this.products))
    },
    today (product) {
      const today = new Date()
      const productDate = new Date(product.date)
      return productDate.toDateString() === today.toDateString()
    }
  }
}
</script>
</syntaxhighlight>

==== <code>router</code> ====
===== <code>index.js</code> =====
<syntaxhighlight lang="javascript">
import { createRouter, createWebHistory } from 'vue-router'
import Distributor from '../views/Distributor.vue'
import Home from '../views/Home.vue'
import Pharmacist from '../views/Pharmacist.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/distributor',
    name: 'Distributor',
    component: Distributor
  },
  {
    path: '/pharmacist',
    name: 'Pharmacist',
    component: Pharmacist
  }
]

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

export default router
</syntaxhighlight>

== 2. zadatak ==
{{delimično rešeno}}

[[Категорија:Веб дизајн]]
[[Категорија:Рокови]]