Shiloh/lasthourcloud
Shiloh/lasthourcloud
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

magic bar updates

Browse Source
This commit is contained in:
Andras Bacsai 2023-06-06 11:35:50 +02:00
parent a22ed4132a
commit 17d72089ce
5 changed files with 270 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

175
resources/js/components/MagicBar.vue
View File

@ -11,16 +11,17 @@
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
clip-rule="evenodd" /> clip-rule="evenodd" />
</svg> </svg>
<input type="text" v-model="search" <input type="text"
class="w-full h-10 pr-4 text-white bg-transparent border-0 pl-11 placeholder:text-neutral-700 focus:ring-0 sm:text-sm" class="w-full h-10 pr-4 text-white bg-transparent border-0 pl-11 placeholder:text-neutral-700 focus:ring-0 sm:text-sm"
placeholder=" Search..." role="combobox" aria-expanded="false" aria-controls="options"> placeholder="Search, jump or create... magically... 🪄" role="combobox" aria-expanded="false"
aria-controls="options">
</div> </div>
</div> </div>
</div> </div>
<div class="relative" role="dialog" aria-modal="true" v-if="showCommandPalette" <div class="relative" role="dialog" aria-modal="true" v-if="showCommandPalette" @keyup.esc="resetState">
@keyup.esc="showCommandPalette = false">
<div class="fixed inset-0 transition-opacity bg-opacity-75 bg-coolgray-100"></div> <div class="fixed inset-0 transition-opacity bg-opacity-75 bg-coolgray-100"></div>
<div class="fixed inset-0 p-4 overflow-y-auto sm:p-6 md:px-20"> <div class="fixed inset-0 w-3/5 p-4 mx-auto overflow-y-auto sm:p-6 md:px-20 min-w-fit"
@click.self="resetState">
<div class="overflow-hidden transition-all transform bg-coolgray-200 ring-1 ring-black ring-opacity-5 "> <div class="overflow-hidden transition-all transform bg-coolgray-200 ring-1 ring-black ring-opacity-5 ">
<div class="relative"> <div class="relative">
<svg class="absolute w-5 h-5 text-gray-400 pointer-events-none left-3 top-2.5" <svg class="absolute w-5 h-5 text-gray-400 pointer-events-none left-3 top-2.5"
@ -29,20 +30,55 @@
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
clip-rule="evenodd" /> clip-rule="evenodd" />
</svg> </svg>
<input type="text" v-model="search" <input type="text" v-model="search" ref="searchInput"
class="w-full h-10 pr-4 text-white bg-transparent border-0 pl-11 placeholder:text-neutral-700 focus:ring-0 sm:text-sm" class="w-full h-10 pr-4 text-white rounded outline-none bg-coolgray-400 pl-11 placeholder:text-neutral-700 sm:text-sm focus:outline-none"
autofocus placeholder=" Search..." role="combobox" aria-expanded="false" autofocus placeholder="Search, jump or create... magically... 🪄" role="combobox"
aria-controls="options"> aria-expanded="false" aria-controls="options">
</div> </div>
<ul class="p-4 pb-2 space-y-4 overflow-y-auto max-h-80 scroll-py-10 scroll-pb-2 scrollbar"
id="options" role="listbox"> <ul class="px-4 pb-2 overflow-y-auto max-h-80 scroll-py-10 scroll-pb-2 scrollbar" id="options"
<li> role="listbox">
<h2 class="text-xs font-semibold text-white">{{ state.title }}</h2> <li v-if="state.new">
<ul class="mt-2 -mx-4 text-sm text-white "> <ul class="mt-2 -mx-4 text-sm text-white ">
<li class="flex items-center px-4 py-2 cursor-pointer select-none group hover:bg-coolgray-400" <li class="flex items-center px-4 py-2 cursor-pointer select-none group hover:bg-coolgray-400"
id="option-1" role="option" tabindex="-1" v-for="action, index in state.data" id="option-1" role="option" tabindex="-1" @click="next('redirect', -1, state.icon)">
@click="next(state.next ?? action.next, index)"> <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M12 5l0 14" />
<path d="M5 12l14 0" />
</svg>
<span class="flex-auto ml-3 truncate">Add new {{ state.icon }}: <span
class="text-xs text-warning" v-if="search">{{ search }}</span>
<span v-else class="text-xs text-warning">with random name (or type
in one)</span></span>
</li>
</ul>
</li>
<li>
<ul v-if="data.length == 0" class="mt-2 -mx-4 text-sm text-white ">
<li class="flex items-center px-4 py-2 select-none group">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
<path d="M9 10l.01 0" />
<path d="M15 10l.01 0" />
<path d="M9 15l6 0" />
</svg>
<span class="flex-auto ml-3 truncate">Nothing found. Ooops.</span>
</li>
</ul>
<h2 v-if="data.length > 0 && state.title"
class="mt-4 mb-2 text-xs font-semibold text-neutral-500">{{ state.title }}
</h2>
<ul class="mt-2 -mx-4 text-sm text-white">
<li class="flex items-center px-4 py-2 cursor-pointer select-none group hover:bg-coolgray-400"
id="option-1" role="option" tabindex="-1" v-for="action, index in data"
@click="next(state.next ?? action.next, index)">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon" viewBox="0 0 24 24" <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round"> stroke-linejoin="round">
@ -108,70 +144,147 @@
</Transition> </Transition>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref, computed } from 'vue'
import axios from "axios"; import axios from "axios";
const showCommandPalette = ref(false) const showCommandPalette = ref(false)
const baseUrl = '/magic2' const search = ref()
const searchInput = ref()
const baseUrl = '/magic'
let selected = {}; let selected = {};
const actions = [{ const appActions = [{
id: 0,
name: 'Public Repository', name: 'Public Repository',
tags: 'application,public,repository,github,gitlab,bitbucket,git', tags: 'application,public,repository,github,gitlab,bitbucket,git',
icon: 'git', icon: 'git',
next: 'server' next: 'server'
}, },
{ {
id: 1,
name: 'Private Repository (with GitHub Apps)', name: 'Private Repository (with GitHub Apps)',
tags: 'application,private,repository,github,gitlab,bitbucket,git', tags: 'application,private,repository,github,gitlab,bitbucket,git',
icon: 'git', icon: 'git',
next: 'server' next: 'server'
}, },
{ {
id: 2,
name: 'Private Repository (with Deploy Key)', name: 'Private Repository (with Deploy Key)',
tags: 'application,private,repository,github,gitlab,bitbucket,git', tags: 'application,private,repository,github,gitlab,bitbucket,git',
icon: 'git', icon: 'git',
next: 'server' next: 'server'
}] }]
const state = ref({ const initialState = {
title: 'New', title: null,
icon: null, icon: null,
next: null, next: null,
current: null, current: null,
data: actions new: false,
data: appActions
}
const state = ref({ ...initialState })
const data = computed(() => {
return state.value.data.filter(item => item.name.toLowerCase().includes(search.value?.toLowerCase() ?? ''))
}) })
function resetState() {
async function next(nextAction, index) { showCommandPalette.value = false
if (state.value.current) selected[state.value.current] = state.value.data[index].id state.value = { ...initialState }
else selected['action'] = index selected = {}
}
async function next(nextAction, index, newAction = null) {
if (newAction) {
let targetUrl = new URL(window.location.origin)
let newUrl = new URL(`${window.location.origin}${baseUrl}/${newAction}/new`);
if (search.value) newUrl.searchParams.append('name', search.value)
switch (newAction) {
case 'server':
targetUrl.pathname = '/server/new'
console.log(targetUrl.href);
window.location.href = targetUrl.href
break;
case 'destination':
targetUrl.pathname = '/destination/new'
window.location.href = targetUrl.href
break;
case 'project':
const { data: { new_project_uuid, new_project_id } } = await axios(newUrl.href)
selected.project = new_project_uuid
await getEnvironments(new_project_id)
state.value.title = 'Select an Environment'
state.value.icon = 'environment'
break;
case 'environment':
if (selected.project) newUrl.searchParams.append('project_uuid', selected.project)
const { data: { new_environment_name } } = await axios(newUrl.href)
selected.environment = new_environment_name
await redirect();
break;
}
} else {
if (state.value.current) {
if (state.value.current === 'environment') {
selected[state.value.current] = state.value.data[index].name
} else {
selected[state.value.current] = state.value.data[index].uuid
}
}
else selected['action'] = appActions[index].id
console.log(selected) console.log(selected)
switch (nextAction) { switch (nextAction) {
case 'server': case 'server':
await getServers() await getServers()
state.value.title = 'Select a Server' state.value.title = 'Select a server'
state.value.icon = 'server' state.value.icon = 'server'
state.value.new = true
break; break;
case 'destination': case 'destination':
await getDestinations(state.value.data[index].id) await getDestinations(state.value.data[index].id)
state.value.title = 'Select a Destination' state.value.title = 'Select a destination'
state.value.icon = 'destination' state.value.icon = 'destination'
break; break;
case 'project': case 'project':
await getProjects() await getProjects()
state.value.title = 'Select a Project' state.value.title = 'Select a project'
state.value.icon = 'project' state.value.icon = 'project'
break; break;
case 'environment': case 'environment':
await getEnvironments(state.value.data[index].id) await getEnvironments(state.value.data[index].id)
state.value.title = 'Select an Environment' state.value.title = 'Select an environment'
state.value.icon = 'environment' state.value.icon = 'environment'
break; break;
case 'redirect':
await redirect();
break;
default: default:
break; break;
} }
} }
search.value = ''
searchInput.value.focus()
}
async function redirect() {
let targetUrl = new URL(window.location.origin)
switch (selected.action) {
case 0:
targetUrl.pathname = `/project/${selected.project}/${selected.environment}/new`
targetUrl.searchParams.append('type', 'public')
targetUrl.searchParams.append('destination', selected.destination)
break;
case 1:
targetUrl.pathname = `/project/${selected.project}/${selected.environment}/new`
targetUrl.searchParams.append('type', 'private-gh-app')
targetUrl.searchParams.append('destination', selected.destination)
break;
case 2:
targetUrl.pathname = `/project/${selected.project}/${selected.environment}/new`
targetUrl.searchParams.append('type', 'private-deploy-key')
targetUrl.searchParams.append('destination', selected.destination)
break;
}
window.location.href = targetUrl.href
}
async function getServers() { async function getServers() {
const { data } = await axios.get(`${baseUrl}/servers`); const { data } = await axios.get(`${baseUrl}/servers`);
state.value.data = data.servers state.value.data = data.servers
@ -194,6 +307,6 @@ async function getEnvironments(projectId) {
const { data } = await axios.get(`${baseUrl}/environments?project_id=${projectId}`); const { data } = await axios.get(`${baseUrl}/environments?project_id=${projectId}`);
state.value.data = data.environments state.value.data = data.environments
state.value.current = 'environment' state.value.current = 'environment'
state.value.next = 'server' state.value.next = 'redirect'
} }
</script> </script>

2
resources/views/livewire/destination/new/standalone-docker.blade.php
View File

@ -9,8 +9,8 @@
<x-forms.input id="name" label="Name" required /> <x-forms.input id="name" label="Name" required />
<x-forms.input id="network" label="Network" required /> <x-forms.input id="network" label="Network" required />
<x-forms.select id="server_id" label="Select a server" required> <x-forms.select id="server_id" label="Select a server" required>
@foreach ($servers as $server)
<option disabled>Select a server</option> <option disabled>Select a server</option>
@foreach ($servers as $server)
<option value="{{ $server->id }}">{{ $server->name }}</option> <option value="{{ $server->id }}">{{ $server->name }}</option>
@endforeach @endforeach
</x-forms.select> </x-forms.select>

2
resources/views/livewire/project/new/github-private-repository.blade.php
View File

@ -63,7 +63,7 @@
</div> </div>
<x-forms.checkbox instantSave id="is_static" label="Is it a static site?" <x-forms.checkbox instantSave id="is_static" label="Is it a static site?"
helper="If your application is a static site or the final build assets should be served as a static site, enable this." /> helper="If your application is a static site or the final build assets should be served as a static site, enable this." />
<x-forms.button class="w-full mt-8" type="submit"> <x-forms.button type="submit">
Save New Application Save New Application
</x-forms.button> </x-forms.button>
@endif @endif

2
resources/views/livewire/project/new/public-git-repository.blade.php
View File

@ -29,7 +29,7 @@
</div> </div>
<x-forms.checkbox instantSave id="is_static" label="Is it a static site?" <x-forms.checkbox instantSave id="is_static" label="Is it a static site?"
helper="If your application is a static site or the final build assets should be served as a static site, enable this." /> helper="If your application is a static site or the final build assets should be served as a static site, enable this." />
<x-forms.button class="mt-8" type="submit"> <x-forms.button type="submit">
Save New Application Save New Application
</x-forms.button> </x-forms.button>
@endif @endif

185
routes/web.php
View File

@ -27,7 +27,7 @@ use Illuminate\Support\Str;
Route::prefix('magic2')->middleware(['auth'])->group(function () { Route::prefix('magic')->middleware(['auth'])->group(function () {
Route::get('/servers', function () { Route::get('/servers', function () {
$id = session('currentTeam')->id; $id = session('currentTeam')->id;
return response()->json([ return response()->json([
@ -46,6 +46,19 @@ Route::prefix('magic2')->middleware(['auth'])->group(function () {
'projects' => Project::where('team_id', $id)->get()->sortBy('name') 'projects' => Project::where('team_id', $id)->get()->sortBy('name')
]); ]);
}); });
Route::get('/project/new', function () {
$id = session('currentTeam')->id;
$name = request()->query('name') ?? generate_random_name();
ray($id, $name);
$project = Project::create([
'name' => $name,
'team_id' => $id,
]);
return response()->json([
'new_project_id' => $project->id,
'new_project_uuid' => $project->uuid
]);
});
Route::get('/environments', function () { Route::get('/environments', function () {
$id = session('currentTeam')->id; $id = session('currentTeam')->id;
$project_id = request()->query('project_id'); $project_id = request()->query('project_id');
@ -53,88 +66,106 @@ Route::prefix('magic2')->middleware(['auth'])->group(function () {
'environments' => Project::where('team_id', $id)->where('id', $project_id)->first()->environments 'environments' => Project::where('team_id', $id)->where('id', $project_id)->first()->environments
]); ]);
}); });
Route::get('/environment/new', function () {
$id = session('currentTeam')->id;
$project_uuid = request()->query('project_uuid');
$name = request()->query('name') ?? generate_random_name();
ray($project_uuid, $name);
$project = Project::where('team_id', $id)->where('uuid', $project_uuid)->first();
$environment = $project->environments->where('name', $name)->first();
if (!$environment) {
$environment = Environment::create([
'name' => $name,
'project_id' => $project->id,
]);
}
return response()->json([
'new_environment_name' => $environment->name,
'project_id' => $project->id,
]);
});
}); });
Route::middleware(['auth'])->group(function () { Route::middleware(['auth'])->group(function () {
Route::get('/magic', function () { // Route::get('/magic', function () {
try { // try {
$id = session('currentTeam')->id; // $id = session('currentTeam')->id;
$is_new_project = request()->query('project') === 'new'; // $is_new_project = request()->query('project') === 'new';
$is_new_environment = request()->query('environment') === 'new'; // $is_new_environment = request()->query('environment') === 'new';
// Get servers // // Get servers
if (request()->query('servers') === 'true') { // if (request()->query('servers') === 'true') {
$servers = Server::where('team_id', $id)->get(); // $servers = Server::where('team_id', $id)->get();
return response()->json([ // return response()->json([
'servers' => $servers, // 'servers' => $servers,
]); // ]);
} // }
// Get destinations // // Get destinations
if ((request()->query('server') && request()->query('destinations') === 'true') || request()->query('destinations') === 'true') { // if ((request()->query('server') && request()->query('destinations') === 'true') || request()->query('destinations') === 'true') {
$destinations = Server::destinations(request()->query('server')); // $destinations = Server::destinations(request()->query('server'));
return response()->json([ // return response()->json([
'destinations' => $destinations->toArray(), // 'destinations' => $destinations->toArray(),
]); // ]);
} // }
// Get private Keys // // Get private Keys
if (request()->query('privateKeys') === 'true') { // if (request()->query('privateKeys') === 'true') {
$privateKeys = PrivateKey::where('team_id', $id)->get(); // $privateKeys = PrivateKey::where('team_id', $id)->get();
return response()->json([ // return response()->json([
'privateKeys' => $privateKeys->toArray(), // 'privateKeys' => $privateKeys->toArray(),
]); // ]);
} // }
// Get sources // // Get sources
if (request()->query('sources') === 'true') { // if (request()->query('sources') === 'true') {
$github_apps = GithubApp::private(); // $github_apps = GithubApp::private();
$sources = $github_apps; // $sources = $github_apps;
return response()->json([ // return response()->json([
'sources' => $sources->toArray(), // 'sources' => $sources->toArray(),
]); // ]);
} // }
// Get projects // // Get projects
if ((request()->query('server') && request()->query('destination') && request()->query('projects') === 'true') || request()->query('projects') === 'true') { // if ((request()->query('server') && request()->query('destination') && request()->query('projects') === 'true') || request()->query('projects') === 'true') {
$projects = Project::where('team_id', $id)->get()->sortBy('name'); // $projects = Project::where('team_id', $id)->get()->sortBy('name');
return response()->json([ // return response()->json([
'projects' => $projects->toArray(), // 'projects' => $projects->toArray(),
]); // ]);
} // }
// Get environments // // Get environments
if (request()->query('server') && request()->query('destination') && request()->query('project') && request()->query('environments') === 'true') { // if (request()->query('server') && request()->query('destination') && request()->query('project') && request()->query('environments') === 'true') {
$environments = Project::where('team_id', $id)->where('uuid', request()->query('project'))->first()->environments; // $environments = Project::where('team_id', $id)->where('uuid', request()->query('project'))->first()->environments;
return response()->json([ // return response()->json([
'environments' => $environments->toArray(), // 'environments' => $environments->toArray(),
]); // ]);
} // }
if ($is_new_project) { // if ($is_new_project) {
$project = Project::create([ // $project = Project::create([
'name' => request()->query('name') ?? generate_random_name(), // 'name' => request()->query('name') ?? generate_random_name(),
'team_id' => $id, // 'team_id' => $id,
]); // ]);
return response()->json([ // return response()->json([
'project_uuid' => $project->uuid // 'project_uuid' => $project->uuid
]); // ]);
} // }
if ($is_new_environment) { // if ($is_new_environment) {
$environment = Project::where('uuid', request()->query('project'))->first()->environments->where('name', request()->query('name'))->first(); // $environment = Project::where('uuid', request()->query('project'))->first()->environments->where('name', request()->query('name'))->first();
if (!$environment) { // if (!$environment) {
$environment = Environment::create([ // $environment = Environment::create([
'name' => request()->query('name') ?? generate_random_name(), // 'name' => request()->query('name') ?? generate_random_name(),
'project_id' => Project::where('uuid', request()->query('project'))->first()->id, // 'project_id' => Project::where('uuid', request()->query('project'))->first()->id,
]); // ]);
} // }
return response()->json([ // return response()->json([
'environment_name' => $environment->name // 'environment_name' => $environment->name
]); // ]);
} // }
return response()->json([ // return response()->json([
'magic' => true, // 'magic' => true,
]); // ]);
} catch (\Throwable $e) { // } catch (\Throwable $e) {
return general_error_handler($e, isJson: true); // return general_error_handler($e, isJson: true);
} // }
}); // });
Route::get('/', function () { Route::get('/', function () {
$id = session('currentTeam')->id; $id = session('currentTeam')->id;
$projects = Project::where('team_id', $id)->get(); $projects = Project::where('team_id', $id)->get();