How to show a detail page of a product with Laravel Livewire - laravel-livewire

I have a project in Laravel and Livewire.
This is my view displaying a list of projects submitted.
#forelse ($projects as $index => $project)
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<a href="#" wire:click="showProjectDetails({{ $project->slug }})"
class="block p-6 bg-white border border-gray-200 rounded-sm shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-blue-500 dark:text-white">
{{ $project->title }}
</h5>
<p class="my-5">Bugdet Ghc500 - Ghc 700</p>
<p class="font-normal text-gray-700 dark:text-gray-400">{{ $project->description }}</p>
<ul class="flex gap-4 text-blue-600 mt-5">
<li>PHP</li>|
<li>Mobile App Development</li>|
<li>Database Management</li>|
<li>C++</li>
</ul>
</a>
</div>
#empty
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<p class="text-4xl">No Projects found</p>
</div>
#endforelse
When I click on a single project, a new view called show-project should display the details of the particular project that has been clicked.
My Livewire controller
public function showProjectDetails($slug)
{
return redirect()->route('show-project.details', $slug);
}

<a href="{{ route('show.project_details', ['slug' => $project->slug]) }}">
and web.php route can be either Controller or Livewire page.

Related

Remove payment_address payment_method from checkout/checkout page Opencart 3.x

hi i need to remove payment_address payment_method from checkout/checkout page Opencart 3.x.
i donot want extension, please some body help on this.
Theoretically, you can activate a COD payment method and then simply hide this step with basic CSS and a bit of JS to open the final step in the default checkout.
But Opencart heavily relies on Payment_address. Payment Address has several fields that are required like country, zone and often postcode.
Removing the payment_address will break the whole system. What you can do is via simple HTML and CSS, populate the fields with default values and then hide with CSS.
for example in catalog/view/theme/default/template/checkout/payment_address.twig
...html
<div class="form-group required">
<label class="col-sm-2 control-label" for="input-payment-firstname">{{ entry_firstname }}</label>
<div class="col-sm-10">
<input type="text" name="firstname" value="<MY_DEFAULT_FIRST_NAME>" placeholder="{{ entry_firstname }}" id="input-payment-firstname" class="form-control" />
</div>
</div>
...
do this for all the fields.
then in catalog/view/theme/default/template/checkout/checkout.twig do style="display:none'
<div class="panel panel-default" style="display:none">
<div class="panel-heading">
<h4 class="panel-title">{{ text_checkout_account }}</h4>
</div>
<div class="panel-collapse collapse" id="collapse-payment-address">
<div class="panel-body"></div>
</div>
</div>
{% else %}
<div class="panel panel-default" style="display:none">
<div class="panel-heading">
<h4 class="panel-title">{{ text_checkout_payment_address }}</h4>
</div>
<div class="panel-collapse collapse" id="collapse-payment-address">
<div class="panel-body"></div>
</div>
</div>
this will just hide the payment_address block but it will still be there.
and now you need to skip the payment address step by calling the Continue button via JavaScript
so in the same file catalog/view/theme/default/template/checkout/checkout.twig
after line 165
$('a[href=\'#collapse-payment-address\']').trigger('click');
//add this code to trigger continue button:
$('#button-payment-address').trigger('click');
You might need to wrap the trigger click action with setTimeout becuase you might trigger the click before the form is actually loaded.
I would also advise to do this in a CUSTOM theme folder, and not in the default opencart theme. this way you can do the modifications without touching the core file.

github pages missing path

In my github repo exists a folder within the pathway "TriviaGame/assets/images/" but on the io page of that repo, the pathway to the file produces a "404". It seems that github pages is not uploading the image. ["TriviaGame/assets/images/backgroundimage.png"][1]
TriviaGame/assets/images/backgroundImage.png
https://dboothy.github.io/TriviaGame/assets/images/backgroundimage.png
Failed to load resource: the server responded with a status of 404 ()
dboothy.github.io/:1 GET https://dboothy.github.io/TriviaGame/assets/images/backgroundimage.png 404
404 error on io
[1]:
.content-wrap {
background: url("../images/backgroundimage.png") no-repeat center fixed;
background-size: cover;
min-height: 100vh;
}
<div class="content-wrap" align="center">
<div id="heading" class="hide">
<h2>Time remaining: <span id="timer"></span></h2>
</div>
<div class= "container">
<div id = "game-wrapper">
<div id="main-content">
<div class="content-container">
<h1>Movie Trivia</h1>
<div id="welcome">
<p>try and answer as many question in the time allowed</p>
<div id="results" class="hide"></div>
<button id="startGame" class="textBox">Start</button>
</div>
<div id="gameWrap" class="hide">
<div id="questionWrap"></div>
<button id="finish" class="btn btn-warning">FINISH</button>
</div>
</div>
</div>
</div>
</div>
</div>
https://i.stack.imgur.com/R7kG8.png
In css above I typed:
"../images/backgroundimage.png"
when actually file was named "../images/backgroundImage.png"

bootstrap data toggle tab is working only one tab but the other tab is not working

<div class="widget-header" style="margin-top: 5%;">
<ul class="nav nav-tabs">
<li class="<c:if test="${tab != 'LETTERS'}">selected active </c:if>inline headerDivider">
<a class="<c:if test="${tab != 'LETTERS'}">active </c:if>header" href="action" data-toggle="tab"><Regulations</a>
</li>
<li class="<c:if test="${tab == 'LETTERS'}">selected active </c:if>inline headerDivider">
<a class="<c:if test="${tab == 'LETTERS'}">>selected active </c:if>header" href="action" data-toggle="tab">Letters</a>
</li>
<c:choose>
<c:when test="${tab != 'LETTERS'}">
<a data-href="action" class="btn btn-small" data-toggle="modal" data-reload="regulationDiv">Manage Regulations</a>
</c:when>
<c:otherwise>
<a data-href="action" class="btn btn-small" data-toggle="modal" data-reload="letterDiv">Add Letter</a>
</c:otherwise>
</c:choose>
</ul>
</div>
<div style="overflow: auto; max-height:60vh;" class="tab-content">
<c:if test="${tab != 'LETTERS'}">
<div id="regulationDiv" data-url='action'>
<jsp:include page="regulations.jsp"/>
</div>
</c:if>
<c:if test="${tab == 'LETTERS'}">
<div id="letterDiv" data-url='action'>
<jsp:include page="letters.jsp"/>
</div>
</c:if>
</div>
First tab by default its working second tab there is no event or click, looks like disabled tab.Am I missing something to include in div elements, I tried many ways seems no solution yet to me.

Ionic 2 slides autoplay

I am using ionic2.
Here is my template
<ion-slides autoplay="5000" loop="true" speed="500" pager="true">
<ion-slide class="slider1">
<h1>My <span>Neighbours</span></h1>
<p>My Neighbours is a directory of people who live in the building and have chosen to</p>
<div class="homepeople">
<div class="home"></div>
<div class="people"></div>
</div>
</ion-slide>
<ion-slide class="slider2">
<h1>CCTV <span>Monitoring</span></h1>
<p>Residents/Managers can view selected CCTV</p>
<div class="iconholder">
<img src="./assets/images/white CCTV Monitoring.svg" alt="Image">
</div>
</ion-slide>
<ion-slide class="slider3">
<h1>Emergency</h1>
<p>Security / Reception / Police / Ambulance / Fire</p>
<div class="iconholder">
<div class="iconholder-blk">
<img src="./assets/images/white emergency icon.svg" alt="Image">
</div>
<div class="iconholder-blk">
<img src="./assets/images/white Alarm.svg" alt="Image">
</div>
</div>
<button ion-button outline small (click)="navHome()">
Start using the app
</button>
</ion-slide>
</ion-slides>
It's work perfect.But i need loop does not continue on when last slide.
How can i do this.
Kindly advice me,
Thanks
So i used some of the helper functions on the ionic 2 documentation for sildes.
The (ionSlideDidChange)="slideChanged()" handles the slides autoplay, so when the slide reaches 3 which is your maximum, i stop the autoplay using this.slides.stopAutoplay();.
The html is as:-
<ion-slides autoplay="5000" loop="true" speed="500" pager="true" (ionSlideDidChange)="slideChanged()">
<ion-slide class="slider1">
<h1>My <span>Neighbours</span></h1>
<p>My Neighbours is a directory of people who live in the building and have chosen to</p>
<div class="homepeople">
<div class="home"></div>
<div class="people"></div>
</div>
</ion-slide>
<ion-slide class="slider2">
<h1>CCTV <span>Monitoring</span></h1>
<p>Residents/Managers can view selected CCTV</p>
<div class="iconholder">
<img src="./assets/images/white CCTV Monitoring.svg" alt="Image">
</div>
</ion-slide>
<ion-slide class="slider3">
<h1>Emergency</h1>
<p>Security / Reception / Police / Ambulance / Fire</p>
<div class="iconholder">
<div class="iconholder-blk">
<img src="./assets/images/white emergency icon.svg" alt="Image">
</div>
<div class="iconholder-blk">
<img src="./assets/images/white Alarm.svg" alt="Image">
</div>
</div>
<button ion-button outline small (click)="navHome()">
Start using the app
</button>
</ion-slide>
</ion-slides>
The ts is as:-
export class HomePage {
#ViewChild(Slides) slides: Slides;
constructor() {
}
slideChanged() {
let currentIndex = this.slides.getActiveIndex();
if(currentIndex==3){
this.slides.stopAutoplay();
}
}
Hope this helps.
You can have a configuration for an Ionic Slide
Complete Source: Link
HTML
<ion-slides pager="true" [options]="slideOptsOne" #slideWithNav
(ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
<ion-slide *ngFor="let s of sliderOne.slidesItems">
<img src="../../assets/images/{{s.id}}.jpg">
</ion-slide>
</ion-slides>
Component
With AutoPlay Set to true
slideOptsOne = {
initialSlide: 0,
slidesPerView: 1,
autoplay:true
};

Render View Only After all Data has been fetched from Service?

I have a table Component where when the user Selects a particular row he is Redirected to a different route to a team component .
I want to Load the View Of the New Route when all the data from the Service has been Fetched by the Component .
How to Prevent the View From rendering till the Time the whole data has been fetched from Service in the New components OnInit Method.
in angular 1 there was ngCloak how to do it in Angular 2 .
I have used ngIf but for a split second till the data loads the div pops up and then disappears
My table Component
onSubmit(team:any){
this.teamId = team._links.team.href.split('/').pop(-1);
this.competitionService.storeTeamCrest(team.crestURI);
this.router.navigate(['team', {id: this.teamId}]);
}
Service
storeTeamCrest(link:string){
this.teamCrest = link;
}
getPlayers(id:string){
let headers = new Headers();
headers.append('X-Auth-Token', 'XXX');
return this.http.get('https://api.football-data.org/v1/teams/'+id+'/players',{headers:headers}).map(response => response.json())
}
getFixtures(id:string){
let headers = new Headers();
headers.append('X-Auth-Token', '7c94f28bddf34648bd9a6f5c2e2da0f0');
return this.http.get('https://api.football-data.org/v1/teams/'+id+'/fixtures',{headers:headers}).map(response => response.json())
}
Team Component
ngOnInit(){
this.teamId = this.route.snapshot.params['id'];
this.teamCrest = this.competitionService.teamCrest;
this.getPlayers();
}
getPlayers(){
this.competitionService.getPlayers(this.teamId).subscribe(player => this.players = player.players);
}
Team Component Template
<div class="container">
<div class="row">
<div *ngFor="let player of players"#data>
<div class="col-md-4">
<div class="well box">
<img class="avatar" src="{{teamCrest}}">
<h4> {{player.name}} </h4>
<hr style="background-color:black;" />
<span class="label label-default"><strong>Position :</strong> {{player.position}} </span><br/>
<span class="label label-primary"><strong>Jersey Number :</strong> {{player.jerseyNumber}} </span><br/>
<span class="label label-success"><strong>Date Of birth :</strong> {{player.dateOfBirth}}</span><br/>
<span class="label label-info"><strong>Nationality :</strong> {{player.nationality}} </span><br/>
<span class="label label-warning"><strong>Contract Untill :</strong> {{player.contractUntil}}</span><br/>
<span class="label label-success"><strong>Market Value :</strong> {{player.marketValue}}</span><br/>
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="!players?.length">
<h3>No Player Data found For the Selected Team</h3>
</div>
handle the (complete) => {} callback inside subscribe (Subscribe Docs) and set a boolean to true. Check against this boolean with your *ngIf.
So, inside your Team Component:
players:any[] = [];
loadCompleted:boolean = false;
ngOnInit(){
this.teamId = this.route.snapshot.params['id'];
this.teamCrest = this.competitionService.teamCrest;
this.getPlayers();
}
getPlayers(){
this.loadCompleted = false;
this.competitionService.getPlayers(this.teamId)
.subscribe(
player => this.players = player.players,
(error) => console.error(error),
() => this.loadCompleted = true)
);
}
then in your HTML template:
<div *ngIf="loadCompleted" class="container">
<div class="row">
<div *ngFor="let player of players" #data>
<div class="col-md-4">
<div class="well box">
<img class="avatar" src="{{teamCrest}}">
<h4> {{player.name}} </h4>
<hr style="background-color:black;" />
<span class="label label-default"><strong>Position :</strong> {{player.position}} </span><br/>
<span class="label label-primary"><strong>Jersey Number :</strong> {{player.jerseyNumber}} </span><br/>
<span class="label label-success"><strong>Date Of birth :</strong> {{player.dateOfBirth}}</span><br/>
<span class="label label-info"><strong>Nationality :</strong> {{player.nationality}} </span><br/>
<span class="label label-warning"><strong>Contract Untill :</strong> {{player.contractUntil}}</span><br/>
<span class="label label-success"><strong>Market Value :</strong> {{player.marketValue}}</span><br/>
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="loadCompleted && !players?.length">
<h3>No Player Data found For the Selected Team</h3>
</div>
If i understood your question, this should do what you want.
Just a side note: in your backend service, IMHO, you shouldn't return null if there aren't players for the input teamId, but an empty List/Array/whatever.