Kaydet (Commit) 56a9e0f5 authored tarafından Emincan Özcan's avatar Emincan Özcan

wip

üst 1bf2ca54
......@@ -6,7 +6,6 @@ use App\Http\Controllers\Controller;
use App\Models\AppPackage;
use App\Models\NonPardusApp;
use App\Models\PardusApp;
use Illuminate\Http\Request;
class FetchAllDataController extends Controller
{
......
......@@ -3,8 +3,6 @@
namespace App\Http\Controllers;
use App\Models\AppPackage;
use App\Models\NonPardusApp;
use Illuminate\Http\Request;
class AppPackageController extends Controller
{
......
<?php
use App\Http\Controllers\Api\FetchAllDataController;
use App\Http\Controllers\Api\FetchAppPackages;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
......
<template>
<div v-if="loading">Loading</div>
<div
v-if="loading"
class="bg-gray-900 h-screen flex items-center justify-center"
>
<Loading loading-message="Uygulama Listesi Yükleniyor" />
</div>
<div v-else class="bg-gray-900 text-gray-100 min-h-screen flex">
<Sidebar
class="sticky top-0 left-0 h-screen w-96 bg-gray-700 bg-opacity-25 flex-shrink-0"
class="sticky top-0 h-screen w-80 bg-gray-700 bg-opacity-25 flex-shrink-0"
/>
<router-view class="flex-1 bg-gray-900 mx-6" />
</div>
......@@ -10,8 +15,9 @@
<script>
import Sidebar from "./components/Sidebar";
import store from "./global-state/store";
import Loading from "./components/Loader";
export default {
components: { Sidebar },
components: { Loading, Sidebar },
setup() {
store.fetchData().then(() => {
store.loading.value = false;
......
<template>
<div
class="flex items-center bg-gray-800 px-4 py-3 rounded-lg mb-4 space-x-16"
class="flex items-center pr-4 bg-gray-800 py-3 rounded-lg mb-4 space-x-16"
>
<!-- non pardus app -->
<div class="w-96">
<div class="w-96 pl-4">
<div class="flex items-center space-x-4">
<img class="w-10 h-10" :src="nonPardusApp.image_url" alt="" />
<span class="font-medium text-md">{{ nonPardusApp.name }}</span>
<span class="font-medium">{{ nonPardusApp.name }}</span>
</div>
</div>
<!-- pardus app alternatives... -->
......@@ -21,9 +21,11 @@
<button
class="bg-pardus-yellow px-2 py-1 font-medium rounded-lg shadow-lg text-gray-900"
@click="addToBucket(pardusApp.id)"
v-if="!bucket.includes(pardusApp.id)"
>
Sepete Ekle
</button>
<IconCheck v-else class="text-white w-6 h-6 bg-green-600 rounded-md" />
</div>
</div>
</div>
......@@ -31,8 +33,12 @@
<script>
import store from "../global-state/store";
import IconCheck from "../icons/icon-check.svg";
export default {
name: "AlternativeAppSuggestionRow",
components: {
IconCheck,
},
props: {
nonPardusApp: {
type: Object,
......@@ -44,9 +50,10 @@ export default {
},
},
setup() {
const { addToBucket } = store;
const { addToBucket, bucket } = store;
return {
addToBucket,
bucket,
};
},
};
......
<template>
<div class="px-4 border-t-2 border-gray-600 py-6">
<h2 class="mb-8 text-xl font-medium">Uygulama Sepeti</h2>
<h2 class="mb-8 text-xl font-medium flex items-center justify-center">
Uygulama Sepeti <span class="text-base ml-2">({{ apps.length }})</span>
</h2>
<div class="relative">
<div class="flex-1">
<div class="relative mr-2" v-for="app in apps" :key="app.id">
<div class="flex items-center py-2 px-2 my-2 bg-gray-700 rounded-md">
<div>
<img class="h-8 w-8 mr-4" :src="app.image_url" />
</div>
<img class="h-8 w-8 mr-4" :src="app.image_url" />
<h4 class="font-bold text-sm text-gray-300">{{ app.name }}</h4>
</div>
<button
class="absolute right-0 top-0 bg-red-500 text-white top-2 -right-2 px-2 py-2 rounded-md"
class="absolute px-1 py-1 transform top-1/2 -translate-y-1/2 bg-red-500 text-white -right-2 rounded-md"
@click="removeFromBucket(app.id)"
>
X
<IconCross class="w-2 h-2" />
</button>
</div>
</div>
......@@ -23,10 +23,12 @@
</template>
<script>
import IconCross from "../icons/icon-cross.svg";
import store from "../global-state/store";
import { computed } from "vue";
export default {
name: "Bucket",
components: { IconCross },
setup() {
const apps = computed(() => {
return store.bucket.value.map((appId) => {
......
<template>
<header
class="w-full h-24 sticky flex items-center top-0 left-0 bg-gray-900 border-b-2 border-gray-700 mb-4 py-4"
>
<slot />
</header>
</template>
<script>
export default {
name: "Header",
};
</script>
<style scoped></style>
<template>
<div class="h-full flex items-center justify-center flex-col">
<IconPardusLogo class="w-64 h-64 animate-pulse" />
<p class="text-2xl font-medium text-pardus-yellow mt-8 animate-pulse">
{{ loadingMessage }}
</p>
</div>
</template>
<script>
import IconPardusLogo from "../icons/icon-pardus-logo.svg";
export default {
name: "Loading",
props: ["loadingMessage"],
components: {
IconPardusLogo,
},
};
</script>
<template>
<div class="h-screen">
<div class="h-1/2">
<h1 class="text-2xl text-pardus-yellow font-semibold text-center py-6">
Pardus Kataliz
</h1>
<aside class="h-full overflow-y-auto flex flex-col justify-between">
<div class="flex-shrink-0 mb-8">
<div class="flex justify-center items-center py-6 space-x-4">
<IconPardusLogo class="h-20 w-20" />
<h1
class="text-2xl tracking-wider leading-none mt-0 text-pardus-yellow font-semibold text-center"
>
Pardus<br />Kataliz
</h1>
</div>
<div class="flex flex-col space-y-2 mt-2 px-4">
<router-link
class="px-4 block py-3 text-gray-200 font-medium w-full rounded-lg"
......@@ -21,15 +26,16 @@
</router-link>
</div>
</div>
<Bucket class="h-1/2 overflow-y-auto" />
</div>
<Bucket class="h-auto overflow-y-auto" />
</aside>
</template>
<script>
import Bucket from "./Bucket";
import IconPardusLogo from "../icons/icon-pardus-logo.svg";
export default {
name: "Sidebar",
components: { Bucket },
components: { Bucket, IconPardusLogo },
};
</script>
......
......@@ -9,7 +9,7 @@ const appPackages = ref([]);
async function fetchData() {
try {
const response = await axios.get("http://localhost/api/get-all-data");
console.log("apiresponse", response);
await new Promise((resolve) => setTimeout(() => resolve(), 2000));
const data = response.data.data;
pardusApps.value = data["pardus_apps"];
nonPardusApps.value = data["non_pardus_apps"];
......@@ -18,7 +18,6 @@ async function fetchData() {
console.error("API DATA FETCH ERROR", e);
}
}
const bucket = ref([]);
function addToBucket(pardusAppId) {
......
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="katman_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 860 819" style="enable-background:new 0 0 860 819;" xml:space="preserve">
<g>
<g>
<g>
<g>
<polygon class="st0" style="fill: #FFD544" points="217.6,87.2 86.7,34.9 19.8,122.2 118.7,276.3" />
<polygon class="st0" style="fill: #FFD544" points="642.4,87.2 773.3,34.9 840.2,122.2 741.3,276.3" />
</g>
<path class="st1" style="fill: #FFCC00" d="M732.1,322.1L630.3,128.4c-3.8-7.2-15.5-16.3-23.3-18.2l-1.9-0.5L452,73.3c-10.6-2.5-29.8-2.6-40.4-0.1
l-156.7,36.6l-2,0.5c-7.8,1.8-19.5,10.9-23.2,18.1L128,322.1l-14.1,26.8c-4.5,8.5-7.2,25.5-5.6,35l28.3,169.9
c1,5.8,7.9,13.4,13.4,14.8l77,19.4c-1.9-7.6,15.6-15.4,15.5-22.9l39.2-85.5c0,1.5-0.1,3-0.4,4.5l-14.7,76.1
c-1.6,8.3,1.6,23.2,6.5,30.1l8.1,11.5l38.3,54l56.2,79.3c4.3,6.1,16.2,12.3,23.6,12.3h61.6c7.4,0,19.2-6.2,23.5-12.3l55.6-78.5
l38.4-54.2l8.5-12c4.9-6.9,8.1-21.8,6.5-30.1l-14.7-76.1c-0.3-1.5-0.4-3-0.4-4.5l39.2,85.4c0,7.6,17.4,15.6,15.5,23.3l77-19.7
c5.6-1.4,12.5-9.1,13.5-14.9l28.3-169.9c1.6-9.5-1.1-26.6-5.6-35L732.1,322.1z" />
<path d="M854.3,107.8c-4-12.1-16.8-33.7-28.2-48.1c-11.5-14.4-30.1-31.5-41.4-38c-11.3-6.5-63.1,7.7-89.3,19.7l-19.1,8.7
c-26.2,12-48,22-48.4,22.2c-0.4,0.2-3.5,0-5.9-1c-2.4-1-31.5-8.2-59.6-14.8l-50.2-11.7C484,38.2,451.7,32,440.2,30.9
c-11.5-1.1-60.5,7.1-88.6,13.6l-53.8,12.4c-28.1,6.4-53,12.3-55.4,13c-2.4,0.7-9,3.1-9.5,2.9c-0.4-0.3-23.1-10.6-49.3-22.6
l-19.1-8.7c-26.2-12-58.5-22.6-71.9-23.6c-13.3-1-47.4,27.4-58.9,41.8C22.4,74.1,9.7,95.7,5.7,107.8c-4.1,12.1,18,59.6,34.1,83.5
l33,48.9c16.1,23.9,25,51.5,19.7,61.3c-5.3,9.9-12.5,27.4-16,39c-3.6,11.6,0.5,62.5,5.4,90.9L92,492
c4.8,28.4,13.8,61.2,20.1,72.8c6.2,11.6,55.7,32.2,83.6,39.1l12.5,3.1c28,6.9,64.6,31.7,81.5,55.1l22.6,31.3
c16.8,23.4,38.8,49,48.8,57c10,8,52.2,14.5,68.8,14.5c16.7,0,40.4-2.8,52.7-6.3c12.3-3.4,48.1-41.9,65-65.3l22.2-30.8
c16.9-23.3,53.5-48.2,81.4-55.2l13-3.3c27.9-7,59.9-18.6,71-25.7c11.1-7.1,27.8-57.9,32.6-86.4l10.3-60.6
c4.8-28.4,8.5-61.6,8.2-73.7c-0.3-12.1-13.6-46.3-18.9-56.2c-5.3-9.8,3.6-37.4,19.7-61.3l33-48.9
C836.3,167.4,858.4,119.9,854.3,107.8z M70.9,163.3c-14.3-21.2-26.7-40.2-27.4-42.1c0,0,0,0,0-2.2c0-2.8,0-2.8,0-2.8
c1.1-2.5,11.4-16.4,22.8-30.8C77.8,71,89,58.4,91.3,57.3c2.2-1.1,29.9,9.9,56.1,21.8l4.1,1.9c26.2,12,47.3,22.4,46.8,23.1
c-0.5,0.7-12.7,23.5-26.3,48.9l-23,43.1C135.3,221.4,85.3,184.5,70.9,163.3z M745.5,360c0.3,7-3.4,36-8.2,64.4l-10.3,60.6
c-4.8,28.4-10.5,54.6-12.6,58.1c-2.1,3.6-26.4,12.1-47.2,17.4c-20.8,5.2-37.2,6.1-36.4,1.9c0.8-4.2-11.3-33.4-26.8-56.1
c-15.6-22.7-28.3-40.6-28.3-39.8c0,0.8,3.6,19.4,7.6,39.6c4,20.2,6.9,41.7,6.4,47.9c-0.4,6.2-7.5,20.4-9.8,23.6
c-2.3,3.2-12.7,17.6-23.1,31.9c-10.4,14.4-31.1,43.2-46.2,64c-15,20.8-30.9,40.6-35.3,43.8c-4.4,3.2-28.8,5.9-45.4,5.9
c-16.6,0-34.5-1.4-39.7-3c-5.2-1.6-26.1-26-41.3-47.1c-15.2-21-36.1-50-46.4-64.3c-10.3-14.3-20.6-28.5-22.8-31.6
c-2.2-3-5.8-10.3-7.9-16c-2.2-5.8,0.9-35,4.8-55.2c4-20.2,7.3-37.3,7.4-38.1c0.1-0.8-12.6,15.7-28.1,38.3
c-15.6,22.7-28.1,44.5-27.8,48.6c0.3,4.1-14.7,10.5-35.5,5.3c-20.8-5.2-40.6-11.3-43.9-13.7c-3.4-2.4-11-33.1-15.8-61.5
l-10.3-60.6c-4.8-28.4-8.5-57.4-8.2-64.4c0.3-7.1,8.1-26.8,11.9-33.9c3.8-7.1,18-33.7,31.6-59.1l50.5-94.4
c13.6-25.4,28.1-49.7,32.3-54c4.2-4.3,15.7-9.7,16.2-9.8c0.5-0.1,23.9-5.5,52-11.9l51.9-11.9c28.1-6.5,57.6-12.3,65.7-12.9
c8.1-0.6,48,6.6,76.1,13.2L551,96.5c28.1,6.6,51.4,12,51.9,12.2c0.5,0.1,5.2,2.6,10.5,5.5c5.3,2.9,24.4,33,38,58.4L702,267
c13.6,25.4,27.8,52,31.6,59.1C737.5,333.2,745.2,353,745.5,360z M816.5,121.2c-0.7,1.9-13.1,20.9-27.4,42.1
c-14.3,21.3-64.4,58.2-77.9,32.8L688.1,153c-13.6-25.4-25.1-46.8-25.5-47.6c-0.4-0.7,19.8-12.5,46-24.5l4.1-1.9
c26.2-12,50.1-21.8,53-21.9c3-0.1,16.5,13.9,28,28.3c11.4,14.4,21.7,28.3,22.8,30.8c0,0,0,0,0,2.8
C816.5,121.2,816.5,121.2,816.5,121.2z" />
<path d="M356.8,507.8c-6.2-12.4,0.1-22.5,13.9-22.5h118.5c13.8,0,20.1,10.2,13.9,22.5l-62,70.4c-6.2,12.4-16.3,12.4-22.5,0
L356.8,507.8z" />
<path d="M430,658.8c0,0,8.4,7.7,18.6,17l40.2,36.8c10.3,9.3,21.4,10.3,24.9,2c3.4-8.2-3.1-21.3-14.6-29.1l-38.1-26
c-11.5-7.8-20.8-14.5-20.8-14.8c0-0.3,0.1-12.5,0.1-26.4v-71c0-13.9-2.1-29.9-4.6-35.6c0,0,0,0-5.7,0c-5.7,0-5.7,0-5.7,0
c-2.6,5.7-4.6,21.7-4.6,35.6v71c0,13.9,0,25.5,0,25.8c0,0.3-9.2,7.5-20.7,15.3l-38.1,26c-11.4,7.8-18,20.9-14.6,29.1
c3.5,8.2,14.6,7.3,24.9-2l40.3-36.8C421.6,666.5,430,658.8,430,658.8z" />
<g>
<path d="M209.5,321.5c-14.9,0.4-15,2.5-0.3,4.6l123.6,17.7c14.7,2.1,25.7,15.9,24.3,30.7l-15.8,55.2
c-1.3,14.8,3.3,27.3,10.3,27.9c7,0.5,12.9,0.4,12.9-0.1c0-0.6,0.6-13.2,1.2-28.1l12.9-51.8c0.7-14.9,1.5-34.6,1.9-43.9
c0.4-9.3-3.5-16.8-8.7-16.6c-5.2,0.2-21.6,0.6-36.5,1L209.5,321.5z" />
<path d="M524.6,318c-14.9-0.4-31.3-0.9-36.5-1c-5.2-0.2-9.2,7.3-8.8,16.6c0.4,9.3,1.3,29.1,1.9,43.9l12.9,51.8
c0.6,14.9,1.2,27.5,1.3,28.1c0,0.6,5.8,0.7,12.9,0.1c7.1-0.5,11.7-13.1,10.3-27.9l-15.8-55.2c-1.4-14.8,9.6-28.6,24.3-30.7
l123.6-17.7c14.7-2.1,14.6-4.2-0.3-4.6L524.6,318z" />
</g>
<g>
<path d="M320.6,340.2c0,9.5-7.7,17.2-17.2,17.2c-9.5,0-17.1-7.7-17.1-17.2c0-9.5,7.7-17.1,17.1-17.1
C312.9,323,320.6,330.7,320.6,340.2z" />
<path d="M573.7,340.2c0,9.5-7.7,17.2-17.2,17.2c-9.5,0-17.2-7.7-17.2-17.2c0-9.5,7.7-17.1,17.2-17.1
C566,323,573.7,330.7,573.7,340.2z" />
</g>
<g>
<g>
<g>
<path d="M361.8,551.5c-94.7,23.6-188.5,72.1-261.6,137.1c-5,4.5,1.3,11.4,6.6,7.8c83.2-55.5,160.5-103.8,257.1-133
C371.1,561.1,369.5,549.6,361.8,551.5L361.8,551.5z" />
</g>
<g>
<path d="M364.3,585.1c-78,7.3-151.7,83.3-192.2,145.8c-2.6,4,2.7,9.4,6.4,5.9c57.5-54.5,104.2-125.6,187.5-142
C372.3,593.6,370.5,584.6,364.3,585.1L364.3,585.1z" />
</g>
<g>
<path d="M371.2,617.9C295.6,638.1,234.6,726.7,206,795.2c-2,4.7,4.8,7.9,7.7,4c47.6-63.2,80.8-142.2,160.4-172.1
C379.3,625.3,376.5,616.5,371.2,617.9L371.2,617.9z" />
</g>
</g>
<g>
<g>
<path d="M495,563c96.8,29.3,175.1,78.1,258.5,133.6c5.6,3.7,10.7-4.1,5.9-8.4c-72.5-64.5-166.1-113.1-260.1-136.5
C491.9,549.9,487.5,560.7,495,563L495,563z" />
</g>
<g>
<path d="M494.4,594.9c82.7,16.2,129.5,87.3,186.6,141.4c4.1,3.9,9.8-0.9,6.7-5.7c-40.4-62.2-114.5-138.3-192.3-145.5
C488.9,584.5,488.3,593.7,494.4,594.9L494.4,594.9z" />
</g>
<g>
<path d="M486.3,627.4c79.4,29.8,112.7,109.1,160.2,172.2c3.1,4.1,9.2-0.3,7.3-4.7c-28.4-68.1-89.2-156.7-164.1-176.7
C483.7,616.6,480.2,625.1,486.3,627.4L486.3,627.4z" />
</g>
</g>
</g>
<g>
<g>
<path d="M295.4,154.1c0,19.1-12.4,34.6-27.7,34.6c-15.3,0-27.7-15.5-27.7-34.6c0-19.1,12.4-34.7,27.7-34.7
C283,119.5,295.4,135,295.4,154.1z" />
<path d="M258,220.7c0,12.8-10.3,23.1-23.1,23.1c-12.8,0-23.1-10.3-23.1-23.1c0-12.8,10.3-23.1,23.1-23.1
C247.7,197.6,258,207.9,258,220.7z" />
<path d="M363.2,145.4c-4.6,14.6-14.3,24.5-21.6,22.2c-7.3-2.3-9.4-16-4.8-30.6c4.6-14.6,14.3-24.5,21.6-22.2
C365.7,117.1,367.8,130.9,363.2,145.4z" />
<path d="M328.3,227.8c0,7.7-7.2,13.9-16.2,13.9c-8.9,0-16.2-6.2-16.2-13.9c0-7.7,7.2-13.8,16.2-13.8
C321.1,214,328.3,220.2,328.3,227.8z" />
</g>
<g>
<path d="M669.1,492.3c-5.7,11.4-1.1,25.3,10.4,31c11.4,5.7,25.3,1.1,31-10.3c5.7-11.4,1-25.3-10.4-31
C688.7,476.2,674.8,480.9,669.1,492.3z" />
<path d="M674.5,433.3c-2.4,15.1,1.9,28.4,9.4,29.5c7.6,1.2,15.6-10.1,18-25.2c2.4-15.1-1.8-28.3-9.4-29.5
C684.9,406.9,676.9,418.2,674.5,433.3z" />
<path d="M632,468.4c-3.4,6.8,0.3,15.6,8.3,19.6c8,4,17.3,1.7,20.7-5.2c3.4-6.8-0.3-15.6-8.3-19.6
C644.7,459.2,635.4,461.6,632,468.4z" />
</g>
</g>
</g>
</g>
</g>
</svg>
<template>
<div>
<header
class="w-full h-20 sticky flex items-center top-0 left-0 bg-gray-900 space-x-16"
>
<Header class="space-x-16">
<div class="flex items-center w-96 flex-shrink-0">
<div class="relative w-full">
<input
......@@ -21,9 +19,9 @@
Alternatifleri!
</h4>
</div>
</header>
</Header>
<div class="mt-8 min-w-full overflow-x-auto" style="width: max-content">
<div class="min-w-full overflow-x-auto" style="width: max-content">
<div v-for="nonPardusApp in filteredNonPardusApps" :key="nonPardusApp.id">
<alternative-app-suggestion-row
:non-pardus-app="nonPardusApp"
......@@ -41,10 +39,12 @@ import IconSearch from "../icons/icon-search.svg";
import store from "../global-state/store";
import AlternativeAppSuggestionRow from "../components/AlternativeAppSuggestionRow";
import { ref } from "vue";
import Header from "../components/Header";
export default {
name: "AlternativeApps",
components: {
Header,
AlternativeAppSuggestionRow,
IconSearch,
},
......
<template>
<div>
<header
class="w-full h-20 sticky flex items-center top-0 left-0 bg-gray-900 space-x-16"
>
<Header class="space-x-16">
<div class="flex items-center w-96 flex-shrink-0">
<div class="relative w-full">
<input
......@@ -21,7 +19,7 @@
Başlangıç!
</h4>
</div>
</header>
</Header>
<div
class="grid grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4 lg:gap-6 2xl:gap-8"
>
......@@ -45,7 +43,6 @@
>
<IconCheck class="h-12 w-12 text-white" />
</span>
<div>
<img class="w-full object-contain h-24" :src="pkg.image_url" />
<h3 class="font-medium text-gray-200 mx-4 text-xl mt-4">
......@@ -80,9 +77,12 @@ import IconCheck from "../icons/icon-check.svg";
import IconPlus from "../icons/icon-plus.svg";
import store from "../global-state/store";
import { ref } from "vue";
import Header from "../components/Header";
export default {
name: "AlternativeApps",
components: {
Header,
IconSearch,
IconCheck,
IconPlus,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment