CoPilot GitHub Details, Stars and Alternatives

README preview

CoPilot is a fully responsive admin template that is forked from AdminLTE. The difference here is that this repo is tailored to use with Vue.js. The UI is based on the Bootstrap 3 framework. Highly customizable and easy to use. Fits many screen resolutions from small mobile devices to large desktops.

✈️️ Take it for a spin.

In an attempt to keep the project clean I have not included every plugin/feature that AdminLTE offers. You simply need to add the plugin in the /static/js/plugin folder to include them or use npm. I've included the popular ones.

The structure of the app is scaffolded by vue-cli. Which is a simple CLI tool that setups our environment. CoPilot uses the webpack package. So we get a full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.

We leverage all the goodies that vue.js offers. Vue-Router for routing. Vue-Resource for AJAX calls. Vuex for state management. This project is using VueJS 2.0! Earlier versions can be found under the vue 1.0 branch.

I also recommend that you install vue-devtools for Chrome so that you can easily inspect that state of vue.

The data that is being pulled uses faker.js to make it dynamic. This is for demo purposes. Look for demo.* for information that is generated dynamically.

Installation

Installing CoPilot is easy.

Download:

Download from Github

Using The Command Line:

git clone https://github.com/misterGF/CoPilot.git

Build Setup

# install dependencies
sudo npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

Documentation

Depending on the component you are working on you should have the following links handy.

AdminLTE - online documentation
BootStrap 3 - online documentation
Vue.js - online documentation
~~Vue-Resource~~ - No longer supported
Axios - online documentation
Vue-Router - online documentation
Vuex - online documentation

Information and tips about CoPilot can be found in the wiki.

Browser Support

IE 9+
Firefox (latest)
Chrome (latest)
Safari (latest)
Opera (latest)

Contribution

Contribution are always welcome and recommended! Here is how:

Fork the repository (here is the guide).
Clone to your machine git clone https://github.com/YOUR_USERNAME/CoPilot.git
Make your changes
Create a pull request

TODOS

The purpose of this project is to provide a full example of how to leverage Vue. If you find anything that can be Vue-ified please send me a PR.

License

CoPilot is an open source project by Gil Ferreira that is licensed under MIT.

Image Credits

adeliajihann /

pegawai

★ 0

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Pegawai</title>  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">  <link rel="stylesheet" href="{{asset('template')}}/plugins/fontawesome-free/css/all.min.css">  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">  <link rel="stylesheet" href="{{asset('template')}}/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">  <link rel="stylesheet" href="{{asset('template')}}/plugins/icheck-bootstrap/icheck-bootstrap.min.css">  <link rel="stylesheet" href="{{asset('template')}}/plugins/jqvmap/jqvmap.min.css">  <link rel="stylesheet" href="{{asset('template')}}/dist/css/adminlte.min.css">  <link rel="stylesheet" href="{{asset('template')}}/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">  <link rel="stylesheet" href="{{asset('template')}}/plugins/daterangepicker/daterangepicker.css">  <link rel="stylesheet" href="{{asset('template')}}/plugins/summernote/summernote-bs4.min.css"> </head> <body class="hold-transition sidebar-mini layout-fixed"> <div class="wrapper">  <nav class="main-header navbar navbar-expand navbar-white navbar-light">  <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a> </li> </ul>  <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#" role="button" class="fas fa-box-arrow-right">Logout</a> </li> </ul> </nav>   <aside class="main-sidebar sidebar-dark-primary elevation-3">  <a class="brand-link"> <div style="text-align:center">SPINER</div> </a>  <div class="sidebar">  <div class="user-panel mt-3 pb-3 mb-3 d-flex"> <div class="text-center"> <img src="{{ asset('template/dist/img/user.png') }}" class="img-responsive"> </div> <a style="text-align:center">Pegawai</a> </div>  <nav class="mt-1"> <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"> <li class="nav-item"> <a href="pages/calendar.html" class="nav-link"> <i class="nav-icon fa fa-th-large"></i> <p> Dashboard <span class="badge badge-info right"></span> </p> </a> </li> <li class="nav-item"> <a href="pages/calendar.html" class="nav-link"> <i class="nav-icon fa fa-suitcase"></i> <p> Kinerja Pegawai <span class="badge badge-info right"></span> </p> </a> </li> <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon fas fa-file-alt"></i> <p> Laporan <i class="right fas fa-angle-left"></i> </p> </a> <ul class="nav nav-treeview"> <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon fas fa-check-circle"></i> <p>Terverifikasi</p> </a> </li> </ul> </li> <li class="nav-item"> <a href="pages/calendar.html" class="nav-link"> <i class="nav-icon fa fa-cog"></i> <p> Settings <span class="badge badge-info right"></span> </p> </a> </li> </nav>  </div>  </aside>  <div class="content-wrapper">  <div class="content-header"> <div class="container-fluid"> <div class="row mb-2"> <div class="col-sm-6"> <h1 class="m-0">Dashboard</h1> </div> </div> </div> </div>   <section class="content"> <div class="container-fluid">  <div class="row"> <div class="col-lg-3 col-6">  <div class="small-box bg-purple"> <div class="inner"> <h3>1</h3> <p>Kinerja Pegawai</p> </div> <div class="icon"> <i class="ionicons ion-ios-briefcase"></i> </div> <a href="#" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a> </div> </div> <div class="col-lg-3 col-6">  <div class="small-box bg-danger"> <div class="inner"> <h3>1</h3> <p>Laporan</p> </div> <div class="icon"> <i class="ionicons ion-document-text"></i> </div> <a href="#" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a> </div> </div>  </div> </section>  </div>  <footer class="main-footer"> <strong>Copyright © 2022 <a>KOMINFO</a>.</strong> All rights reserved. </footer>  <aside class="control-sidebar control-sidebar-dark">  </aside>  </div>   <script src="{{asset('template')}}plugins/jquery/jquery.min.js"></script>  <script src="{{asset('template')}}plugins/jquery-ui/jquery-ui.min.js"></script>  <script> $.widget.bridge('uibutton', $.ui.button) </script>  <script src="{{asset('template')}}/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>  <script src="{{asset('template')}}/plugins/chart.js/Chart.min.js"></script>  <script src="{{asset('template')}}/plugins/sparklines/sparkline.js"></script>  <script src="{{asset('template')}}/plugins/jqvmap/jquery.vmap.min.js"></script> <script src="{{asset('template')}}/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>  <script src="{{asset('template')}}/plugins/jquery-knob/jquery.knob.min.js"></script>  <script src="{{asset('template')}}/plugins/moment/moment.min.js"></script> <script src="{{asset('template')}}/plugins/daterangepicker/daterangepicker.js"></script>  <script src="{{asset('template')}}/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>  <script src="{{asset('template')}}/plugins/summernote/summernote-bs4.min.js"></script>  <script src="{{asset('template')}}/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>  <script src="{{asset('template')}}/dist/js/adminlte.js"></script>  <script src="{{asset('template')}}/dist/js/demo.js"></script>  <script src="{{asset('template')}}/dist/js/pages/dashboard.js"></script> </body> </html>

27/100 health

Active repository

BladeNo license

⑂ 2 forks◯ 0 issuesUpdated Aug 24, 2022

View details View on GitHub ↗

CoPilot

Live repository statistics

Strong signals