Skip to content

Instantly share code, notes, and snippets.

@machariamarigi

machariamarigi/gist:ae818ecd5a3cfce53119bef1e0365fe5

Created February 26, 2017 21:05
Show Gist options
  • Save machariamarigi/ae818ecd5a3cfce53119bef1e0365fe5 to your computer and use it in GitHub Desktop.
Save machariamarigi/ae818ecd5a3cfce53119bef1e0365fe5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>simona flowers</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://www.gstatic.com/firebasejs/3.6.10/firebase.js"></script>
<script src="firebase-token.js"></script>
<!-- *******************************************************************************************
* TODO(DEVELOPER): Paste the initialization snippet from:
* Firebase Console > Overview > Add Firebase to your web app. *
***************************************************************************************** -->
<script type="text/javascript">
initApp = function () {
firebase.auth().onAuthStateChanged(function (user) {
if (user) {
// User is signed in.
var displayName = user.displayName;
var email = user.email;
var emailVerified = user.emailVerified;
var photoURL = user.photoURL;
var uid = user.uid;
var providerData = user.providerData;
user.getToken().then(function (accessToken) {
document.getElementById('sign-in-status').textContent = 'Signed in';
document.getElementById('sign-in').textContent = 'Sign out';
document.getElementById('account-details').textContent = JSON.stringify({
displayName: displayName,
email: email,
emailVerified: emailVerified,
// photoURL: photoURL,
// uid: uid,
// accessToken: accessToken,
// providerData: providerData
}, null, ' ');
});
} else {
// User is signed out.
document.getElementById('sign-in-status').textContent = 'Signed out';
document.getElementById('sign-in').textContent = 'Sign in';
document.getElementById('account-details').textContent = 'null';
}
}, function (error) {
console.log(error);
});
};
window.addEventListener('load', function () {
initApp()
});
</script>
</head>
<body class="">
<h1 class="text-center text-muted display-3 mb-3">Simona Admin Panel</h1>
<hr>
<div class="container">
<div class="row text-center mb-3">
<div class="col-md-4">
<div id="sign-in-status"></div>
</div>
<div class="col-md-4">
<div id="sign-in"></div>
</div>
<div class="col-md-4">
<div id="account-details"></div>
</div>
</div>
<hr>
<!--data render here-->
<div id="fapp">
<div class="dropdown mb-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
select category to view
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<button class="dropdown-item" @click="birthdayView=!birthdayView">birthday</button>
<button class="dropdown-item" @click="corporateView=!corporateView">corporate</button>
<button class="dropdown-item" @click="funeralView=!funeralView">funeral</button>
<button class="dropdown-item" @click="getwellView=!getwellView">getwell</button>
<button class="dropdown-item" @click="loveView=!loveView">love</button>
<button class="dropdown-item" @click="newbornView=!newbornView">newborn</button>
<button class="dropdown-item" @click="valentineView=!valentineView">valentine</button>
<button class="dropdown-item" @click="weddingView=!weddingView">wedding</button>
</div>
</div>
<!--dropdown-->
<div id="birthdaySection" v-show="!birthdayView"><hr>
<h3 class="display-4 text-muted">Birthday Catalogue</h3><hr>
<div class="text-right">
<button class="btn btn-outline-info btn-sm" @click="birthdayHide()">hide category</button>
</div>
<div class="row mb-3" >
<div class="col-md-6 mb-3" v-for="item in birthday">
<div class="card bg-faded">
<div class="card-header">
<h2 class="text-muted"> {{item.title}} </h2>
</div>
<!--card-header-->
<div class="card-block">
<div class="row">
<div class="col-md-4">
<img v-bind:src="item.image" alt="" class=" img-fluid img-fix">
</div>
<div class="col-md-8">
<h4 class="text-muted"> {{item.id}} </h4>
<p class="text-muted"> {{item.description}} </p>
</div>
</div>
</div>
<!--card-block-->
<div class="card-footer">
<div class="row">
<div class="col-md-4">
<p class="text-muted"> {{item.price}} </p>
</div>
<div class="col-md-4">
<button class="btn btn-info btn-sm">Edit product details</button>
</div>
<div class="col-md-4">
<button class="btn btn-danger btn-sm" @click="deleteBirthday(item['.key'])">delete product</button>
</div>
</div>
<!--row-->
</div>
<!--card-footer-->
</div>
<!--card-->
</div>
<!--col-md-12 v-for-->
</div><!--row-->
</div><!--birthdaySection-->
<div id="corporateSection" v-show="!corporateView"><hr>
<h3 class="display-4 text-muted">Corporate Catalogue</h3><hr>
<div class="row mb-3" >
<div class="col-md-6 mb-3" v-for="item in corporate">
<div class="card bg-faded">
<div class="card-header">
<h2 class="text-muted"> {{item.title}} </h2>
</div>
<!--card-header-->
<div class="card-block">
<div class="row">
<div class="col-md-4">
<img v-bind:src="item.image" alt="" class=" img-fluid img-fix">
</div>
<div class="col-md-8">
<h4 class="text-muted"> {{item.id}} </h4>
<p class="text-muted"> {{item.description}} </p>
</div>
</div>
</div>
<!--card-block-->
<div class="card-footer">
<div class="row">
<div class="col-md-4">
<p class="text-muted"> {{item.price}} </p>
</div>
<div class="col-md-4">
<button class="btn btn-info btn-sm">Edit product details</button>
</div>
<div class="col-md-4">
<button class="btn btn-danger btn-sm" @click="deleteCorporate(item['.key'])">delete product</button>
</div>
</div>
<!--row-->
</div>
<!--card-footer-->
</div>
<!--card-->
</div>
<!--col-md-12 v-for-->
</div><!--row-->
</div><!--corporateSection-->
<div id="funeralSection" v-show="!funeralView"><hr>
<h3 class="display-4 text-muted">Funeral Catalogue</h3><hr>
<div class="row mb-3" >
<div class="col-md-6 mb-3" v-for="item in funeral">
<div class="card bg-faded">
<div class="card-header">
<h2 class="text-muted"> {{item.title}} </h2>
</div>
<!--card-header-->
<div class="card-block">
<div class="row">
<div class="col-md-4">
<img v-bind:src="item.image" alt="" class=" img-fluid img-fix">
</div>
<div class="col-md-8">
<h4 class="text-muted"> {{item.id}} </h4>
<p class="text-muted"> {{item.description}} </p>
</div>
</div>
</div>
<!--card-block-->
<div class="card-footer">
<div class="row">
<div class="col-md-4">
<p class="text-muted"> {{item.price}} </p>
</div>
<div class="col-md-4">
<button class="btn btn-info btn-sm">Edit product details</button>
</div>
<div class="col-md-4">
<button class="btn btn-danger btn-sm" @click="deleteFuneral(item['.key'])">delete product</button>
</div>
</div>
<!--row-->
</div>
<!--card-footer-->
</div>
<!--card-->
</div>
<!--col-md-12 v-for-->
</div><!--row-->
</div><!--funeralSection-->
<div id="getwellSection" v-show="!getwellView"><hr>
<h3 class="display-4 text-muted">Getwell Catalogue</h3><hr>
<div class="row mb-3" >
<div class="col-md-6 mb-3" v-for="item in getwell">
<div class="card bg-faded">
<div class="card-header">
<h2 class="text-muted"> {{item.title}} </h2>
</div>
<!--card-header-->
<div class="card-block">
<div class="row">
<div class="col-md-4">
<img v-bind:src="item.image" alt="" class=" img-fluid img-fix">
</div>
<div class="col-md-8">
<h4 class="text-muted"> {{item.id}} </h4>
<p class="text-muted"> {{item.description}} </p>
</div>
</div>
</div>
<!--card-block-->
<div class="card-footer">
<div class="row">
<div class="col-md-4">
<p class="text-muted"> {{item.price}} </p>
</div>
<div class="col-md-4">
<button class="btn btn-info btn-sm">Edit product details</button>
</div>
<div class="col-md-4">
<button class="btn btn-danger btn-sm" @click="deleteGetwell(item['.key'])">delete product</button>
</div>
</div>
<!--row-->
</div>
<!--card-footer-->
</div>
<!--card-->
</div>
<!--col-md-12 v-for-->
</div><!--row-->
</div><!--getwellSection-->
<div id="loveSection" v-show="!loveView"><hr>
<h3 class="display-4 text-muted">Love and Romance Catalogue</h3><hr>
<div class="row mb-3" >
<div class="col-md-6 mb-3" v-for="item in love">
<div class="card bg-faded">
<div class="card-header">
<h2 class="text-muted"> {{item.title}} </h2>
</div>
<!--card-header-->
<div class="card-block">
<div class="row">
<div class="col-md-4">
<img v-bind:src="item.image" alt="" class=" img-fluid img-fix">
</div>
<div class="col-md-8">
<h4 class="text-muted"> {{item.id}} </h4>
<p class="text-muted"> {{item.description}} </p>
</div>
</div>
</div>
<!--card-block-->
<div class="card-footer">
<div class="row">
<div class="col-md-4">
<p class="text-muted"> {{item.price}} </p>
</div>
<div class="col-md-4">
<button class="btn btn-info btn-sm">Edit product details</button>
</div>
<div class="col-md-4">
<button class="btn btn-danger btn-sm" @click="deleteLove(item['.key'])">delete product</button>
</div>
</div>
<!--row-->
</div>
<!--card-footer-->
</div>
<!--card-->
</div>
<!--col-md-12 v-for-->
</div><!--row-->
</div><!--loveSection-->
<div id="newbornSection" v-show="!newbornView"><hr>
<h3 class="display-4 text-muted">Newborn Catalogue</h3><hr>
<div class="row mb-3" >
<div class="col-md-6 mb-3" v-for="item in newborn">
<div class="card bg-faded">
<div class="card-header">
<h2 class="text-muted"> {{item.title}} </h2>
</div>
<!--card-header-->
<div class="card-block">
<div class="row">
<div class="col-md-4">
<img v-bind:src="item.image" alt="" class=" img-fluid img-fix">
</div>
<div class="col-md-8">
<h4 class="text-muted"> {{item.id}} </h4>
<p class="text-muted"> {{item.description}} </p>
</div>
</div>
</div>
<!--card-block-->
<div class="card-footer">
<div class="row">
<div class="col-md-4">
<p class="text-muted"> {{item.price}} </p>
</div>
<div class="col-md-4">
<button class="btn btn-info btn-sm">Edit product details</button>
</div>
<div class="col-md-4">
<button class="btn btn-danger btn-sm" @click="deleteNewborn(item['.key'])">delete product</button>
</div>
</div>
<!--row-->
</div>
<!--card-footer-->
</div>
<!--card-->
</div>
<!--col-md-12 v-for-->
</div><!--row-->
</div><!--newbornSection-->
<div id="valentineSection" v-show="!valentineView"><hr>
<h3 class="display-4 text-muted">Valentine Catalogue</h3><hr>
<div class="row mb-3" >
<div class="col-md-6 mb-3" v-for="item in valentine">
<div class="card bg-faded">
<div class="card-header">
<h2 class="text-muted"> {{item.title}} </h2>
</div>
<!--card-header-->
<div class="card-block">
<div class="row">
<div class="col-md-4">
<img v-bind:src="item.image" alt="" class=" img-fluid img-fix">
</div>
<div class="col-md-8">
<h4 class="text-muted"> {{item.id}} </h4>
<p class="text-muted"> {{item.description}} </p>
</div>
</div>
</div>
<!--card-block-->
<div class="card-footer">
<div class="row">
<div class="col-md-4">
<p class="text-muted"> {{item.price}} </p>
</div>
<div class="col-md-4">
<button class="btn btn-info btn-sm">Edit product details</button>
</div>
<div class="col-md-4">
<button class="btn btn-danger btn-sm" @click="deleteValentine(item['.key'])">delete product</button>
</div>
</div>
<!--row-->
</div>
<!--card-footer-->
</div>
<!--card-->
</div>
<!--col-md-12 v-for-->
</div><!--row-->
</div><!--valentineSection-->
<div id="weddingSection" v-show="!weddingView"><hr>
<h3 class="display-4 text-muted">Wedding Catalogue</h3><hr>
<div class="row mb-3" >
<div class="col-md-6 mb-3" v-for="item in wedding">
<div class="card bg-faded">
<div class="card-header">
<h2 class="text-muted"> {{item.title}} </h2>
</div>
<!--card-header-->
<div class="card-block">
<div class="row">
<div class="col-md-4">
<img v-bind:src="item.image" alt="" class=" img-fluid img-fix">
</div>
<div class="col-md-8">
<h4 class="text-muted"> {{item.id}} </h4>
<p class="text-muted"> {{item.description}} </p>
</div>
</div>
</div>
<!--card-block-->
<div class="card-footer">
<div class="row">
<div class="col-md-4">
<p class="text-muted"> {{item.price}} </p>
</div>
<div class="col-md-4">
<button class="btn btn-info btn-sm">Edit product details</button>
</div>
<div class="col-md-4">
<button class="btn btn-danger btn-sm" @click="deleteWedding(item['.key'])">delete product</button>
</div>
</div>
<!--row-->
</div>
<!--card-footer-->
</div>
<!--card-->
</div>
<!--col-md-12 v-for-->
</div><!--row-->
</div><!--weddingSection-->
<hr class="mb-3">
<div class="page-header">
<h2 class="display-5">Form to upload new products</h2>
<hr>
</div>
<form>
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="card card-outline-primary mb-3 text-center">
<div class="card-block">
<div class="form-group row">
<label for="Product Name" class="col-sm-2 col-form-label">Name of Product</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="productTitle" v-model="newProduct.title" placeholder="Name">
</div>
</div>
<div class="form-group row">
<label for="image" class="col-sm-2 col-form-label">Image</label>
<div class="col-sm-10">
<input type="file" class="form-control" id="image" v-on:change="imageUpload" placeholder="image">
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-2 col-form-label">Description</label>
<div class="col-sm-10">
<input type="text-area" class="form-control" id="description" v-model="newProduct.description" placeholder="description...">
</div>
</div>
<div class="form-group row">
<label for="price" class="col-sm-2 col-form-label">Price</label>
<div class="col-sm-10">
<input type="text-area" class="form-control" id="price" v-model="newProduct.price" placeholder="price">
</div>
</div>
<div class="form-group row text-xs-center">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle col-sm-12" type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Upload to Which Category?
</button>
<div class="dropdown-menu col-sm-12" aria-labelledby="dropdownMenuButton">
<button class="dropdown-item" @click="uploadBirthday()">birthday</button>
<button class="dropdown-item" @click="uploadCorporate()">corporate</button>
<button class="dropdown-item" @click="uploadFuneral()">funeral</button>
<button class="dropdown-item" @click="uploadGetwell()">getwell</button>
<button class="dropdown-item" @click="uploadLove()">love</button>
<button class="dropdown-item" @click="uploadNewBorn()">newborn</button>
<button class="dropdown-item" @click="uploadValentine()">valentine</button>
<button class="dropdown-item" @click="uploadWedding()">wedding</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div> <!--fapp-->
<hr class="mb-5">
</div> <!--outer container-->
<!--data render here-->
<!--eo container-->
<div class="text-center">
<button id="signOut" class="btn btn-danger btn-lg">Sign Out</button>
</div>
<footer class="text-center" style="margin: 20px;color: #FFF;">
<p class="">Simona Flowers Kenya</p>
</footer>
<script>
document.getElementById('signOut').addEventListener('click', function (event) {
firebase.auth().signOut();
location.href = "http://localhost:8080";
});
</script>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<!-- Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- Firebase -->
<!-- VueFire -->
<script src="https://unpkg.com/vuefire/dist/vuefire.js"></script>
<script src="js/index.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="https://maxcdn.bootstrapcdn.com/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment