prostocode

app.vue

<<template>
	<div id="app">
		<div id="search">
			<input v-model="searchTmp" placeholder="Поиск по ФИО преподавателя" />
			<small>{{ list.length }} результатов</small>
		</div>
		<div id="list">
			<div class="item" v-for="(item, i) in list" :key="i">
				<div>
					<h3>{{ item.type }}</h3>
					{{ item.name }}
					<br />
					<br />
					Аудитория: {{ item.classroom }}
					<br />
					Группа: {{ item.group }} 
				</div>
				<div>
					{{ denNums[item.denNum] }}
					<br />
					{{ days[item.week] }}
					<br />
					<br />
					с {{ item.startTime }} до {{ item.endTime }}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
async function getSchedule () {
	const data = await fetch("https://petrsu.egipti.com/api/v1/schedule/", {
		method: 'GET',
		cors: "no-cors"
}).then(data => data.json());
	}
//function getSchedule () {
	//return new Promise(resolve => {
		//let schedule = JSON.parse(localStorage.getItem('schedule') || '[]');
		//if (!schedule) {
			//const xhr = new XMLHttpRequest();
			//xhr.open('GET', 'https://petrsu.egipti.com/api/v1/schedule');
			//xhr.addEventListener('load', () => {
				//resolve(JSON.parse(xhr.responseText));
			//});
			//xhr.send();
		//} else {
			//resolve(schedule);
		//}
	//});
//}


let inputTimeout;
export default {
	data: () => ({
		schedule: [],
		search: '',
		searchTmp: '',
		denNums: {
			denominator: 'Знаменатель',
			numerator: 'Числитель'
		},
		days: {
			Monday: 'Понедельник',
			Tuesday: 'Вторник',
			Wednesday: 'Среда',
			Thursday: 'Четверг',
			Friday: 'Пятница',
			Saturday: 'Суббота',
			Sunday: 'Воскресенье'
		}
	}),
	 //mounted () {
		//const schedule =  getSchedule();
		//Object.keys(schedule).forEach(group => {
			//const groupItem = schedule[group];
			//Object.keys(groupItem).forEach(denNum => {
				//const denNumItem = groupItem[denNum];
				//Object.keys(denNumItem).forEach(week => {
					//const weekItem = denNumItem[week];
					//Object.keys(weekItem).forEach(day => {
						//const item = weekItem[day];
						//this.schedule.push({
							//group,
							//denNum,
							//week,
							//day,
							//lecturer: item.lecturer,
							//name: item.name,
							//type: item.type,
							//classroom: item.classroom,
							//startTime: item.start_time,
							//endTime: item.end_time
						//});
					//});
				//});
			//});
		//});
	//},
	computed: {
		list () {
			return this.schedule.filter(item => !!~item.lecturer.toLowerCase().indexOf(this.search.toLowerCase()));
		}
	},
	watch: {
		searchTmp (value) {
			clearTimeout(inputTimeout);
			inputTimeout = setTimeout(() => {
				this.search = value;
			}, 150);
		}
	}
}
</script>

<style>
#app {
    margin: 20px auto;
    padding: 0 30px;
    max-width: 800px;
    font-family: sans-serif;
}

#search {
	position: relative;
	margin-bottom: 20px;
	text-align: center;
	font-size: 15px;
	color: #009688;
}

#search > input {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 15px;
    font-size: 15px;
    outline: none;
    border: 1px solid #009688;
    border-radius: 4px;
    box-sizing: border-box;
}

#search > small {
    position: absolute;
    right: 5px;
    bottom: -10px;
    background-color: #fff;
    border: 1px solid #009688;
    border-radius: 12px;
    padding: 1px 6px;
}

#list > .item {
	display: flex;
    background-color: #fbfbfb;
    box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 5px 0;
    margin-bottom: 15px;
    padding: 10px 15px;
    border-radius: 4px;
}

#list > .item > :first-child { flex: 1; margin-right: 15px; }
#list > .item > :last-child { text-align: right; font-size: 14px; }

h3 {
    font-weight: 100;
    font-size: 20px;
    margin: 0;
}
</style>