KockaAdmiralac: Dupli ID u App.vue; i

2022-07-16T22:54:46Z

Dupli ID u App.vue; <thead> i <tbody>

← Старија измена		Верзија на датум 17. јул 2022. у 00:54
Ред 26:		Ред 26:
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<template>		<template>
	~~<main id="app">~~
	<router-view />		<router-view />
	~~</main>~~
	</template>		</template>

Ред 47:		Ред 45:
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<template>		<template>
	<~~section~~>		<main>
	<h1>Login</h1>		<h1>Login</h1>
	<form @submit.prevent="login()">		<form @submit.prevent="login()">
Ред 61:		Ред 59:
	<p class="error">{{error}}</p>		<p class="error">{{error}}</p>
	</form>		</form>
	</~~section~~>		</main>
	</template>		</template>

Ред 145:		Ред 143:
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<template>		<template>
	<~~section~~>		<main>
	<h1>Zaposleni</h1>		<h1>Zaposleni</h1>
	<form @submit.prevent="submit()">		<form @submit.prevent="submit()">
Ред 167:		Ред 165:
	<p class="error">{{error}}</p>		<p class="error">{{error}}</p>
	</form>		</form>
	</~~section~~>		</main>
	</template>		</template>

Ред 233:		Ред 231:
	<h1>Posetilac: {{username}}</h1>		<h1>Posetilac: {{username}}</h1>
	<table>		<table>
	<tr>		<thead>
	<th>Identifikacioni broj</th>		<tr>
	<th>Početna destinacija</th>		<th>Identifikacioni broj</th>
	<th>Krajnja destinacija</th>		<th>Početna destinacija</th>
	<th>Trajanje u minutima</th>		<th>Krajnja destinacija</th>
	<th>Akcija</th>		<th>Trajanje u minutima</th>
	</tr>		<th>Akcija</th>
	<tr v-for="flight of flights" :key="flight.id" :class="flight.duration > 200 ? 'long' : ''">		</tr>
	<td>{{flight.id}}</td>		</thead>
	<td>{{flight.start}}</td>		<tbody>
	<td>{{flight.end}}</td>		<tr v-for="flight of flights" :key="flight.id" :class="flight.duration > 200 ? 'long' : ''">
	<td>{{flight.duration}}</td>		<td>{{flight.id}}</td>
	<td><button @click="book(flight)">Rezerviši</button></td>		<td>{{flight.start}}</td>
	</tr>		<td>{{flight.end}}</td>
			<td>{{flight.duration}}</td>
			<td><button @click="book(flight)">Rezerviši</button></td>
			</tr>
			</tbody>
	</table>		</table>
	<p class="error">{{error}}</p>		<p class="error">{{error}}</p>
Ред 299:		Ред 301:
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<template>		<template>
	<~~section~~>		<main>
	<h1>Rezervacije korisnika: {{username}}</h1>		<h1>Rezervacije korisnika: {{username}}</h1>
	<table>		<table>
	<tr>		<thead>
	<th>Identifikacioni broj</th>		<tr>
	<th>Početna destinacija</th>		<th>Identifikacioni broj</th>
	<th>Krajnja destinacija</th>		<th>Početna destinacija</th>
	<th>Trajanje u minutima</th>		<th>Krajnja destinacija</th>
	</tr>		<th>Trajanje u minutima</th>
	<tr v-for="reservation of reservations" :key="reservation.id">		</tr>
	<td>{{reservation.id}}</td>		</thead>
	<td>{{reservation.start}}</td>		<tbody>
	<td>{{reservation.end}}</td>		<tr v-for="reservation of reservations" :key="reservation.id">
	<td>{{reservation.duration}}</td>		<td>{{reservation.id}}</td>
	</tr>		<td>{{reservation.start}}</td>
			<td>{{reservation.end}}</td>
			<td>{{reservation.duration}}</td>
			</tr>
			</tbody>
	</table>		</table>
	<button @click="back()">Nazad</button>		<button @click="back()">Nazad</button>
	</~~section~~>		</main>
	</template>		</template>

KockaAdmiralac: Zaostalo staro ime

2022-07-16T21:51:12Z

Zaostalo staro ime

← Старија измена		Верзија на датум 16. јул 2022. у 23:51
Ред 324:		Ред 324:
	data() {		data() {
	return {		return {
	~~mojeRezervacije~~ : [],		reservations : [],
	username: ''		username: ''
	}		}

KockaAdmiralac: Prvi zadatak iz junskog roka 2020, veći deo koda od `<@639247329383284746>`

2022-07-16T21:48:29Z

Prvi zadatak iz junskog roka 2020, veći deo koda od `<@639247329383284746>`

Нова страница

{{tocright}}
'''Junski rok 2020. godine''' održan je 19. juna. Postavka je dostupna [https://rti.etf.bg.ac.rs/rti/si2vd/rokovi/VD_1920_Jun.zip sa stranice predmeta.]

== 1. zadatak ==
=== Postavka ===
Napraviti sledeću mini internet aplikaciju za interni rad aerodroma Nikola Tesla. 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 zaposleni na aerodromu i posetioci. Zaposleni i posetilac treba da imaju mogućnost unošenja korisničkog imena i lozinke. 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.

Zaposleni na aerodromu nakon svake uspešne prijave na sistem ima mogućnost da doda novi let, tako što unosi identifikacioni broj leta, početnu destinaciju, krajnju destinaciju i dužinu trajanja leta u minutima. Sva polja moraju biti popunjena.

Posetilac nakon svake uspešne prijave na sistem vidi tabelarni prikaz svih letova koje postoje. Svi letovi koji traju duže od 200 minuta, potrebno je obojiti zelenom bojom. Posetilac može da označi koji let želi da rezerviše, tako što klikne na dugme ''Rezerviši'' pored svakog leta u tabeli. Klikom na dugme ''Rezerviši'' prikazuje se nova komponenta, na kojoj se ispisuju svi rezervisani letovi tog korisnika.

Podatke čuvati na nivou ''localStorage''-a.

Korisnici koji postoje u sistemu:
* Ime: Petar, Prezime: Petrović, Tip: zaposleni, Korisničko ime: pera, Lozinka: pera123
* Ime: Nikola, Prezime: Nikolić, Tip: posetilac, Korisničko ime: nikola, Lozinka: nikola123
* Ime: Lazar, Prezime: Lazić, Tip: posetilac, Korisničko ime: laza, Lozinka: laza123
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>
<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>
</syntaxhighlight>

==== <code>views</code> ====
===== <code>Home.vue</code> =====
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

===== <code>Employee.vue</code> =====
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

===== <code>Visitor.vue</code> =====
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

===== <code>Reservations.vue</code> =====
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

==== <code>router</code> ====
===== <code>index.js</code> =====
<syntaxhighlight lang="javascript">
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
</syntaxhighlight>

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

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

Веб дизајн/Јун 2020 - Историја измена

KockaAdmiralac: Dupli ID u App.vue; i

KockaAdmiralac: Zaostalo staro ime

KockaAdmiralac: Prvi zadatak iz junskog roka 2020, veći deo koda od `<@639247329383284746>`