Level 4
solved
1 like
Dec 18, 2019
1
Level 4
follow button not showing after changing html template
My Profile Index
@extends('layouts.profile')
@section('post-js')
@hasrole('subscriber')
<!-- New -->
<!-- ==============================================
News Feed Section
=============================================== -->
<section class="profile">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
<br> <br> <br> <br> <br> <br>
</div>
</div><!--/ row-->
</div><!--/ container -->
</section><!--/ profile -->
<!-- ==============================================
User Profile Section
=============================================== -->
<section class="user-profile">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="post-content">
<div class="author-post text-center">
<img class="img-fluid img-circle" src="/storage/avatars/{{ $user->avatar }}" alt="Image">
</div><!-- /author -->
</div><!-- /.post-content -->
</div><!-- /col-sm-12 -->
</div><!--/ row-->
</div><!--/ container -->
</section><!--/ profile -->
<!-- ==============================================
User Profile Section
=============================================== -->
<section class="details">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="details-box row">
<div class="col-lg-9">
<div class="content-box">
<h4>{{$user->name}} <i class="fa fa-check"></i></h4>
<p>{{$user->profile->description}}<span class="hashtag"> @.{{$user->username}}</span></p>
<small><span>{{$user->profile->url}}</span></small>
@cannot ('update', $user->profile)
<form action="/profile/{{$user->id}}/tip" method="POST">
{{csrf_field()}}
<input type="submit" value="Tip {{@$user->username}} ">
<script src="https://js.stripe.com/v3/"></script>
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_PUYJMeO6wE9Y5iK8ca28ZJGS00Z6OhAZdo"
paymentMethod="pm_1FU2bgBF6ERF9jhEQvwnA7sX"
data-amount="500"
data-name="Exclusive Fans"
data-description="Subscribe to XclusiveFans"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-email="{{ auth()->check()?auth()->user()->email: null}}"
data-panel-label="Tip"
data-locale="auto">
</script>
<script>
// Hide default stripe button, be careful there if you
// have more than 1 button of that class
document.getElementsByClassName("stripe-button-el")[0].style.display = 'none';
</script>
</form>
@endcannot
<small>
@can ('update', $user->profile)
<a href="/profile/{{$user->id}}/edit"><span>Edit Profile</span></a>
@endcan
</small>
</div><!--/ media -->
</div>
<div class="col-lg-3">
<div class="follow-box">
@cannot ('update', $user->profile)
<small><follow-button class="kafe-btn kafe-btn-mint" user-id="{{ $user->id }}" follows="{{$follows}}"><i class="fa fa-check"></i></follow-button></small>
<!-- <a href="/message/{$user->id}/create"><div class="btn btn-primary">Send Message</div></a> -->
@endcannot
</div><!--/ dropdown -->
</div>
</div><!--/ details-box -->
</div>
</div>
</div><!--/ container -->
</section><!--/ profile -->
<!-- ==============================================
Home Menu Section
=============================================== -->
<section class="home-menu">
<div class="container">
<div class="row">
<div class="menu-category">
<ul class="menu">
<li class="current-menu-item"><a href="photo_profile.html">Posts <span>{{$postCount}}</span></a></li>
<li><a href="photo_followers.html">Followers <span>{{$followersCount}}</span></a></li>
<li><a href="photo_followers.html">Following <span>{{$followingCount}}</span></a></li>
</ul>
</div>
</div><!--/row -->
</div><!--/container -->
</section><!--/home-menu -->
<section class="newsfeed">
<div class="container">
<div class="row">
@foreach ($user->posts as $post)
<div class="col-lg-4">
<a href="/p/{{$post->id}}">
<div class="explorebox"
style="background: linear-gradient( rgba(34,34,34,0.2), rgba(34,34,34,0.2)), url('/storage/public/image/{{$post->image}}') no-repeat;
background-size: cover;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;">
<div class="explore-top">
<div class="explore-like"><i class="fa fa-heart"></i> <span>14,100</span></div>
<div class="explore-circle pull-right"><i class="far fa-bookmark"></i></div>
</div>
</div>
</a>
</div><!--/ col-lg-4 -->
@endforeach
</div>
</div>
</section>
@endhasrole
<!-- membersubscriber -->
@hasrole('membersubscriber')
<!-- New -->
<!-- ==============================================
News Feed Section
=============================================== -->
<section class="profile">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
<br> <br> <br> <br> <br> <br>
</div>
</div><!--/ row-->
</div><!--/ container -->
</section><!--/ profile -->
<!-- ==============================================
User Profile Section
=============================================== -->
<section class="user-profile">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="post-content">
<div class="author-post text-center">
<img class="img-fluid img-circle" src="/storage/avatars/{{ $user->avatar }}" alt="Image">
</div><!-- /author -->
</div><!-- /.post-content -->
</div><!-- /col-sm-12 -->
</div><!--/ row-->
</div><!--/ container -->
</section><!--/ profile -->
<!-- ==============================================
User Profile Section
=============================================== -->
<section class="details">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="details-box row">
<div class="col-lg-9">
<div class="content-box">
<h4>{{$user->name}} <i class="fa fa-check"></i></h4>
<p>{{$user->profile->description}}<span class="hashtag">@ {{$user->username}}</span></p>
<small><span>{{$user->profile->url}}</span></small>
@can ('update', $user->profile)
<a href="/profile/{{$user->id}}/edit">Edit Profile</a>
@endcan
@cannot ('update', $user->profile)
<form action="/profile/{{$user->id}}/tip" method="POST">
{{csrf_field()}}
<input type="submit" value="Tip {{@$user->username}} ">
<script src="https://js.stripe.com/v3/"></script>
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_PUYJMeO6wE9Y5iK8ca28ZJGS00Z6OhAZdo"
paymentMethod="pm_1FU2bgBF6ERF9jhEQvwnA7sX"
data-amount="500"
data-name="Exclusive Fans"
data-description="Subscribe to XclusiveFans"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-email="{{ auth()->check()?auth()->user()->email: null}}"
data-panel-label="Tip"
data-locale="auto">
</script>
<script>
// Hide default stripe button, be careful there if you
// have more than 1 button of that class
document.getElementsByClassName("stripe-button-el")[0].style.display = 'none';
</script>
</form>
@endcannot
</div><!--/ media -->
</div>
<div class="col-lg-3">
<div class="follow-box">
@cannot ('update', $user->profile)
<follow-button class="kafe-btn kafe-btn-mint" user-id="{{ $user->id }}" follows="{{$follows}}"><i class="fa fa-check"></i></follow-button>
<!-- <a href="/message/{$user->id}/create"><div class="btn btn-primary">Send Message</div></a> -->
@endcannot
</div><!--/ dropdown -->
</div>
</div><!--/ details-box -->
</div>
</div>
</div><!--/ container -->
</section><!--/ profile -->
<!-- ==============================================
Home Menu Section
=============================================== -->
<section class="home-menu">
<div class="container">
<div class="row">
<div class="menu-category">
<ul class="menu">
<li class="current-menu-item"><a href="photo_profile.html">Posts <span>{{$postCount}}</span></a></li>
<li><a href="photo_followers.html">Followers <span>{{$followersCount}}</span></a></li>
<li><a href="photo_followers.html">Following <span>{{$followingCount}}</span></a></li>
</ul>
</div>
</div><!--/row -->
</div><!--/container -->
</section><!--/home-menu -->
<section class="newsfeed">
<div class="container">
<div class="row">
@foreach ($user->posts as $post)
<div class="col-lg-4">
<a href="/p/{{$post->id}}">
<div class="explorebox"
style="background: linear-gradient( rgba(34,34,34,0.2), rgba(34,34,34,0.2)), url('/storage/public/image/{{$post->image}}') no-repeat;
background-size: cover;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;">
<div class="explore-top">
<div class="explore-like"><i class="fa fa-heart"></i> <span>14,100</span></div>
<div class="explore-circle pull-right"><i class="far fa-bookmark"></i></div>
</div>
</div>
</a>
</div><!--/ col-lg-4 -->
@endforeach
</div>
</div>
</section>
@endhasrole
<!-- admin -->
@hasrole('admin')
<!-- New -->
<!-- ==============================================
News Feed Section
=============================================== -->
<section class="profile">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
<br> <br> <br> <br> <br> <br>
</div>
</div><!--/ row-->
</div><!--/ container -->
</section><!--/ profile -->
<!-- ==============================================
User Profile Section
=============================================== -->
<section class="user-profile">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="post-content">
<div class="author-post text-center">
<img class="img-fluid img-circle" src="/storage/avatars/{{ $user->avatar }}" alt="Image">
</div><!-- /author -->
</div><!-- /.post-content -->
</div><!-- /col-sm-12 -->
</div><!--/ row-->
</div><!--/ container -->
</section><!--/ profile -->
<!-- ==============================================
User Profile Section
=============================================== -->
<section class="details">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="details-box row">
<div class="col-lg-9">
<div class="content-box">
<h4>{{$user->name}} <i class="fa fa-check"></i></h4>
<p>{{$user->profile->description}}<span class="hashtag">@ {{$user->username}}</span></p>
<small><span>{{$user->profile->url}}</span></small>
@can ('update', $user->profile)
<a href="/profile/{{$user->id}}/edit">Edit Profile</a>
@endcan
@cannot ('update', $user->profile)
<form action="/profile/{{$user->id}}/tip" method="POST">
{{csrf_field()}}
<input class="kafe-btn kafe-btn-mint" type="submit" value="Tip {{@$user->username}} ">
<script src="https://js.stripe.com/v3/"></script>
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_PUYJMeO6wE9Y5iK8ca28ZJGS00Z6OhAZdo"
paymentMethod="pm_1FU2bgBF6ERF9jhEQvwnA7sX"
data-amount="500"
data-name="Exclusive Fans"
data-description="Subscribe to XclusiveFans"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-email="{{ auth()->check()?auth()->user()->email: null}}"
data-panel-label="Tip"
data-locale="auto">
</script>
<script>
// Hide default stripe button, be careful there if you
// have more than 1 button of that class
document.getElementsByClassName("stripe-button-el")[0].style.display = 'none';
</script>
</form>
@endcannot
</div><!--/ media -->
</div>
<div class="col-lg-3">
<div class="follow-box">
@cannot ('update', $user->profile)
<follow-button user-id="{{ $user->id }}" follows="{{$follows}}"></follow-button>
<!-- <a href="/message/{$user->id}/create"><div class="btn btn-primary">Send Message</div></a> -->
@endcannot
</div><!--/ dropdown -->
</div>
</div><!--/ details-box -->
</div>
</div>
</div><!--/ container -->
</section><!--/ profile -->
<!-- ==============================================
Home Menu Section
=============================================== -->
<section class="home-menu">
<div class="container">
<div class="row">
<div class="menu-category">
<ul class="menu">
<li class="current-menu-item"><a href="photo_profile.html">Posts <span>{{$postCount}}</span></a></li>
<li><a href="photo_followers.html">Followers <span>{{$followersCount}}</span></a></li>
<li><a href="photo_followers.html">Following <span>{{$followingCount}}</span></a></li>
</ul>
</div>
</div><!--/row -->
</div><!--/container -->
</section><!--/home-menu -->
<section class="newsfeed">
<div class="container">
<div class="row">
@foreach ($user->posts as $post)
<div class="col-lg-4">
<a href="/p/{{$post->id}}">
<div class="explorebox"
style="background: linear-gradient( rgba(34,34,34,0.2), rgba(34,34,34,0.2)), url('/storage/public/image/{{$post->image}}') no-repeat;
background-size: cover;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;">
<div class="explore-top">
<div class="explore-like"><i class="fa fa-heart"></i> <span>14,100</span></div>
<div class="explore-circle pull-right"><i class="far fa-bookmark"></i></div>
</div>
</div>
</a>
</div><!--/ col-lg-4 -->
@endforeach
</div>
</div>
</section>
@endhasrole
@endsection
My Layout Template
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ==============================================
Title and Meta Tags
=============================================== -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Xclusivefans - Meet your pleasure with excitement</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta property="og:title" content="" />
<meta property="og:url" content="" />
<meta property="og:description" content="" />
<!-- ==============================================
Favicons
=============================================== -->
<link rel="icon" href="assets/img/logo.html">
<link rel="apple-touch-icon" href="img/favicons/apple-touch-icon.html">
<link rel="apple-touch-icon" sizes="72x72" href="img/favicons/apple-touch-icon-72x72.html">
<link rel="apple-touch-icon" sizes="114x114" href="img/favicons/apple-touch-icon-114x114.html">
<!-- Fonts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!--new-->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<!-- ==============================================
CSS
=============================================== -->
<link type="text/css" href="{{ asset('assets/css/demos/photo.css') }}" rel="stylesheet" />
<!-- ==============================================
Feauture Detection
=============================================== -->
<script src="{{ asset('assets/js/modernizr-custom.html') }}"></script>
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]) !!};
</script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ==============================================
Navigation Section
=============================================== -->
<header class="tr-header">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index-2.html"><i class="fa fa-smile"></i> <i>Xclusivefans</i></a>
</div><!-- /.navbar-header -->
<div class="navbar-left">
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div><!-- /.navbar-left -->
<div class="navbar-right">
<ul class="nav navbar-nav">
<li>
<div class="search-dashboard">
<form>
<input placeholder="Search here" type="text">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</li>
<!-- notification -->
<li class="dropdown notification-list">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<i class="fa fa-bell noti-icon"></i>
<span class="badge badge-danger badge-pill noti-icon-badge">4</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-lg">
<div class="dropdown-item noti-title">
<h6 class="m-0">
<span class="pull-right">
<a href="#" class="text-dark"><small>Clear All</small></a>
</span>Notification
</h6>
</div>
<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 416.983px;">
<div class="slimscroll" style="max-height: 230px; overflow: hidden; width: auto; height: 416.983px;">
<div id="Slim">
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-success"><i class="fa fa-comment"></i></div>
<p class="notify-details">Caleb Flakelar commented on Admin<small class="text-muted">1 min ago</small></p>
</a><!--/ dropdown-item-->
</div><!--/ .Slim-->
<div class="slimScrollBar" style="background: rgb(158, 165, 171) none repeat scroll 0% 0%; width: 8px; position: absolute; top: 0px; opacity: 0.4; display: block; border-radius: 7px; z-index: 99; right: 1px;"></div>
<div class="slimScrollRail" style="width: 8px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51) none repeat scroll 0% 0%; opacity: 0.2; z-index: 90; right: 1px;"></div>
</div><!--/ .slimscroll-->
</div><!--/ .slimScrollDiv-->
<a href="photo_notifications.html" class="dropdown-item text-center notify-all">
View all <i class="fa fa-arrow-right"></i>
</a><!-- All-->
</div><!--/ dropdown-menu-->
</li>
<li class="dropdown mega-avatar">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
<span class="avatar w-32"><img src="/storage/avatars/{{ Auth::user()->avatar }}" class="img-resonsive img-circle" width="25" height="25" alt="..."></span>
<!-- hidden-xs hides the username on small devices so only the image appears. -->
<span class="hidden-xs">
{{Auth::user()->name}}
</span>
</a>
<div class="dropdown-menu w dropdown-menu-scale pull-right">
<a class="dropdown-item" href="/profile/{{Auth::user()->id}}"><span>Profile</span></a>
<a class="dropdown-item" href="#"><span>Withdraw(Model Only)</span></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/profile/{{Auth::user()->id}}/edit"><span>Settings</span></a>
<a class="dropdown-item" href="#"><span>Need help?</span></a>
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
<div class="dropdown-divider"></div>
</div>
</li><!-- /navbar-item -->
</ul><!-- /.sign-in -->
</div><!-- /.nav-right -->
</div><!-- /.container -->
</nav><!-- /.navbar -->
</header><!-- Page Header -->
<!-- ==============================================
Navbar Second Section
=============================================== -->
<section class="nav-sec">
<div class="d-flex justify-content-between">
<div class="p-2 nav-icon-lg dark-black">
<a class="nav-icon" href="{{ url('/') }}"><em class="fa fa-home"></em>
<span>Home</span>
</a>
</div>
<div class="p-2 nav-icon-lg clean-black">
<a class="nav-icon" href="/explore"><em class="fa fa-crosshairs"></em>
<span>Explore</span>
</a>
</div>
<div class="p-2 nav-icon-lg dark-black">
<a class="nav-icon" href="/upload"><em class="fab fa-instagram"></em>
<span>Upload</span>
</a>
</div>
<div class="p-2 nav-icon-lg clean-black">
<a class="nav-icon" href="{{ url('/message/index') }}"><em class="fa fa-align-left"></em>
<span>Messages</span>
</a>
</div>
<div class="p-2 nav-icon-lg mint-green">
<a class="nav-icon" href="/profile/{{Auth::user()->id}}"><em class="fa fa-user"></em>
<span>Profile</span>
</a>
</div>
</div>
</section>
<!-- ==============================================
News Feed Section
=============================================== -->
<main class="py-4">
@include('partials.alert')
@yield('content')
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
<script>
// "fix" to prevent pusher error on reload
window.Pusher = undefined;
</script>
@yield('post-js')
</main>
<!-- ==============================================
Scripts
=============================================== -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/base.js"></script>
<script src="assets/plugins/slimscroll/jquery.slimscroll.js"></script>
<script>
$('#Slim,#Slim2').slimScroll({
height:"auto",
position: 'right',
railVisible: true,
alwaysVisible: true,
size:"8px",
});
</script>
</body>
</html>
My vue.js
<template>
<div class="container">
<button class="kafe-btn kafe-btn-mint" @click="followUser" v-text="buttonText"></button>
</div>
</template>
<script>
export default {
props: ['userId', 'follows'],
mounted() {
console.log('Component mounted.')
},
data: function () {
return {
status: this.follows,
}
},
methods: {
followUser() {
axios.post('/follow/' + this.userId)
.then(response => {
this.status = ! this.status;
console.log(response.data);
})
.catch(errors => {
if (errors.response.status == 401){
window.location = '/login';
}
});
}
},
computed: {
buttonText() {
return (this.status) ? 'Unfollow' : 'Follow';
}
}
}
</script>
Please or to participate in this conversation.