├── static
    ├── .gitkeep
    └── css
    │   ├── railscasts.css
    │   └── application.css
├── .eslintignore
├── src
    ├── store
    │   ├── actions.js
    │   ├── mutation-types.js
    │   ├── index.js
    │   └── modules
    │   │   ├── current-project.js
    │   │   ├── alert.js
    │   │   ├── current-platform.js
    │   │   └── current-user.js
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── global
    │   │   ├── LoadingOverlay.vue
    │   │   ├── UserPanel.vue
    │   │   ├── ContentFooter.vue
    │   │   ├── ContentHeader.vue
    │   │   ├── Alert.vue
    │   │   ├── SideBarItem.vue
    │   │   ├── SideBar.vue
    │   │   ├── TableBox.vue
    │   │   ├── NavBar.vue
    │   │   ├── ConfirmModal.vue
    │   │   └── Pagination.vue
    │   ├── admin
    │   │   ├── SideBar.vue
    │   │   └── TemplateForm.vue
    │   ├── projects
    │   │   ├── ServiceField.vue
    │   │   ├── SideBar.vue
    │   │   ├── Dependency.vue
    │   │   ├── Form.vue
    │   │   ├── Info.vue
    │   │   └── EnvForm.vue
    │   └── dashboard
    │   │   ├── Aggregate.vue
    │   │   └── WeeklyChart.vue
    ├── views
    │   ├── jobs
    │   │   └── Index.vue
    │   ├── projects
    │   │   ├── Home.vue
    │   │   ├── environments
    │   │   │   ├── configs
    │   │   │   │   ├── services
    │   │   │   │   │   ├── Edit.vue
    │   │   │   │   │   └── List.vue
    │   │   │   │   ├── Index.vue
    │   │   │   │   ├── Fastlane.vue
    │   │   │   │   └── GitClone.vue
    │   │   │   ├── New.vue
    │   │   │   ├── Clone.vue
    │   │   │   ├── List.vue
    │   │   │   └── Edit.vue
    │   │   ├── New.vue
    │   │   ├── Layout.vue
    │   │   ├── Edit.vue
    │   │   ├── List.vue
    │   │   └── builds
    │   │   │   ├── Info.vue
    │   │   │   ├── Detail.vue
    │   │   │   └── List.vue
    │   ├── dashboard
    │   │   └── List.vue
    │   ├── Layout.vue
    │   ├── admin
    │   │   ├── Layout.vue
    │   │   └── fastlane_templates
    │   │   │   ├── New.vue
    │   │   │   ├── Edit.vue
    │   │   │   └── List.vue
    │   ├── members
    │   │   └── List.vue
    │   ├── activity
    │   │   └── List.vue
    │   └── account
    │   │   └── Login.vue
    ├── router
    │   ├── index.js
    │   └── routes.js
    ├── constants
    │   ├── enum.js
    │   └── api.js
    ├── utils
    │   ├── storage.js
    │   └── networking.js
    ├── main.js
    └── App.vue
├── babel.config.js
├── .gitignore
├── .editorconfig
├── .postcssrc.js
├── index.html
├── mock
    ├── data
    │   ├── services.json
    │   ├── users.json
    │   ├── environments.json
    │   ├── configs.json
    │   ├── dependencies.json
    │   ├── builds.json
    │   └── projects.json
    └── server.js
├── .eslintrc.js
├── vue.config.js
├── package.json
└── README.md


/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | build/*.js
2 | config/*.js
3 | 


--------------------------------------------------------------------------------
/src/store/actions.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * Created by Thierry on 2017/5/16.
3 |  */
4 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thierryxing/Falcon/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | .idea/*
8 | package-lock.json
9 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
1 | // https://github.com/michael-ciniawsky/postcss-load-config
2 | 
3 | module.exports = {
4 |   "plugins": {
5 |     // to edit target browsers: use "browserlist" field in projects.json
6 |     "autoprefixer": {}
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Falcon</title>
 6 | </head>
 7 | <body class="skin-blue fixed sidebar-mini">
 8 | <div id="app"></div>
 9 | <!-- built files will be auto injected -->
10 | </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/src/components/global/LoadingOverlay.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="overlay">
 3 |     <i class="fa fa-refresh fa-spin"></i>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 | 
10 |     data () {
11 |       return {
12 |         msg: ''
13 |       }
14 |     }
15 |   }
16 | </script>
17 | 


--------------------------------------------------------------------------------
/src/views/jobs/Index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <iframe :src="url" width="100%" height="1000px"></iframe>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 | 
10 |     data () {
11 |       return {
12 |         url: `${process.env.JAGUAR_HOST}/sidekiq`
13 |       }
14 |     }
15 | 
16 |   }
17 | </script>
18 | 


--------------------------------------------------------------------------------
/src/views/projects/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="row">
 3 |     <div class="col-md-12">
 4 |       <info></info>
 5 |     </div>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 |   import Info from '@/components/projects/Info'
11 |   import Dependency from '@/components/projects/Dependency'
12 | 
13 |   export default {
14 |     components: {Info, Dependency}
15 |   }
16 | </script>
17 | 


--------------------------------------------------------------------------------
/src/views/dashboard/List.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <aggregate></aggregate>
 4 |     <weekly-chart></weekly-chart>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |   import Aggregate from '@/components/dashboard/Aggregate'
10 |   import WeeklyChart from '@/components/dashboard/WeeklyChart'
11 | 
12 |   export default {
13 |     components: {Aggregate, WeeklyChart}
14 |   }
15 | </script>
16 | 


--------------------------------------------------------------------------------
/src/views/projects/environments/configs/services/Edit.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="">
 3 |     </div>
 4 | </template>
 5 | 
 6 | <script>
 7 |   export default {
 8 |     name: '',
 9 |     data () {
10 |       return {
11 |         msg: ''
12 |       }
13 |     }
14 |   }
15 | </script>
16 | 
17 | <!-- Add "scoped" attribute to limit CSS to this component only -->
18 | <style scoped>
19 | 
20 | </style>
21 | 


--------------------------------------------------------------------------------
/src/store/mutation-types.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Thierry on 2017/5/16.
 3 |  */
 4 | export const CREATE_USER = 'CREATE_USER'
 5 | export const FETCH_USER = 'FETCH_USER'
 6 | export const DELETE_USER = 'DELETE_USER'
 7 | 
 8 | export const CREATE_ALERT = 'CREATE_ALERT'
 9 | export const DELETE_ALERT = 'DELETE_ALERT'
10 | 
11 | export const SET_PROJECT = 'SET_PROJECT'
12 | 
13 | export const SET_PLATFORM = 'SET_PLATFORM'
14 | export const FETCH_PLATFORM = 'FETCH_PLATFORM'
15 | 


--------------------------------------------------------------------------------
/mock/data/services.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "services": {
 3 |     "total": 10,
 4 |     "list": [
 5 |       {
 6 |         "id": "fir",
 7 |         "name": "Fir",
 8 |         "desc": "Fir - 服务移动开发者，让开发测试更高效",
 9 |         "updated_at": "30 Mar 16:27",
10 |         "active": true,
11 |         "projectId": 4
12 |       },
13 |       {
14 |         "id": "bugly",
15 |         "name": "Bugly",
16 |         "desc": "Bugly内测分发平台",
17 |         "updated_at": "30 Mar 16:27",
18 |         "active": false,
19 |         "projectId": 4
20 |       }
21 |     ]
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import store from '@/store'
 4 | import routes from './routes.js'
 5 | 
 6 | Vue.use(Router)
 7 | 
 8 | const router = new Router({
 9 |   routes
10 | })
11 | 
12 | router.beforeEach((to, from, next) => {
13 |   // if user not exist, then go to login
14 |   if (to.name !== 'login') {
15 |     let user = store.getters.currentUser
16 |     if (user === null || user.id === null) {
17 |       router.replace({name: 'login'})
18 |     }
19 |   }
20 |   next()
21 | })
22 | 
23 | export default router
24 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Thierry on 2017/5/16.
 3 |  */
 4 | import Vue from 'vue'
 5 | import Vuex from 'vuex'
 6 | import * as actions from './actions'
 7 | import currentUser from './modules/current-user'
 8 | import alert from './modules/alert'
 9 | import currentProject from './modules/current-project'
10 | import currentPlatform from './modules/current-platform'
11 | 
12 | Vue.use(Vuex)
13 | 
14 | const debug = process.env.NODE_ENV !== 'production'
15 | 
16 | export default new Vuex.Store({
17 |   actions,
18 |   modules: {
19 |     currentUser,
20 |     alert,
21 |     currentProject,
22 |     currentPlatform
23 |   },
24 |   strict: debug
25 | })
26 | 


--------------------------------------------------------------------------------
/src/constants/enum.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Thierry on 2017/6/7.
 3 |  */
 4 | export default {
 5 | 
 6 |   ProjectType: {
 7 |     App: 'App',
 8 |     Lib: 'Lib'
 9 |   },
10 | 
11 |   Platforms: {
12 |     iOS: 'ios',
13 |     Android: 'android'
14 |   },
15 | 
16 |   Templates: {
17 |     Prod: 0,
18 |     Test: 1,
19 |     Beta: 2,
20 |     Lib: 3
21 |   },
22 | 
23 |   BuildStatus: {
24 |     Failed: 'failed',
25 |     Success: 'success',
26 |     Processing: 'processing',
27 |     Canceled: 'canceled'
28 |   },
29 | 
30 |   CloneStatus: {
31 |     Prepare: 'prepare',
32 |     Processing: 'processing',
33 |     Success: 'success',
34 |     Failed: 'failed'
35 |   }
36 | 
37 | }
38 | 
39 | 


--------------------------------------------------------------------------------
/src/store/modules/current-project.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Thierry on 2017/5/16.
 3 |  */
 4 | import * as types from '../mutation-types'
 5 | import storage from '@/utils/storage'
 6 | 
 7 | // initial state
 8 | const state = {
 9 |   project: {
10 |     guardian: {}
11 |   }
12 | }
13 | 
14 | // getters
15 | const getters = {
16 |   currentProject: state => state.project
17 | }
18 | 
19 | // actions
20 | const actions = {
21 |   setProject ({commit}, project) {
22 |     commit(types.SET_PROJECT, project)
23 |   }
24 | }
25 | 
26 | // mutations
27 | const mutations = {
28 |   [types.SET_PROJECT] (state, project) {
29 |     state.project = project
30 |   }
31 | }
32 | 
33 | export default {
34 |   state,
35 |   getters,
36 |   actions,
37 |   mutations
38 | }
39 | 


--------------------------------------------------------------------------------
/src/components/admin/SideBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <aside class="main-sidebar">
 3 |     <section class="sidebar">
 4 |       <user-panel></user-panel>
 5 |       <side-bar-item :navsData="navs"></side-bar-item>
 6 |     </section>
 7 |   </aside>
 8 | </template>
 9 | 
10 | <script>
11 | import UserPanel from '@/components/global/UserPanel'
12 | import SideBarItem from '@/components/global/SideBarItem'
13 | 
14 | export default {
15 |   components: { UserPanel, SideBarItem },
16 |   data() {
17 |     return {
18 |       navs: [
19 |         {
20 |           name: 'Fastlane Template',
21 |           to: 'fastlane_templates',
22 |           paths: ['fastlane_templates'],
23 |           icon: 'fa-rocket'
24 |         }
25 |       ]
26 |     }
27 |   }
28 | }
29 | </script>
30 | 


--------------------------------------------------------------------------------
/src/components/global/UserPanel.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="user-panel">
 3 |     <div class="pull-left image">
 4 |       <img alt="User Image" class="img-circle" :src="currentUser.avatar_url">
 5 |     </div>
 6 |     <div class="pull-left info">
 7 |       <p>
 8 |         {{ currentUser.name }}
 9 |       </p>
10 |       <a href="#">
11 |         <i class="fa fa-circle text-success"></i>
12 |         Online
13 |       </a>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 |   import NetWorking from '@/utils/networking'
20 |   import * as API from '@/constants/api'
21 |   import { mapGetters } from 'vuex'
22 | 
23 |   export default {
24 |     computed: {
25 |       ...mapGetters({
26 |         currentUser: 'currentUser'
27 |       })
28 |     }
29 |   }
30 | </script>
31 | 


--------------------------------------------------------------------------------
/src/store/modules/alert.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Thierry on 2017/5/16.
 3 |  */
 4 | import * as types from '../mutation-types'
 5 | import storage from '@/utils/storage'
 6 | 
 7 | // initial state
 8 | const state = {
 9 |   alert: null
10 | }
11 | 
12 | // getters
13 | const getters = {
14 |   currentAlert: state => state.alert
15 | }
16 | 
17 | // actions
18 | const actions = {
19 |   createAlert ({commit}, alert) {
20 |     commit(types.CREATE_ALERT, alert)
21 |   },
22 | 
23 |   deleteAlert ({commit}) {
24 |     commit(types.DELETE_ALERT)
25 |   }
26 | }
27 | 
28 | // mutations
29 | const mutations = {
30 |   [types.CREATE_ALERT] (state, alert) {
31 |     state.alert = alert
32 |   },
33 | 
34 |   [types.DELETE_ALERT] (state) {
35 |     state.alert = null
36 |   }
37 | }
38 | 
39 | export default {
40 |   state,
41 |   getters,
42 |   actions,
43 |   mutations
44 | }
45 | 


--------------------------------------------------------------------------------
/src/views/Layout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="skin-blue sidebar-mini wysihtml5-supported">
 3 |     <nav-bar></nav-bar>
 4 |     <side-bar></side-bar>
 5 |     <div class="content-wrapper" style="min-height: 916px;">
 6 |       <alert></alert>
 7 |       <content-header></content-header>
 8 |       <div class="content">
 9 |         <router-view></router-view>
10 |       </div>
11 |     </div>
12 |     <content-footer></content-footer>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 |   import NavBar from '@/components/global/NavBar'
18 |   import SideBar from '@/components/global/SideBar'
19 |   import ContentHeader from '@/components/global/ContentHeader'
20 |   import ContentFooter from '@/components/global/ContentFooter'
21 |   import Alert from '@/components/global/Alert'
22 | 
23 |   export default {components: {SideBar, NavBar, ContentFooter, ContentHeader, Alert}}
24 | </script>
25 | 


--------------------------------------------------------------------------------
/src/views/admin/Layout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="skin-blue sidebar-mini wysihtml5-supported">
 3 |     <nav-bar></nav-bar>
 4 |     <side-bar></side-bar>
 5 |     <div class="content-wrapper" style="min-height: 916px;">
 6 |       <alert></alert>
 7 |       <content-header></content-header>
 8 |       <div class="content">
 9 |         <router-view></router-view>
10 |       </div>
11 |     </div>
12 |     <content-footer></content-footer>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 |   import NavBar from '@/components/global/NavBar'
18 |   import SideBar from '@/components/admin/SideBar'
19 |   import ContentHeader from '@/components/global/ContentHeader'
20 |   import ContentFooter from '@/components/global/ContentFooter'
21 |   import Alert from '@/components/global/Alert'
22 | 
23 |   export default {components: {SideBar, NavBar, ContentFooter, ContentHeader, Alert}}
24 | </script>
25 | 


--------------------------------------------------------------------------------
/src/utils/storage.js:
--------------------------------------------------------------------------------
 1 | const prefix = '__falcon__'
 2 | 
 3 | export default {
 4 |   /**
 5 |    * Get object from localStorage
 6 |    *
 7 |    * @param {string} key
 8 |    * @return {any}
 9 |    */
10 |   get (key) {
11 |     let ret = window.localStorage.getItem(prefix + key)
12 |     if (ret) {
13 |       return JSON.parse(ret)
14 |     }
15 |     return null
16 |   },
17 | 
18 |   /**
19 |    * Set object for localStorage
20 |    *
21 |    * @param {string} key
22 |    * @param {any} value
23 |    * @return {boolean}
24 |    */
25 |   set (key, value) {
26 |     window.localStorage.setItem(prefix + key, JSON.stringify(value))
27 |     return true
28 |   },
29 | 
30 |   /**
31 |    * Remove object from localStorage
32 |    *
33 |    * @param {string} key
34 |    * @return {boolean}
35 |    */
36 |   remove (key) {
37 |     window.localStorage.removeItem(prefix + key)
38 |     return true
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/static/css/railscasts.css:
--------------------------------------------------------------------------------
1 | .hljs{display:block;overflow-x:auto;padding:0.5em;background:#232323;color:#e6e1dc}.hljs-comment,.hljs-quote{color:#bc9458;font-style:italic}.hljs-keyword,.hljs-selector-tag{color:#c26230}.hljs-string,.hljs-number,.hljs-regexp,.hljs-variable,.hljs-template-variable{color:#a5c261}.hljs-subst{color:#519f50}.hljs-tag,.hljs-name{color:#e8bf6a}.hljs-type{color:#da4939}.hljs-symbol,.hljs-bullet,.hljs-built_in,.hljs-builtin-name,.hljs-attr,.hljs-link{color:#6d9cbe}.hljs-params{color:#d0d0ff}.hljs-attribute{color:#cda869}.hljs-meta{color:#9b859d}.hljs-title,.hljs-section{color:#ffc66d}.hljs-addition{background-color:#144212;color:#e6e1dc;display:inline-block;width:100%}.hljs-deletion{background-color:#600;color:#e6e1dc;display:inline-block;width:100%}.hljs-selector-class{color:#9b703f}.hljs-selector-id{color:#8b98ab}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}.hljs-link{text-decoration:underline}
2 | 


--------------------------------------------------------------------------------
/mock/data/users.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "users": {
 3 |     "total": 100,
 4 |     "list": [
 5 |       {
 6 |         "id": 1,
 7 |         "name": "邢天宇",
 8 |         "username": "xingtianyu",
 9 |         "avatar": "https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg",
10 |         "created_at": "2017-01-09",
11 |         "guard_projects": "GMediator_GMDoctor, GMDoctor"
12 |       },
13 |       {
14 |         "id": 2,
15 |         "name": "乔金柱",
16 |         "username": "qiaojinzhu",
17 |         "avatar": "https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg",
18 |         "created_at": "2017-01-09",
19 |         "guard_projects": "GMediator_GMDoctor, GMDoctor"
20 |       }
21 |     ]
22 |   },
23 |   "login": {
24 |     "id": 33,
25 |     "name": "邢天宇",
26 |     "avatar_url": "https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg",
27 |     "created_at": "17 Aug 16:22",
28 |     "platform": "ios"
29 |   },
30 |   "logout": {}
31 | }
32 | 


--------------------------------------------------------------------------------
/src/components/global/ContentFooter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer class="main-footer">
 3 |     <div class="pull-right hidden-xs">
 4 |       <b>Version</b>
 5 |       {{version}}
 6 |     </div>
 7 |     <strong>
 8 |       Copyright &copy; 2016-2017
 9 |       <a href="/">
10 |         Jaguar
11 |         All rights reserved.
12 |       </a>
13 |     </strong>
14 |   </footer>
15 | </template>
16 | 
17 | <script>
18 |   import NetWorking from '@/utils/networking'
19 |   import * as API from '@/constants/api'
20 | 
21 |   export default {
22 |     props: ['project', 'edit'],
23 | 
24 |     data () {
25 |       return {
26 |         version: ''
27 |       }
28 |     },
29 | 
30 |     created () {
31 |       this.fetchData()
32 |     },
33 | 
34 |     methods: {
35 |       fetchData () {
36 |         NetWorking.doGet(API.index).then(response => {
37 |           this.version = response.data.version
38 |         })
39 |       }
40 |     }
41 |   }
42 | </script>
43 | 


--------------------------------------------------------------------------------
/src/store/modules/current-platform.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Thierry on 2017/5/16.
 3 |  */
 4 | import * as types from '../mutation-types'
 5 | import storage from '@/utils/storage'
 6 | 
 7 | // initial state
 8 | const state = {
 9 |   platform: {}
10 | }
11 | 
12 | // getters
13 | const getters = {
14 |   currentPlatform: state => state.platform
15 | }
16 | 
17 | // actions
18 | const actions = {
19 |   setPlatform ({commit}, platform) {
20 |     commit(types.SET_PLATFORM, platform)
21 |   },
22 | 
23 |   fetchPlatform ({commit}) {
24 |     commit(types.FETCH_PLATFORM)
25 |   }
26 | }
27 | 
28 | // mutations
29 | const mutations = {
30 |   [types.SET_PLATFORM] (state, platform) {
31 |     state.platform = platform
32 |     storage.set('current_platform', platform)
33 |   },
34 | 
35 |   [types.FETCH_PLATFORM] (state) {
36 |     state.platform = storage.get('current_platform')
37 |   }
38 | }
39 | 
40 | export default {
41 |   state,
42 |   getters,
43 |   actions,
44 |   mutations
45 | }
46 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | // http://eslint.org/docs/user-guide/configuring
 2 | module.exports = {
 3 |   root: true,
 4 |   'extends': [
 5 |     'airbnb-base',
 6 |     'plugin:vue/essential',
 7 |     'eslint:recommended'
 8 |   ],
 9 |   rules: {
10 |     'import/extensions': ['off', 'always', {
11 |       'vue': 'never'
12 |     }],
13 |     'import/no-unresolved': ['off', 'always', {
14 |       'vue': 'never'
15 |     }],
16 |     // allow paren-less arrow functions
17 |     'arrow-parens': 0,
18 |     // allow async-await
19 |     'generator-star-spacing': 0,
20 |     // allow debugger during development
21 |     'no-unused-vars': 0,
22 |     'no-trailing-spaces': 0,
23 |     'indent': 0,
24 |     'semi': 0,
25 |     'object-property-newline': 0,
26 |     'space-before-function-paren': 0,
27 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
28 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
29 |   },
30 |   parserOptions: {
31 |     parser: 'babel-eslint'
32 |   }
33 | }
34 | 
35 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import App from '@/App'
 5 | import router from '@/router'
 6 | import store from '@/store'
 7 | import VueResource from 'vue-resource'
 8 | import VueHighlightJS from 'vue-highlightjs'
 9 | 
10 | import 'bootstrap/dist/css/bootstrap.css'
11 | import 'bootstrap/dist/js/bootstrap.min'
12 | import 'admin-lte/dist/css/AdminLTE.min.css'
13 | import 'admin-lte/dist/css/skins/skin-blue.min.css'
14 | import 'admin-lte/dist/js/adminlte.min'
15 | import 'font-awesome/css/font-awesome.min.css'
16 | import '../static/css/application.css'
17 | import '../static/css/railscasts.css'
18 | 
19 | Vue.config.productionTip = false
20 | Vue.use(VueResource)
21 | Vue.use(VueHighlightJS)
22 | 
23 | // Get User from local storage
24 | store.dispatch('fetchUser')
25 | 
26 | /* eslint-disable no-new */
27 | new Vue({
28 |   el: '#app',
29 |   router,
30 |   store,
31 |   template: '<App/>',
32 |   components: {App}
33 | })
34 | 
35 | 


--------------------------------------------------------------------------------
/src/store/modules/current-user.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Thierry on 2017/5/16.
 3 |  */
 4 | import * as types from '../mutation-types'
 5 | import storage from '@/utils/storage'
 6 | 
 7 | // initial state
 8 | const state = {
 9 |   user: {}
10 | }
11 | 
12 | // getters
13 | const getters = {
14 |   currentUser: state => state.user
15 | }
16 | 
17 | // actions
18 | const actions = {
19 |   createUser ({commit}, user) {
20 |     commit(types.CREATE_USER, user)
21 |   },
22 | 
23 |   fetchUser ({commit}) {
24 |     commit(types.FETCH_USER)
25 |   },
26 | 
27 |   deleteUser ({commit}) {
28 |     commit(types.DELETE_USER)
29 |   }
30 | }
31 | 
32 | // mutations
33 | const mutations = {
34 |   [types.CREATE_USER] (state, user) {
35 |     state.user = user
36 |     storage.set('current_user', user)
37 |   },
38 | 
39 |   [types.FETCH_USER] (state) {
40 |     state.user = storage.get('current_user')
41 |   },
42 | 
43 |   [types.DELETE_USER] (state) {
44 |     storage.remove('current_user')
45 |     state.user = {}
46 |   }
47 | }
48 | 
49 | export default {
50 |   state,
51 |   getters,
52 |   actions,
53 |   mutations
54 | }
55 | 


--------------------------------------------------------------------------------
/src/components/projects/ServiceField.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="form-group">
 3 |     <label :for="fieldName()" class="col-sm-2 control-label" v-if="field.type!=='hidden'">{{ field.title || field.name }}</label>
 4 |     <div class="col-sm-10">
 5 |       <input type="text" class="form-control" :placeholder="field.placeholder" :name="fieldName()" v-model="field.value" v-if="field.type==='text'"/>
 6 |       <input type="hidden" class="form-control" :name="fieldName()" v-model="field.value" v-if="field.type==='hidden'"/>
 7 |       <input type="password" class="form-control" :placeholder="field.placeholder" :name="fieldName()" v-model="field.value" v-if="field.type==='password'"/>
 8 |       <textarea class="form-control" rows="5" :placeholder="field.placeholder" :name="fieldName()" v-model="field.value" v-if="field.type==='textarea'"/>
 9 |       <input type="checkbox" :name="fieldName()" v-if="field.type==='checkbox'" v-model="field.value"/>
10 |     </div>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 |   export default {
16 |     props: ['field'],
17 | 
18 |     methods: {
19 |       fieldName () {
20 |         return `service[${this.field.name}]`
21 |       }
22 |     }
23 |   }
24 | </script>
25 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | // https://cli.vuejs.org/zh/config/
 2 | const webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   lintOnSave: false,
 6 |   runtimeCompiler: true,
 7 |   configureWebpack: {
 8 |     resolve: {
 9 |       alias: {
10 |         // node_modules/@vue/cli-service/lib/config/base.js 中已经配好的 @ 路径
11 |         'assets': '@/assets',
12 |         'components': '@/components',
13 |         'views': '@/views',
14 |         'jquery': 'jquery/dist/jquery.slim.js'
15 |       }
16 |     },
17 |     devServer: {
18 |       proxy: {
19 |         '/api/v1': {
20 |           changeOrigin: true,
21 |           secure: false,
22 |           // target: 'http://localhost:3000'
23 |           target: 'https://www.easy-mock.com/mock/5b18ccb77dddfa3903693dba'
24 |         },
25 |         '/sidekiq': {
26 |           changeOrigin: true,
27 |           secure: false,
28 |           target: 'http://localhost:3000'
29 |         }
30 |       }
31 |     },
32 |     plugins: [
33 |       new webpack.ProvidePlugin({
34 |         '$': 'jquery',
35 |         jQuery: 'jquery',
36 |         Popper: ['popper.js', 'default'],
37 |         'Util': 'exports-loader?Util!bootstrap/js/dist/util'
38 |       })
39 |     ]
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/components/projects/SideBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <aside class="main-sidebar">
 3 |     <section class="sidebar">
 4 |       <user-panel></user-panel>
 5 |       <side-bar-item :navsData="navs"></side-bar-item>
 6 |     </section>
 7 |   </aside>
 8 | </template>
 9 | 
10 | <script>
11 |   import UserPanel from '@/components/global/UserPanel'
12 |   import SideBarItem from '@/components/global/SideBarItem'
13 | 
14 |   export default {
15 |     components: {UserPanel, SideBarItem},
16 |     data () {
17 |       return {
18 |         navs: [
19 |           {
20 |             name: 'Project',
21 |             to: 'home',
22 |             paths: ['home'],
23 |             icon: 'fa-home'
24 |           }, {
25 |             name: 'Environments',
26 |             to: 'environments',
27 |             paths: ['environments'],
28 |             icon: 'fa-truck'
29 |           }, {
30 |             name: 'Builds',
31 |             to: 'builds',
32 |             paths: ['builds'],
33 |             icon: 'fa-legal'
34 |           }, {
35 |             name: 'Settings',
36 |             to: 'setting',
37 |             paths: ['setting'],
38 |             icon: 'fa-wrench'
39 |           }
40 |         ]
41 |       }
42 |     }
43 |   }
44 | </script>
45 | 


--------------------------------------------------------------------------------
/src/components/global/ContentHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="content-header">
 3 |     <h1>
 4 |       {{ contentHeader.title }}
 5 |       <small>
 6 |         {{ contentHeader.subTitle }}
 7 |       </small>
 8 |     </h1>
 9 |   </section>
10 | </template>
11 | 
12 | <script>
13 |   import { mapGetters } from 'vuex'
14 | 
15 |   export default {
16 |     data () {
17 |       return {
18 |         contentHeader: {}
19 |       }
20 |     },
21 | 
22 |     computed: {
23 |       ...mapGetters(['currentProject'])
24 |     },
25 | 
26 |     created () {
27 |       this.buildContentHeader(this.$route)
28 |     },
29 | 
30 |     watch: {
31 |       $route (to, from) {
32 |         this.buildContentHeader(to)
33 |       },
34 | 
35 |       currentProject () {
36 |         this.buildContentHeader()
37 |       }
38 |     },
39 | 
40 |     methods: {
41 |       buildContentHeader (route) {
42 |         if (route && route.meta.contentHeader) {
43 |           this.contentHeader = route.meta.contentHeader
44 |         } else {
45 |           if (this.currentProject) {
46 |             this.contentHeader = {title: this.currentProject.title, subTitle: this.currentProject.platform}
47 |           }
48 |         }
49 |       }
50 |     }
51 |   }
52 | </script>
53 | 


--------------------------------------------------------------------------------
/src/components/dashboard/Aggregate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="row">
 3 |     <div class="col-lg-3 col-xs-6" v-for="(aggregate,index) in aggregates" :key="index">
 4 |       <div class="small-box" :class="getBg(index)">
 5 |         <div class="inner">
 6 |           <h3>{{ aggregate.value }}</h3>
 7 |           <p>{{ aggregate.name }}</p>
 8 |         </div>
 9 |         <div class="icon">
10 |           <i class="fa" :class="getIcon(index)"></i>
11 |         </div>
12 |         <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
13 |       </div>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import NetWorking from '@/utils/networking'
20 | import * as API from '@/constants/api'
21 | 
22 | export default {
23 |   data() {
24 |     return {
25 |       aggregates: []
26 |     };
27 |   },
28 | 
29 |   created() {
30 |     this.fetchData()
31 |   },
32 | 
33 |   methods: {
34 |     fetchData() {
35 |       NetWorking.doGet(API.dashboard).then(
36 |         response => {
37 |           this.aggregates = response.data.list
38 |         },
39 |         () => { }
40 |       )
41 |     },
42 | 
43 |     getBg(index) {
44 |       return ['bg-aqua', 'bg-yellow', 'bg-green', 'bg-red'][index];
45 |     },
46 | 
47 |     getIcon(index) {
48 |       return ['fa-legal', 'fa-bar-chart', 'fa-cube', 'fa-user'][index];
49 |     }
50 |   }
51 | };
52 | </script>
53 | 


--------------------------------------------------------------------------------
/src/components/global/Alert.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="margin no-print" v-show="showAlert">
 3 |     <div class="alert alert-dismissible" :class="alertClass()">
 4 |       <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
 5 |       <h4><i class="icon fa" :class="iconClass()"></i> {{ type }} </h4>
 6 |       {{ message }}
 7 |     </div>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | 
13 |   import Vue from 'vue'
14 |   import { mapGetters } from 'vuex'
15 | 
16 |   export default {
17 |     computed: {
18 |       ...mapGetters({
19 |         alert: 'currentAlert'
20 |       })
21 |     },
22 | 
23 |     data () {
24 |       return {
25 |         showAlert: false,
26 |         message: '',
27 |         type: 'info'
28 |       }
29 |     },
30 | 
31 |     watch: {
32 |       alert (alert) {
33 |         if (alert !== null) {
34 |           this.showAlert = true
35 |           this.type = alert.type
36 |           this.message = alert.message
37 |         } else {
38 |           this.showAlert = false
39 |         }
40 |       },
41 | 
42 |       $route () {
43 |         this.$store.dispatch('deleteAlert')
44 |       }
45 |     },
46 | 
47 |     methods: {
48 | 
49 |       alertClass () {
50 |         return 'alert-' + this.type
51 |       },
52 | 
53 |       iconClass () {
54 |         return 'fa-' + this.type
55 |       }
56 | 
57 |     }
58 |   }
59 | </script>
60 | 


--------------------------------------------------------------------------------
/src/views/members/List.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="box">
 3 |     <div class="box-header with-border">
 4 |       <h3 class="box-title">Member List</h3>
 5 |     </div>
 6 |     <div class="box-body table-responsive no-padding">
 7 |       <table-box :url="url">
 8 |         <tr slot="ths">
 9 |           <th>ID</th>
10 |           <th>Icon</th>
11 |           <th>Name</th>
12 |           <th>Guard Projects</th>
13 |           <th>Join Time</th>
14 |         </tr>
15 |         <template slot="item" slot-scope="props">
16 |           <tr>
17 |             <td>
18 |               {{ props.item.id }}
19 |             </td>
20 |             <td>
21 |               <img class="avatar" :src="props.item.avatar_url">
22 |             </td>
23 |             <td>
24 |               {{ props.item.name }}
25 |             </td>
26 |             <td>
27 |               {{ props.item.guard_projects }}
28 |             </td>
29 |             <td>
30 |               {{ props.item.created_at }}
31 |             </td>
32 |           </tr>
33 |         </template>
34 |       </table-box>
35 |     </div>
36 |   </div>
37 | </template>
38 | 
39 | <script>
40 |   import NetWorking from '@/utils/networking'
41 |   import * as API from '@/constants/api'
42 |   import TableBox from '@/components/global/TableBox'
43 | 
44 |   export default {
45 |     components: {TableBox},
46 | 
47 |     data () {
48 |       return {
49 |         url: API.users
50 |       }
51 |     }
52 |   }
53 | </script>
54 | 
55 | 


--------------------------------------------------------------------------------
/src/components/global/SideBarItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul class="sidebar-menu" data-widget="tree">
 3 | 
 4 |     <li class="header" v-if="$route.path.includes('/projects')">
 5 |       <router-link :to="{ name: 'dashboard'}">
 6 |         Go to Dashboard
 7 |       </router-link>
 8 |     </li>
 9 |     <li class="header" v-else>
10 |       MAIN NAVIGATION
11 |     </li>
12 | 
13 |     <li class="treeview" :class="navCls(nav)" v-for="nav in navs">
14 |       <router-link :to="{name: nav.to}">
15 |         <i class="fa" :class="nav.icon"></i>
16 |         <span>{{ nav.name }}</span>
17 |         <span class="pull-right-container">
18 |           <span class="label label-primary pull-right">{{ nav.label }}</span>
19 |         </span>
20 |       </router-link>
21 |     </li>
22 |   </ul>
23 | </template>
24 | 
25 | <script>
26 |   export default {
27 |     props: ['navsData'],
28 | 
29 |     data () {
30 |       return {
31 |         navs: this.navsData
32 |       }
33 |     },
34 | 
35 |     watch: {
36 |       navsData (value) {
37 |         console.log(value)
38 |         this.navs = value
39 |       }
40 |     },
41 | 
42 |     methods: {
43 | 
44 |       navCls (nav) {
45 |         let active = false
46 |         for (let path of nav.paths) {
47 |           if (this.$route.path.includes(path)) {
48 |             active = true
49 |           }
50 |         }
51 |         if (active) {
52 |           return 'active'
53 |         } else {
54 |           return ''
55 |         }
56 |       }
57 |     }
58 |   }
59 | </script>
60 | 


--------------------------------------------------------------------------------
/mock/server.js:
--------------------------------------------------------------------------------
 1 | const jsonServer = require('json-server')
 2 | const server = jsonServer.create()
 3 | 
 4 | // Support middleware
 5 | const middleware = jsonServer.defaults()
 6 | server.use(middleware)
 7 | 
 8 | // Add this before server.use(router)
 9 | server.use(jsonServer.rewriter({
10 |   '/projects/:id/environments/:env_id/configs': '/environments/:env_id/configs',
11 |   '/projects/:id/environments/:env_id/latest_git_log': '/environments/:env_id/latest_git_log'
12 | }))
13 | 
14 | // 支持加载多个db文件
15 | const _ = require('underscore')
16 | const path = require('path')
17 | const fs = require('fs')
18 | const mockDir = path.join(__dirname, 'data')
19 | const base = {}
20 | const files = fs.readdirSync(mockDir)
21 | files.forEach((file) => {
22 |   _.extend(base, require(path.resolve(mockDir, file)))
23 | })
24 | const router = jsonServer.router(base)
25 | 
26 | // 处理登录逻辑
27 | server.post('/account/login', (req, res) => {
28 |   let db = router.db // lowdb instance
29 |   let data = db.get('login').value()
30 |   res.jsonp({
31 |     data: data,
32 |     status: 0,
33 |     message: ''
34 |   })
35 | })
36 | // 处理登出逻辑
37 | server.post('/account/logout', (req, res) => {
38 |   let db = router.db // lowdb instance
39 |   let data = db.get('logout').value()
40 |   res.jsonp({
41 |     data: data,
42 |     status: 0,
43 |     message: ''
44 |   })
45 | })
46 | 
47 | server.use(router)
48 | 
49 | // 返回自定义格式数据
50 | router.render = (req, res) => {
51 |   res.jsonp({
52 |     data: res.locals.data,
53 |     status: 0,
54 |     message: ''
55 |   })
56 | }
57 | 
58 | server.listen(9090, () => {
59 |   console.log('JSON Server is running')
60 | })
61 | 


--------------------------------------------------------------------------------
/src/views/admin/fastlane_templates/New.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="box box-primary">
 3 |     <loading-overlay v-show="showOverlay"></loading-overlay>
 4 |     <div class="box-header with-border">
 5 |       <h3 class="box-title">New Fastlane Template</h3>
 6 |     </div>
 7 |     <form @submit.prevent="doCreate" accept-charset="UTF-8" method="post">
 8 |       <template-form :template.sync="template"></template-form>
 9 |       <div class="box-footer">
10 |         <input class="btn btn-primary" type="submit" value="Create">
11 |       </div>
12 |     </form>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 |   import NetWorking from '@/utils/networking'
18 |   import * as API from '@/constants/api'
19 |   import LoadingOverlay from '@/components/global/LoadingOverlay'
20 |   import TemplateForm from '@/components/admin/TemplateForm'
21 | 
22 |   export default {
23 |     components: {LoadingOverlay, TemplateForm},
24 | 
25 |     data () {
26 |       return {
27 |         showOverlay: false,
28 |         template: {}
29 |       }
30 |     },
31 | 
32 |     methods: {
33 | 
34 |       doCreate () {
35 |         this.showLoading()
36 |         NetWorking
37 |           .doPost(API.fastlaneTemplates, null, this.template)
38 |           .then(() => {
39 |             this.$router.replace({name: 'fastlane_templates'})
40 |             this.hideLoading()
41 |           }, () => {
42 |             this.hideLoading()
43 |           })
44 |       },
45 | 
46 |       showLoading () {
47 |         this.showOverlay = true
48 |       },
49 | 
50 |       hideLoading () {
51 |         this.showOverlay = false
52 |       }
53 |     }
54 |   }
55 | </script>
56 | 
57 | 


--------------------------------------------------------------------------------
/src/components/admin/TemplateForm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="box-body">
 3 |     <div class="form-group">
 4 |       <label for="platform">Platform</label>
 5 |       <select class="form-control" id="platform" name="template[platform]" v-model="template.platform">
 6 |         <option v-for="option in options" :key="option.name" :value="option.value">{{ option.name }}</option>
 7 |       </select>
 8 |     </div>
 9 |     <div class="form-group">
10 |       <label for="name">Name</label>
11 |       <input class="form-control" id="name" name="template[name]" v-model="template.name"/>
12 |     </div>
13 |     <div class="form-group">
14 |       <label for="command">Fastlane Command</label>
15 |       <div class="input-group">
16 |         <span class="input-group-addon">fastlane</span>
17 |         <input class="form-control" id="command" name="template[command]" v-model="template.command"
18 |                placeholder="eg: do_publish_beta"/>
19 |       </div>
20 |     </div>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 |   import Enum from '@/constants/enum'
26 | 
27 |   export default {
28 |     props: ['template'],
29 | 
30 |     data() {
31 |       return {
32 |         options: []
33 |       };
34 |     },
35 | 
36 |     created() {
37 |       this.setOptions()
38 |     },
39 | 
40 |     methods: {
41 |       setOptions() {
42 |         for (let platform in Enum.Platforms) {
43 |           if (Enum.Platforms.hasOwnProperty(platform)) {
44 |             this.options.push({
45 |               name: platform,
46 |               value: Enum.Platforms[platform]
47 |             });
48 |           }
49 |         }
50 |       }
51 |     }
52 |   };
53 | </script>
54 | 
55 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "falcon",
 3 |   "version": "1.0.1",
 4 |   "description": "A jaguar front end application",
 5 |   "author": "Thierry <thierry.xing@gmail.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "serve": "vue-cli-service serve",
 9 |     "build": "vue-cli-service build",
10 |     "lint": "vue-cli-service lint",
11 |     "mockdev": "npm run mock & npm run serve"
12 |   },
13 |   "dependencies": {
14 |     "admin-lte": "^2.4.9",
15 |     "axios": "^0.18.0",
16 |     "echarts": "^3.7.2",
17 |     "font-awesome": "^4.7.0",
18 |     "vue": "^2.5.17",
19 |     "vue-highlightjs": "^1.3.1",
20 |     "vue-resource": "^1.3.4",
21 |     "vue-router": "^3.0.1",
22 |     "vuex": "^3.0.1"
23 |   },
24 |   "devDependencies": {
25 |     "@vue/cli-plugin-babel": "^3.4.1",
26 |     "@vue/cli-plugin-eslint": "^3.0.1",
27 |     "@vue/cli-service": "^3.0.1",
28 |     "@vue/eslint-config-airbnb": "^3.0.1",
29 |     "babel-core": "^7.0.0-bridge.0",
30 |     "babel-eslint": "^10.0.1",
31 |     "babel-jest": "^23.4.2",
32 |     "eslint": "^5.7.0",
33 |     "json-server": "^0.14.0",
34 |     "node-sass": "^4.9.3",
35 |     "sass-loader": "^7.1.0",
36 |     "vue-template-compiler": "^2.5.17"
37 |   },
38 |   "eslintConfig": {
39 |     "root": true,
40 |     "env": {
41 |       "node": true
42 |     },
43 |     "extends": [
44 |       "plugin:vue/essential",
45 |       "@vue/airbnb"
46 |     ],
47 |     "rules": {},
48 |     "parserOptions": {
49 |       "parser": "babel-eslint"
50 |     }
51 |   },
52 |   "postcss": {
53 |     "plugins": {
54 |       "autoprefixer": {}
55 |     }
56 |   },
57 |   "browserslist": [
58 |     "> 1%",
59 |     "last 2 versions",
60 |     "not ie <= 9"
61 |   ]
62 | }
63 | 


--------------------------------------------------------------------------------
/src/components/projects/Dependency.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="nav-tabs-custom">
 3 |     <ul class="nav nav-tabs">
 4 |       <li class="active">
 5 |         <a data-toggle="tab" href="javascript:">
 6 |           Dependencies
 7 |         </a>
 8 |       </li>
 9 |     </ul>
10 |     <div class="tab-pane">
11 |       <TableBox :url="url" :pathParams="pathParams">
12 |         <tr slot="ths">
13 |           <th>Lib</th>
14 |           <th>Current Version</th>
15 |           <th>Latest Version</th>
16 |         </tr>
17 |         <template slot="item" slot-scope="props">
18 |           <tr>
19 |             <td>
20 |               {{ props.item.name }}
21 |             </td>
22 |             <td>
23 |               {{ props.item.current_version }}
24 |             </td>
25 |             <td>
26 |               <div :class="versionClass(props.item.need_update)">
27 |                 {{ props.item.latest_version }}
28 |               </div>
29 |             </td>
30 |           </tr>
31 |         </template>
32 |       </TableBox>
33 |       <div class="tab-pane active" id="properties">
34 |       </div>
35 |     </div>
36 |   </div>
37 | </template>
38 | 
39 | <script>
40 |   import * as API from '@/constants/api'
41 |   import TableBox from '@/components/global/TableBox'
42 | 
43 |   export default {
44 |     components: {TableBox},
45 | 
46 |     data () {
47 |       return {
48 |         url: API.projectDependencies,
49 |         pathParams: {id: this.$route.params.project_id}
50 |       }
51 |     },
52 | 
53 |     methods: {
54 |       versionClass (needUpdate) {
55 |         if (needUpdate) {
56 |           return 'text-warning'
57 |         } else {
58 |           return ''
59 |         }
60 |       }
61 |     }
62 |   }
63 | </script>
64 | 


--------------------------------------------------------------------------------
/src/views/projects/New.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="box box-primary">
 3 |     <loading-overlay v-show="showOverlay"></loading-overlay>
 4 |     <div class="box-header with-border">
 5 |       <h3 class="box-title">New Project</h3>
 6 |     </div>
 7 |     <form @submit.prevent="doCreate" accept-charset="UTF-8" method="post">
 8 |       <project-form :project.sync="project"></project-form>
 9 |       <div class="box-footer">
10 |         <input class="btn btn-primary" type="submit" value="Submit">
11 |       </div>
12 |     </form>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 |   import NetWorking from '@/utils/networking'
18 |   import ProjectForm from '@/components/projects/Form'
19 |   import * as API from '@/constants/api'
20 |   import LoadingOverlay from '@/components/global/LoadingOverlay'
21 | 
22 |   export default {
23 |     components: {ProjectForm, LoadingOverlay},
24 | 
25 |     data () {
26 |       return {
27 |         showOverlay: false,
28 |         project: {
29 |           type: 'App',
30 |           guardian: {}
31 |         }
32 |       }
33 |     },
34 | 
35 |     methods: {
36 | 
37 |       doCreate () {
38 |         this.showLoading()
39 |         NetWorking
40 |           .doPost(API.projects, null, {project: this.project})
41 |           .then(response => {
42 |             this.project = response.data
43 |             this.$router.push({name: 'environments', params: {'project_id': this.project.id}})
44 |             this.hideLoading()
45 |           }, () => {
46 |             this.hideLoading()
47 |           })
48 |       },
49 | 
50 |       showLoading () {
51 |         this.showOverlay = true
52 |       },
53 | 
54 |       hideLoading () {
55 |         this.showOverlay = false
56 |       }
57 | 
58 |     }
59 |   }
60 | </script>
61 | 


--------------------------------------------------------------------------------
/mock/data/environments.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "environments": {
 3 |     "total": 100,
 4 |     "list": [
 5 |       {
 6 |         "id": 1,
 7 |         "git_branch": "test",
 8 |         "scheme": "Gengmei-AppStore",
 9 |         "projectId": 4,
10 |         "created_at": "2017-04-06T18:14:42.541+08:00",
11 |         "updated_at": "2017-05-25T06:27:26.469+08:00",
12 |         "build_template": 0,
13 |         "is_default": null,
14 |         "build_path": null,
15 |         "name": "Prod",
16 |         "clone_status": 0
17 |       },
18 |       {
19 |         "id": 2,
20 |         "git_branch": "test",
21 |         "scheme": "Gengmei",
22 |         "projectId": 4,
23 |         "created_at": "2017-04-06T18:14:42.548+08:00",
24 |         "updated_at": "2017-05-22T07:26:58.139+08:00",
25 |         "build_template": 1,
26 |         "is_default": null,
27 |         "build_path": null,
28 |         "name": "Test",
29 |         "clone_status": 0
30 |       },
31 |       {
32 |         "id": 3,
33 |         "git_branch": "test",
34 |         "scheme": "Gengmei",
35 |         "projectId": 4,
36 |         "created_at": "2017-04-06T18:14:42.552+08:00",
37 |         "updated_at": "2017-05-22T07:26:58.143+08:00",
38 |         "build_template": 2,
39 |         "is_default": null,
40 |         "build_path": null,
41 |         "name": "Beta",
42 |         "clone_status": 0
43 |       },
44 |       {
45 |         "id": 4,
46 |         "git_branch": "test",
47 |         "scheme": null,
48 |         "projectId": 5,
49 |         "created_at": "2017-04-06T18:14:42.552+08:00",
50 |         "updated_at": "2017-05-22T07:26:58.143+08:00",
51 |         "build_template": 3,
52 |         "is_default": null,
53 |         "build_path": null,
54 |         "name": "Lib",
55 |         "clone_status": 0
56 |       }
57 |     ]
58 |   },
59 |   "latest_git_log": {
60 |     "environmentId": 4,
61 |     "note": "Bump version to 0.2.1"
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/src/views/projects/environments/New.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="box box-primary">
 3 |     <loading-overlay v-show="showOverlay"></loading-overlay>
 4 |     <div class="box-header with-border">
 5 |       <h3 class="box-title">New Environment</h3>
 6 |     </div>
 7 |     <form @submit.prevent="doCreate" accept-charset="UTF-8" method="post">
 8 |       <env-form :environment.sync="environment"></env-form>
 9 |       <div class="box-footer">
10 |         <input class="btn btn-primary" type="submit" value="Create">
11 |       </div>
12 |     </form>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 |   import NetWorking from '@/utils/networking'
18 |   import * as API from '@/constants/api'
19 |   import { mapGetters } from 'vuex'
20 |   import LoadingOverlay from '@/components/global/LoadingOverlay'
21 |   import EnvForm from '@/components/projects/EnvForm'
22 | 
23 |   export default {
24 |     components: {LoadingOverlay, EnvForm},
25 | 
26 |     computed: {
27 |       ...mapGetters({
28 |         project: 'currentProject'
29 |       })
30 |     },
31 | 
32 |     data () {
33 |       return {
34 |         showOverlay: false,
35 |         environment: {
36 |           fastlane_template: {}
37 |         }
38 |       }
39 |     },
40 | 
41 |     methods: {
42 | 
43 |       doCreate () {
44 |         this.showLoading()
45 |         NetWorking
46 |           .doPost(API.environments, {id: this.project.id}, {environment: this.environment})
47 |           .then(response => {
48 |             this.environment = response.data
49 |             this.$router.push({name: 'git_clone', params: {env_id: this.environment.id}})
50 |             this.hideLoading()
51 |           }, () => {
52 |             this.hideLoading()
53 |           })
54 |       },
55 | 
56 |       showLoading () {
57 |         this.showOverlay = true
58 |       },
59 | 
60 |       hideLoading () {
61 |         this.showOverlay = false
62 |       }
63 |     }
64 |   }
65 | </script>
66 | 
67 | 


--------------------------------------------------------------------------------
/src/views/activity/List.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="box">
 3 |     <div class="box-header with-border">
 4 |       <h3 class="box-title">Activity</h3>
 5 |     </div>
 6 |     <table-box :url="url">
 7 |       <tr slot="ths">
 8 |         <th>ID</th>
 9 |         <th>Project</th>
10 |         <th>Version</th>
11 |         <th>Operator</th>
12 |         <th>Environment</th>
13 |         <th>Updated Time</th>
14 |         <th style="width:300px">Action</th>
15 |       </tr>
16 |       <template slot="item" slot-scope="props">
17 |         <tr>
18 |           <td>
19 |             {{ props.item.id }}
20 |           </td>
21 |           <td>
22 |             {{ props.item.project.name }}
23 |           </td>
24 |           <td>
25 |             <div>
26 |               {{ props.item.version }}
27 |             </div>
28 |             <div>
29 |               {{ props.item.number }}
30 |             </div>
31 |           </td>
32 |           <td>
33 |             {{ props.item.operator.name }}
34 |           </td>
35 |           <td>
36 |             {{ props.item.environment.name }}
37 |           </td>
38 |           <td>
39 |             {{ props.item.updated_at }}
40 |           </td>
41 |           <td>
42 |             <div class="btn-group">
43 |               <router-link
44 |                 :to="{ name: 'build_detail', params: { project_id: props.item.project.id, build_id:props.item.id }}"
45 |                 class="btn btn-block btn-info">
46 |                 Detail
47 |               </router-link>
48 |             </div>
49 |           </td>
50 |         </tr>
51 |       </template>
52 |     </table-box>
53 |   </div>
54 | </template>
55 | 
56 | <script>
57 |   import * as API from '@/constants/api'
58 |   import NetWorking from '@/utils/networking'
59 |   import TableBox from '@/components/global/TableBox'
60 | 
61 |   export default {
62 |     components: {TableBox},
63 | 
64 |     data () {
65 |       return {
66 |         url: API.activity
67 |       }
68 |     }
69 | 
70 |   }
71 | </script>
72 | 


--------------------------------------------------------------------------------
/src/components/global/SideBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <aside class="main-sidebar">
 3 |     <section class="sidebar" style="height: 468px; overflow: hidden; width: auto;">
 4 |       <UserPanel></UserPanel>
 5 |       <SideBarItem :navsData="navs"></SideBarItem>
 6 |     </section>
 7 |   </aside>
 8 | </template>
 9 | 
10 | <script>
11 |   import UserPanel from '@/components/global/UserPanel'
12 |   import SideBarItem from '@/components/global/SideBarItem'
13 |   import NetWorking from '@/utils/networking'
14 |   import * as API from '@/constants/api'
15 | 
16 |   export default {
17 |     components: {UserPanel, SideBarItem},
18 | 
19 |     data () {
20 |       return {
21 |         navs: [
22 |           {
23 |             name: 'Dashboard',
24 |             to: 'dashboard',
25 |             paths: ['dashboard'],
26 |             icon: 'fa-dashboard'
27 |           },
28 |           {
29 |             name: 'Projects',
30 |             to: 'project_list',
31 |             paths: ['project_list', 'project_new'],
32 |             icon: 'fa-cube'
33 |           },
34 |           {
35 |             name: 'Activity',
36 |             to: 'activity',
37 |             paths: ['activity'],
38 |             icon: 'fa-rocket',
39 |             label: ''
40 |           },
41 |           {
42 |             name: 'Background Jobs',
43 |             to: 'jobs',
44 |             paths: ['jobs'],
45 |             icon: 'fa-send',
46 |             label: ''
47 |           },
48 |           {
49 |             name: 'Members',
50 |             to: 'members',
51 |             paths: ['members'],
52 |             icon: 'fa-user'
53 |           }
54 |         ]
55 |       }
56 |     },
57 | 
58 |     created () {
59 |       this.fetchData()
60 |     },
61 | 
62 |     methods: {
63 |       fetchData () {
64 |         NetWorking
65 |           .doGet(API.activity)
66 |           .then(response => {
67 |             this.navs[2].label = response.data.total === 0 ? '' : response.data.total
68 |           })
69 |       }
70 |     }
71 |   }
72 | </script>
73 | 


--------------------------------------------------------------------------------
/src/views/admin/fastlane_templates/Edit.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="box box-primary">
 3 |     <loading-overlay v-show="showOverlay"></loading-overlay>
 4 |     <div class="box-header with-border">
 5 |       <h3 class="box-title">Edit Fastlane Template</h3>
 6 |     </div>
 7 |     <form @submit.prevent="doUpdate" accept-charset="UTF-8" method="post">
 8 |       <template-form :template.sync="template"></template-form>
 9 |       <div class="box-footer">
10 |         <input class="btn btn-primary" type="submit" value="Update">
11 |       </div>
12 |     </form>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 |   import NetWorking from '@/utils/networking'
18 |   import * as API from '@/constants/api'
19 |   import LoadingOverlay from '@/components/global/LoadingOverlay'
20 |   import TemplateForm from '@/components/admin/TemplateForm'
21 | 
22 |   export default {
23 |     components: {LoadingOverlay, TemplateForm},
24 | 
25 |     data () {
26 |       return {
27 |         id: this.$route.params.id,
28 |         showOverlay: false,
29 |         template: {}
30 |       }
31 |     },
32 | 
33 |     created () {
34 |       this.fetchData()
35 |     },
36 | 
37 |     methods: {
38 | 
39 |       fetchData () {
40 |         this.showLoading()
41 |         NetWorking
42 |           .doGet(API.fastlaneTemplate, {id: this.id})
43 |           .then(response => {
44 |             this.template = response.data
45 |             this.hideLoading()
46 |           }, () => {
47 |             this.hideLoading()
48 |           })
49 |       },
50 | 
51 |       doUpdate () {
52 |         this.showLoading()
53 |         NetWorking
54 |           .doPut(API.fastlaneTemplate, {id: this.id}, this.template)
55 |           .then(() => {
56 |             this.$router.replace({name: 'fastlane_templates'})
57 |             this.hideLoading()
58 |           }, () => {
59 |             this.hideLoading()
60 |           })
61 |       },
62 | 
63 |       showLoading () {
64 |         this.showOverlay = true
65 |       },
66 | 
67 |       hideLoading () {
68 |         this.showOverlay = false
69 |       }
70 |     }
71 |   }
72 | </script>
73 | 
74 | 


--------------------------------------------------------------------------------
/src/views/projects/environments/Clone.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="box box-primary">
 3 |     <loading-overlay v-show="showOverlay"></loading-overlay>
 4 |     <div class="box-header with-border">
 5 |       <h3 class="box-title">Clone Environment</h3>
 6 |     </div>
 7 |     <form @submit.prevent="doClone" accept-charset="UTF-8" method="post">
 8 |       <env-form :environment.sync="environment"></env-form>
 9 |       <div class="box-footer">
10 |         <input class="btn btn-primary" type="submit" value="Clone">
11 |       </div>
12 |     </form>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 |   import NetWorking from '@/utils/networking'
18 |   import * as API from '@/constants/api'
19 |   import { mapGetters } from 'vuex'
20 |   import LoadingOverlay from '@/components/global/LoadingOverlay'
21 |   import EnvForm from '@/components/projects/EnvForm'
22 | 
23 |   export default {
24 |     components: {LoadingOverlay, EnvForm},
25 | 
26 |     data () {
27 |       return {
28 |         project_id: null,
29 |         env_id: null,
30 |         showOverlay: false,
31 |         environment: {}
32 |       }
33 |     },
34 | 
35 |     created () {
36 |       this.project_id = this.$route.params.project_id
37 |       this.env_id = this.$route.params.env_id
38 |       this.fetchData()
39 |     },
40 | 
41 |     methods: {
42 |       fetchData () {
43 |         this.showLoading()
44 |         NetWorking
45 |           .doGet(API.environment, {id: this.project_id, env_id: this.env_id})
46 |           .then(response => {
47 |             this.environment = response.data
48 |             this.hideLoading()
49 |           }, () => {
50 |             this.hideLoading()
51 |           })
52 |       },
53 | 
54 |       doClone () {
55 |         this.showLoading()
56 |         NetWorking
57 |           .doPost(API.environmentClone, {id: this.project_id, env_id: this.env_id}, {environment: this.environment})
58 |           .then(() => {
59 |             this.$router.replace({name: 'environments', params: {project_id: this.project_id}})
60 |             this.hideLoading()
61 |           }, () => {
62 |             this.hideLoading()
63 |           })
64 |       },
65 | 
66 |       showLoading () {
67 |         this.showOverlay = true
68 |       },
69 | 
70 |       hideLoading () {
71 |         this.showOverlay = false
72 |       }
73 |     }
74 |   }
75 | </script>
76 | 
77 | 


--------------------------------------------------------------------------------
/src/views/projects/Layout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="skin-blue sidebar-mini wysihtml5-supported">
 3 |     <nav-bar></nav-bar>
 4 |     <side-bar></side-bar>
 5 |     <div class="content-wrapper" style="min-height: 916px;">
 6 |       <div class="box box-solid" style="background-color: #ecf0f5;box-shadow:none">
 7 |         <LoadingOverlay v-show="showOverlay"></LoadingOverlay>
 8 |         <content-header>
 9 |           <span slot="sub-title">{{ currentProject.platform }}</span>
10 |         </content-header>
11 |         <alert></alert>
12 |         <section class="content">
13 |           <router-view></router-view>
14 |         </section>
15 |       </div>
16 |     </div>
17 |     <content-footer></content-footer>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 |   import NavBar from '@/components/global/NavBar'
23 |   import SideBar from '@/components/projects/SideBar'
24 |   import ContentHeader from '@/components/global/ContentHeader'
25 |   import ContentFooter from '@/components/global/ContentFooter'
26 |   import LoadingOverlay from '@/components/global/LoadingOverlay'
27 |   import Alert from '@/components/global/Alert'
28 |   import NetWorking from '@/utils/networking'
29 |   import * as API from '@/constants/api'
30 |   import { mapGetters } from 'vuex'
31 | 
32 |   export default {
33 |     components: {SideBar, NavBar, ContentHeader, ContentFooter, Alert, LoadingOverlay},
34 | 
35 |     computed: {
36 |       ...mapGetters(['currentProject'])
37 |     },
38 | 
39 |     data () {
40 |       return {
41 |         showOverlay: false
42 |       }
43 |     },
44 | 
45 |     created () {
46 |       if (this.currentProject.id === null || this.currentProject.id !== this.$route.params.project_id) {
47 |         this.fetchData()
48 |       }
49 |     },
50 | 
51 |     methods: {
52 |       fetchData () {
53 |         this.showLoading()
54 |         NetWorking
55 |           .doGet(API.project, {id: this.$route.params.project_id})
56 |           .then(response => {
57 |             this.$store.dispatch('setProject', response.data)
58 |             this.hideLoading()
59 |           }, () => {
60 |             this.hideLoading()
61 |           })
62 |       },
63 | 
64 |       showLoading () {
65 |         this.showOverlay = true
66 |       },
67 | 
68 |       hideLoading () {
69 |         this.showOverlay = false
70 |       }
71 |     }
72 |   }
73 | </script>
74 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view></router-view>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   import NetWorking from '@/utils/networking'
 9 | 
10 |   export default {
11 |     created() {
12 |       NetWorking.instance.interceptors.response.use((response) => {
13 |         this.handleResponse(response)
14 |         return response
15 |       }, (error => {
16 |         this.handleError(error.response)
17 |       }))
18 |     },
19 | 
20 |     methods: {
21 |       handleResponse(response) {
22 |         if (response.data.status !== 0) {
23 |           this.handleApiError(response)
24 |         }
25 |       },
26 | 
27 |       handleError(response) {
28 |         switch (response.status) {
29 |           case 401:
30 |             this.handleUnauthorized(response)
31 |             break
32 |           case 403:
33 |             this.handleForbidden(response)
34 |             break
35 |           case 404:
36 |             this.handleNotFound(response)
37 |             break
38 |           default:
39 |             this.handleServerError(response)
40 |             break
41 |         }
42 |       },
43 | 
44 |       /**
45 |        * 处理服务器Http请求异常
46 |        * @param response
47 |        */
48 |       handleServerError(response) {
49 |         this._showAlert(response.statusText)
50 |       },
51 | 
52 |       /**
53 |        * 处理服务器Http 401未登录异常
54 |        */
55 |       handleUnauthorized() {
56 |         this.$router.replace({ name: 'login' })
57 |       },
58 | 
59 |       /**
60 |        * 处理服务器Http 403无权限异常
61 |        * @param response
62 |        */
63 |       handleForbidden(response) {
64 |         this._showAlert(response.data.message)
65 |       },
66 | 
67 |       /**
68 |        * 处理服务器API业务异常
69 |        * @param response
70 |        */
71 |       handleApiError(response) {
72 |         this._showAlert(response.data.message)
73 |       },
74 | 
75 |       /**
76 |        * 处理 404 异常
77 |        * @param response
78 |        */
79 |       handleNotFound(response) {
80 |         this._showAlert(response.data.message)
81 |       },
82 | 
83 |       /**
84 |        * 向Store中分发需要弹出的消息
85 |        * @param message
86 |        * @private
87 |        */
88 |       _showAlert(message) {
89 |         this.$store.dispatch('deleteAlert')
90 |         this.$store.dispatch('createAlert', { type: 'warning', message: message })
91 |       }
92 |     }
93 |   }
94 | </script>
95 | 


--------------------------------------------------------------------------------
/src/constants/api.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Thierry on 2017/4/14.
 3 |  */
 4 | 
 5 | export const index = '/'
 6 | export const dashboard = '/dashboard'
 7 | export const weeklyData = '/dashboard/weekly_data'
 8 | export const activity = '/activity/executing_builds'
 9 | 
10 | export const projects = '/projects'
11 | export const project = '/projects/:id'
12 | export const projectBuilds = '/projects/:id/builds'
13 | export const projectDependencies = '/projects/:id/dependencies'
14 | export const projectSyncGitLab = '/projects/:id/sync_gitlab'
15 | 
16 | export const environments = '/projects/:id/environments'
17 | export const environment = '/projects/:id/environments/:env_id'
18 | export const environmentClone = '/projects/:id/environments/:env_id/clone'
19 | export const environmentTemplates = '/projects/:id/environments/templates'
20 | export const environmentConfigs = '/projects/:id/environments/:env_id/configs'
21 | export const environmentFastlane = '/projects/:id/environments/:env_id/fastlane'
22 | export const environmentUpdateFastfile = '/projects/:id/environments/:env_id/fastlane/update_fastfile'
23 | export const environmentGitClone = '/projects/:id/environments/:env_id/git/clone'
24 | export const environmentGitBranch = '/projects/:id/environments/:env_id/git/branches'
25 | export const environmentGitTag = '/projects/:id/environments/:env_id/git/tags'
26 | export const environmentChooseBranch = '/projects/:id/environments/:env_id/git/choose_branch'
27 | export const environmentChooseTag = '/projects/:id/environments/:env_id/git/choose_tag'
28 | export const environmentBuildInfo = '/projects/:id/environments/:env_id/build_info'
29 | export const environmentBuild = '/projects/:id/environments/:env_id/build'
30 | export const services = '/projects/:id/environments/:env_id/services'
31 | export const service = '/projects/:id/environments/:env_id/services/:service_id'
32 | 
33 | export const build = '/projects/:id/builds/:build_id'
34 | export const buildLog = '/projects/:id/builds/:build_id/log'
35 | export const buildDownload = '/projects/:id/builds/:build_id/download'
36 | export const buildMarkStatus = '/projects/:id/builds/:build_id/mark_status'
37 | 
38 | export const users = '/users'
39 | export const currentUser = '/users/:id'
40 | export const setPlatform = '/users/:id/set_platform/:platform'
41 | 
42 | export const login = '/account/login'
43 | export const logout = '/account/logout'
44 | 
45 | export const fastlaneTemplates = '/fastlane_templates'
46 | export const fastlaneTemplate = '/fastlane_templates/:id'
47 | 


--------------------------------------------------------------------------------
/src/views/account/Login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="login-box">
 3 |     <div class="login-logo">
 4 |       <b>
 5 |         Jaguar
 6 |       </b>
 7 |     </div>
 8 |     <div class="login-box-body box-body">
 9 |       <p class="login-box-msg">
10 |         Sign in with your Gitlab Account
11 |       </p>
12 |       <form action="" accept-charset="UTF-8" method="post" @submit.prevent="doLogin">
13 |         <div class="box-body">
14 |           <div class="form-group has-feedback">
15 |             <input type="email" name="email" id="email" class="form-control" placeholder="Email" v-model="user.email">
16 |             <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
17 |           </div>
18 | 
19 |           <div class="form-group has-feedback">
20 |             <input type="password" name="password" id="password" class="form-control" placeholder="Password"
21 |                    v-model="user.password">
22 |             <span class="glyphicon glyphicon-lock form-control-feedback"></span>
23 |           </div>
24 |           <div class="row">
25 |           </div>
26 |           <div class="row">
27 |             <div class="col-xs-8"></div>
28 |             <div class="col-xs-4">
29 |               <input class="btn btn-primary btn-block btn-flat" type="submit" value="Sign In"
30 |                      :disabled="buttonDisabled">
31 |             </div>
32 |           </div>
33 |         </div>
34 |       </form>
35 |     </div>
36 |   </div>
37 | </template>
38 | 
39 | <script>
40 |   import NetWorking from '@/utils/networking'
41 |   import * as API from '@/constants/api'
42 | 
43 |   export default {
44 | 
45 |     data() {
46 |       return {
47 |         user: {
48 |           email: '',
49 |           password: ''
50 |         },
51 |         buttonDisabled: false
52 |       }
53 |     },
54 | 
55 |     created() {
56 |     },
57 | 
58 |     methods: {
59 | 
60 |       doLogin: function () {
61 |         this.showLoading()
62 |         NetWorking.doPost(API.login, null, this.user).then(response => {
63 |           let user = response.data
64 |           this.$store.dispatch('createUser', user)
65 |           this.$store.dispatch('setPlatform', response.data.platform)
66 |           this.$router.push({name: 'dashboard'})
67 |           this.hideLoading()
68 |         }, (message) => {
69 |           window.alert(message)
70 |           this.hideLoading()
71 |         })
72 |       },
73 | 
74 |       showLoading() {
75 |         this.buttonDisabled = true
76 |       },
77 | 
78 |       hideLoading() {
79 |         this.buttonDisabled = false
80 |       }
81 | 
82 |     }
83 |   }
84 | </script>
85 | 
86 | <style>
87 |   body {
88 |     background-color: #d2d6de !important;
89 |   }
90 | </style>
91 | 


--------------------------------------------------------------------------------
/src/components/projects/Form.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="box-body">
 3 |     <div class="form-group">
 4 |       <label for="title">Title *</label>
 5 |       <input id="title" placeholder="" class="form-control" name="project[title]" v-model="project.title" :disabled="edit">
 6 |     </div>
 7 |     <div class="form-group">
 8 |       <label for="git_repo_url">Git Repo URL *</label>
 9 |       <input id="git_repo_url" placeholder="eg:git@git.gengmei.cc/repo/path" class="form-control" v-model="project.git_repo_url"
10 |              name="project[git_repo_url]">
11 |     </div>
12 |     <div class="form-group">
13 |       <label for="type">Type *</label>
14 |       <select id="type" class="form-control" name="project[type]" v-model="project.type">
15 |         <option v-for="option in options" :value="option.value" :key="option.value">{{ option.text }}</option>
16 |       </select>
17 |     </div>
18 |     <div class="form-group">
19 |       <label for="identifier">{{ identifierLabel() }}</label>
20 |       <input id="identifier" placeholder="eg: com.wanmeizhensuo.zhensuo or com.gengmei.framework:gmcache" class="form-control"
21 |              name="project[package_name]" v-model="project.identifier">
22 |     </div>
23 |     <div class="form-group">
24 |       <label for="guardian_id">Guardian</label>
25 |       <select name="project[guardian_id]" id="guardian_id" class="form-control" v-model="project.guardian.id">
26 |         <option v-for="user in users" :value="user.id">{{ user.name }}</option>
27 |       </select>
28 |     </div>
29 |   </div>
30 | </template>
31 | 
32 | <script>
33 |   import NetWorking from '@/utils/networking'
34 |   import * as API from '@/constants/api'
35 |   import { mapGetters } from 'vuex'
36 | 
37 |   export default {
38 |     props: ['project', 'edit'],
39 | 
40 |     computed: {
41 |       ...mapGetters({
42 |         platform: 'currentPlatform'
43 |       })
44 |     },
45 | 
46 |     data () {
47 |       return {
48 |         showIdentifier: true,
49 |         users: [],
50 |         options: [
51 |           {text: 'App', value: 'App'},
52 |           {text: 'Lib', value: 'Lib'}
53 |         ]
54 |       }
55 |     },
56 | 
57 |     created () {
58 |       this.fetchData()
59 |     },
60 | 
61 |     methods: {
62 |       fetchData () {
63 |         NetWorking.doGet(API.users).then(response => {
64 |           this.users = response.data.list
65 |         })
66 |       },
67 | 
68 |       isAndroidApp () {
69 |         return this.platform === 'android'
70 |       },
71 | 
72 |       identifierLabel () {
73 |         if (this.isAndroidApp()) {
74 |           return 'Package Name'
75 |         } else {
76 |           return 'Bundle Identifier'
77 |         }
78 |       }
79 |     }
80 |   }
81 | </script>
82 | 


--------------------------------------------------------------------------------
/src/views/projects/Edit.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="box box-primary">
 3 |     <loading-overlay v-show="showOverlay"></loading-overlay>
 4 |     <div class="box-header with-border">
 5 |       <h3 class="box-title">编辑项目</h3>
 6 |     </div>
 7 |     <form @submit.prevent="doCreate" accept-charset="UTF-8" method="post">
 8 |       <project-form :project.sync="project" :edit="true"></project-form>
 9 |       <div class="box-footer">
10 |         <button class="btn btn-primary" @click="doUpdate">
11 |           Update
12 |         </button>
13 |         <button type="button" class="btn btn-danger" @click="show">
14 |           Delete
15 |         </button>
16 |         <confirm-modal :show.sync="showModal" @ok="doDelete">
17 |           <span slot="body">This action CANNOT be undone.
18 |             This will permanently delete the project, builds and remove all collaborator associations.
19 |           </span>
20 |         </confirm-modal>
21 |       </div>
22 |     </form>
23 |   </div>
24 | </template>
25 | 
26 | <script>
27 |   import NetWorking from '@/utils/networking'
28 |   import ProjectForm from '@/components/projects/Form'
29 |   import * as API from '@/constants/api'
30 |   import { mapGetters } from 'vuex'
31 |   import LoadingOverlay from '@/components/global/LoadingOverlay'
32 |   import ConfirmModal from '@/components/global/ConfirmModal'
33 | 
34 |   export default {
35 |     components: {ProjectForm, LoadingOverlay, ConfirmModal},
36 | 
37 |     computed: {
38 |       ...mapGetters({
39 |         project: 'currentProject'
40 |       })
41 |     },
42 | 
43 |     data () {
44 |       return {
45 |         showOverlay: false,
46 |         showModal: false
47 |       }
48 |     },
49 | 
50 |     methods: {
51 |       show () {
52 |         this.showModal = true
53 |       },
54 | 
55 |       doDelete () {
56 |         this.showLoading()
57 |         NetWorking
58 |           .doDelete(API.project, {id: this.project.id})
59 |           .then(() => {
60 |             this.hideLoading()
61 |             this.$router.replace({name: 'dashboard'})
62 |           }, () => {
63 |             this.hideLoading()
64 |           })
65 |       },
66 | 
67 |       doUpdate () {
68 |         this.showLoading()
69 |         NetWorking
70 |           .doPut(API.project, {id: this.project.id}, {project: this.project})
71 |           .then(response => {
72 |             this.hideLoading()
73 |             this.$store.dispatch('setProject', response.data)
74 |           }, () => {
75 |             this.hideLoading()
76 |           })
77 |       },
78 | 
79 |       showLoading () {
80 |         this.showOverlay = true
81 |       },
82 | 
83 |       hideLoading () {
84 |         this.showOverlay = false
85 |       }
86 |     }
87 |   }
88 | </script>
89 | 


--------------------------------------------------------------------------------
/src/views/projects/environments/List.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="box box-primary">
 3 |     <div class="box-header with-border">
 4 |       <h3 class="box-title">Environments</h3>
 5 |       <div class="box-tools">
 6 |         <router-link class="btn btn-block btn-primary btn-sm" :to="{ name: 'environments_new'}">
 7 |           New Environment
 8 |         </router-link>
 9 |       </div>
10 |     </div>
11 |     <table-box :url="url" :pathParams="pathParams">
12 |       <tr slot="ths">
13 |         <th>ID</th>
14 |         <th>Name</th>
15 |         <th>Version</th>
16 |         <th>Fastlane Template</th>
17 |         <th>Git Branch</th>
18 |         <th>Git Tag</th>
19 |         <th>Updated Time</th>
20 |         <th style="width:270px">Action</th>
21 |       </tr>
22 |       <template slot="item" slot-scope="props">
23 |         <tr>
24 |           <td>
25 |             {{ props.item.id }}
26 |           </td>
27 |           <td>
28 |             {{ props.item.name }}
29 |           </td>
30 |           <td>
31 |             {{ props.item.current_version }}
32 |           </td>
33 |           <td>
34 |             {{ props.item.fastlane_template.command }}({{ props.item.fastlane_template.name }})
35 |           </td>
36 |           <td>
37 |             {{ props.item.git_branch }}
38 |           </td>
39 |           <td>
40 |             {{ props.item.git_tag }}
41 |           </td>
42 |           <td>
43 |             {{ props.item.updated_at }}
44 |           </td>
45 |           <td>
46 |             <router-link
47 |               :to="{ name: 'build_info', params: { id: $route.params.id, env_id: props.item.id }}"
48 |               class="btn btn-primary">
49 |               Build
50 |             </router-link>
51 |             <router-link
52 |               :to="{ name: 'environments_edit', params: { id: $route.params.id, env_id: props.item.id }}"
53 |               class="btn btn-info">
54 |               Edit
55 |             </router-link>
56 |             <router-link
57 |               :to="{ name: 'environments_config', params: { id: $route.params.id, env_id: props.item.id }}"
58 |               class="btn btn-info">
59 |               Config
60 |             </router-link>
61 |             <router-link
62 |               :to="{ name: 'environments_clone', params: { id: $route.params.id, env_id: props.item.id }}"
63 |               class="btn btn-info">
64 |               Clone
65 |             </router-link>
66 |           </td>
67 |         </tr>
68 |       </template>
69 |     </table-box>
70 |   </div>
71 | </template>
72 | 
73 | <script>
74 |   import * as API from '@/constants/api'
75 |   import TableBox from '@/components/global/TableBox'
76 | 
77 |   export default {
78 |     components: {TableBox},
79 | 
80 |     data () {
81 |       return {
82 |         url: API.environments,
83 |         pathParams: {id: this.$route.params.project_id},
84 |         reloadData: false
85 |       }
86 |     }
87 | 
88 |   }
89 | </script>
90 | 


--------------------------------------------------------------------------------
/src/views/projects/environments/configs/Index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="box box-success">
 3 |     <loading-overlay v-show="showOverlay"></loading-overlay>
 4 |     <div class="box-header with-border">
 5 |       <h3 class="box-title">Configuration</h3>
 6 |     </div>
 7 |     <div class="box-body">
 8 |       <div class="row">
 9 |         <a href="javascript:" class="col-md-4 col-sm-6 col-xs-12" v-for="(config, index) in configs" @click="navigateToConfig(config)">
10 |           <div class="info-box bg-gray" :class="bgClass(config.id)">
11 |               <span class="info-box-icon">
12 |                 <i class="fa" :class="statusClass(config.finished)"></i>
13 |               </span>
14 |             <div class="info-box-content">
15 |                 <span class="info-box-text">
16 |                   {{ config.name }}
17 |                 </span>
18 |               <span class="info-box-number">{{ index + 1 }}</span>
19 |               <div class="progress">
20 |                 <div class="progress-bar" style="width: 100%"></div>
21 |               </div>
22 |               <span class="progress-description">
23 |                   {{ config.desc }}
24 |                 </span>
25 |             </div>
26 |           </div>
27 |         </a>
28 |       </div>
29 |       <router-view></router-view>
30 |     </div>
31 |   </div>
32 | </template>
33 | 
34 | <script>
35 |   import NetWorking from '@/utils/networking'
36 |   import * as API from '@/constants/api'
37 |   import LoadingOverlay from '@/components/global/LoadingOverlay'
38 | 
39 |   export default {
40 |     components: {LoadingOverlay},
41 | 
42 |     data () {
43 |       return {
44 |         showOverlay: false,
45 |         configs: [],
46 |         currentConfig: {}
47 |       }
48 |     },
49 | 
50 |     created () {
51 |       this.fetchData()
52 |     },
53 | 
54 |     methods: {
55 |       fetchData () {
56 |         NetWorking
57 |           .doGet(API.environmentConfigs, {id: this.$route.params.project_id, env_id: this.$route.params.env_id})
58 |           .then(response => {
59 |               this.configs = response.data.list
60 |               if (['fastlane', 'git_clone', 'services'].indexOf(this.$route.name) === -1) {
61 |                 this.navigateToConfig(this.configs[0])
62 |               }
63 |             }
64 |           )
65 |       },
66 | 
67 |       navigateToConfig (config) {
68 |         this.currentConfig = config
69 |         this.$router.replace({name: config.id})
70 |       },
71 | 
72 |       statusClass (finished) {
73 |         if (finished) {
74 |           return 'fa-check-circle'
75 |         } else {
76 |           return 'fa-circle-thin'
77 |         }
78 |       },
79 | 
80 |       bgClass (configId) {
81 |         if (configId === this.$route.name) {
82 |           return 'bg-green'
83 |         } else {
84 |           return ''
85 |         }
86 |       },
87 | 
88 |       showLoading () {
89 |         this.showOverlay = true
90 |       },
91 | 
92 |       hideLoading () {
93 |         this.showOverlay = false
94 |       }
95 |     }
96 |   }
97 | </script>
98 | 


--------------------------------------------------------------------------------
/src/views/projects/List.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="nav-tabs-custom">
  3 |     <ul class="nav nav-tabs">
  4 |       <li id="tab-apps" :class="{ active: type === 'app' }">
  5 |         <a href="javascript:" @click="switchTab('app')">
  6 |           Apps
  7 |         </a>
  8 |       </li>
  9 |       <li id="tab-libs" :class="{ active: type === 'lib' }">
 10 |         <a href="javascript:" @click="switchTab('lib')">
 11 |           Libs
 12 |         </a>
 13 |       </li>
 14 |       <li class="pull-right">
 15 |         <div class="box-tools">
 16 |           <router-link class="btn btn-block btn-primary btn-sm" :to="{ name: 'project_new'}">
 17 |             New Project
 18 |           </router-link>
 19 |         </div>
 20 |       </li>
 21 |     </ul>
 22 |     <div class="active tab-pane" id="deliveries">
 23 |       <table-box :url="url" :options="options">
 24 |         <tr slot="ths">
 25 |           <th>ID</th>
 26 |           <th>Icon</th>
 27 |           <th>Project</th>
 28 |           <th>Guardian</th>
 29 |           <th>Desc</th>
 30 |           <th>Updated Time</th>
 31 |         </tr>
 32 |         <template slot="item" slot-scope="props">
 33 |           <tr>
 34 |             <td>
 35 |               {{ props.item.id }}
 36 |             </td>
 37 |             <td>
 38 |               <img class="avatar" :src="props.item.icon" v-if="props.item.icon !== null">
 39 |               <div class="avatar" v-else>
 40 |                 G
 41 |               </div>
 42 |             </td>
 43 |             <td>
 44 |               <router-link :to="{name:'home', params:{project_id:props.item.id}}">
 45 |                 {{ props.item.title }}
 46 |               </router-link>
 47 |             </td>
 48 |             <td>
 49 |               {{ props.item.guardian.name }}
 50 |             </td>
 51 |             <td>
 52 |               {{ props.item.desc }}
 53 |             </td>
 54 |             <td>
 55 |               {{ props.item.updated_at }}
 56 |             </td>
 57 |           </tr>
 58 |         </template>
 59 |       </table-box>
 60 |     </div>
 61 |   </div>
 62 | </template>
 63 | 
 64 | <script>
 65 |   import * as API from '@/constants/api'
 66 |   import TableBox from '@/components/global/TableBox'
 67 | 
 68 |   export default {
 69 |     components: {TableBox},
 70 | 
 71 |     data () {
 72 |       return {
 73 |         type: '',
 74 |         url: API.projects,
 75 |         options: null
 76 |       }
 77 |     },
 78 | 
 79 |     created () {
 80 |       this.switchTab('app')
 81 |     },
 82 | 
 83 |     methods: {
 84 |       switchTab (type) {
 85 |         this.type = type
 86 |         this.options = {'type': this.type}
 87 |       }
 88 |     }
 89 |   }
 90 | </script>
 91 | 
 92 | <style scoped>
 93 |   img.avatar, div.avatar {
 94 |     border-radius: 50%;
 95 |     width: 35px;
 96 |     height: 35px;
 97 |     line-height: 35px;
 98 |   }
 99 | 
100 |   div.avatar {
101 |     background-color: #FFEBEE;
102 |     color: #555;
103 |     font-size: 16px;
104 |     margin-right: 10px;
105 |     text-align: center;
106 |     vertical-align: top;
107 |   }
108 | </style>
109 | 


--------------------------------------------------------------------------------
/src/components/projects/Info.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="box box-primary">
  3 |     <LoadingOverlay v-show="showOverlay"></LoadingOverlay>
  4 |     <div class="box-body box-profile">
  5 |       <img class="profile-user-img img-responsive img-circle" :src="project.icon">
  6 |       <h3 class="profile-username text-center">
  7 |         {{ project.title }}
  8 |       </h3>
  9 |       <p class="text-muted text-center">
 10 |         {{ project.desc }}
 11 |       </p>
 12 |       <p class="text-muted text-center">
 13 |         {{ project.git_repo_url }}
 14 |       </p>
 15 |       <ul class="list-group list-group-unbordered">
 16 |         <li class="list-group-item" v-for="item in properties">
 17 |           <b>
 18 |             {{ item.name }}
 19 |           </b>
 20 |           <a class="pull-right">
 21 |             {{ item.value }}
 22 |           </a>
 23 |         </li>
 24 |       </ul>
 25 |       <button type="button" class="btn btn-info" @click="syncGitLab">
 26 |         Sync Gitlab
 27 |       </button>
 28 |     </div>
 29 |   </div>
 30 | </template>
 31 | 
 32 | <script>
 33 |   import NetWorking from '@/utils/networking'
 34 |   import * as API from '@/constants/api'
 35 |   import LoadingOverlay from '@/components/global/LoadingOverlay'
 36 |   import ConfirmModal from '@/components/global/ConfirmModal'
 37 |   import { mapGetters } from 'vuex'
 38 | 
 39 |   export default {
 40 |     components: {LoadingOverlay, ConfirmModal},
 41 | 
 42 |     computed: {
 43 |       ...mapGetters({
 44 |         project: 'currentProject'
 45 |       })
 46 |     },
 47 | 
 48 |     data () {
 49 |       return {
 50 |         showOverlay: false,
 51 |         properties: []
 52 |       }
 53 |     },
 54 | 
 55 |     watch: {
 56 |       project () {
 57 |         this.setProjectProperties()
 58 |       }
 59 |     },
 60 | 
 61 |     created () {
 62 |       this.setProjectProperties()
 63 |     },
 64 | 
 65 |     methods: {
 66 | 
 67 |       setProjectProperties () {
 68 |         this.properties = [
 69 |           {name: 'Guardian', value: this.project.guardian.name},
 70 |           {name: 'Identifier', value: this.project.identifier},
 71 |           {name: 'Git Repo URL', value: this.project.git_repo_url},
 72 |           {name: 'Type', value: this.project.type},
 73 |           {name: 'Updated Time', value: this.project.updated_at},
 74 |           {name: 'Last Build Time', value: this.project.lasted_build_at}
 75 |         ]
 76 |       },
 77 | 
 78 |       syncGitLab () {
 79 |         this.showLoading()
 80 |         NetWorking
 81 |           .doGet(API.projectSyncGitLab, {id: this.$route.params.project_id})
 82 |           .then(response => {
 83 |             let project = response.data
 84 |             this.$store.dispatch('setProject', project)
 85 |             this.hideLoading()
 86 |           }, () => {
 87 |             this.hideLoading()
 88 |           })
 89 |       },
 90 | 
 91 |       showLoading () {
 92 |         this.showOverlay = true
 93 |       },
 94 | 
 95 |       hideLoading () {
 96 |         this.showOverlay = false
 97 |       }
 98 | 
 99 |     }
100 |   }
101 | </script>
102 | 


--------------------------------------------------------------------------------
/src/components/projects/EnvForm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="box-body">
 3 |     <div class="form-group">
 4 |       <label for="name">Name *</label>
 5 |       <input class="form-control" id="name" name="environment[name]" v-model="environment.name"/>
 6 |     </div>
 7 |     <div class="form-group" v-show="isAndroidApp()">
 8 |       <label for="main_module">Main Module Name *</label>
 9 |       <input class="form-control" id="main_module" name="environment[main_module]" v-model="environment.main_module" placeholder="eg:app"/>
10 |     </div>
11 |     <div class="form-group" v-show="isAndroidApp()">
12 |       <label for="gradle_task">Gradle Task Name *</label>
13 |       <input class="form-control" id="gradle_task" name="environment[gradle_task]" v-model="environment.gradle_task" placeholder="eg:release"/>
14 |     </div>
15 |     <div class="form-group" v-show="isApp()">
16 |       <label for="scheme" v-if="project.platform === 'ios'">Build Scheme *</label>
17 |       <label for="scheme" v-else-if="project.platform === 'android'">Apk file Name</label>
18 |       <input class="form-control" id="scheme" name="environment[scheme]" v-model="environment.scheme" placeholder="eg:app-release.apk"/>
19 |     </div>
20 |     <div class="form-group">
21 |       <label for="fastlane_template_id">Template *</label>
22 |       <select class="form-control" id="fastlane_template_id" name="environment[fastlane_template][id]" v-model="environment.fastlane_template.id">
23 |         <option v-for="option in options" :value="option.value">{{ option.name }}</option>
24 |       </select>
25 |     </div>
26 |     <div class="form-group">
27 |       <label for="cron">Build Schedule</label>
28 |       <input class="form-control" id="cron" name="environment[cron]" v-model="environment.cron" placeholder="eg:0 */5 * * * *"/>
29 |     </div>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 |   import NetWorking from '@/utils/networking'
35 |   import * as API from '@/constants/api'
36 |   import { mapGetters } from 'vuex'
37 |   import Enum from '@/constants/enum'
38 |   import { project } from '../../constants/api'
39 | 
40 |   export default {
41 | 
42 |     props: ['environment'],
43 | 
44 |     computed: {
45 |       ...mapGetters({
46 |         project: 'currentProject',
47 |         platform: 'currentPlatform'
48 |       })
49 |     },
50 | 
51 |     data () {
52 |       return {
53 |         options: []
54 |       }
55 |     },
56 | 
57 |     created () {
58 |       this.setOptions()
59 |     },
60 | 
61 |     methods: {
62 | 
63 |       setOptions () {
64 |         NetWorking
65 |           .doGet(API.fastlaneTemplates, null, {platform: this.platform})
66 |           .then((response) => {
67 |             let templates = response.data.list
68 |             for (let template of templates) {
69 |               this.options.push({name: `${template.name} - ${template.command}`, value: template.id})
70 |             }
71 |           })
72 |       },
73 | 
74 |       isApp () {
75 |         return this.project.type === Enum.ProjectType.App
76 |       },
77 | 
78 |       isAndroidApp () {
79 |         return this.isApp() && this.project.platform === 'android'
80 |       }
81 | 
82 |     }
83 |   }
84 | </script>
85 | 
86 | 


--------------------------------------------------------------------------------
/src/components/dashboard/WeeklyChart.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="row">
  3 |     <section class="col-lg-12">
  4 |       <div class="nav-tabs-custom" style="cursor: move;">
  5 |         <ul class="nav nav-tabs pull-right ui-sortable-handle">
  6 |           <li class="pull-left header"><i class="fa fa-inbox"></i>Weekly Builds</li>
  7 |         </ul>
  8 |         <div class="tab-content no-padding">
  9 |           <div class="chart" ref="chart">
 10 |           </div>
 11 |         </div>
 12 |       </div>
 13 |     </section>
 14 |   </div>
 15 | </template>
 16 | 
 17 | <script>
 18 |   import NetWorking from '@/utils/networking'
 19 |   import * as API from '@/constants/api'
 20 | 
 21 |   import echarts from 'echarts/lib/echarts'
 22 |   import 'echarts/lib/chart/line'
 23 |   import 'echarts/lib/component/legend'
 24 |   import 'echarts/lib/component/tooltip'
 25 |   import 'echarts/lib/component/title'
 26 | 
 27 |   export default {
 28 |     data () {
 29 |       return {
 30 |         results: [],
 31 |         legend: [],
 32 |         days: [],
 33 |         series: []
 34 |       }
 35 |     },
 36 | 
 37 |     created () {
 38 |       this.fetchWeeklyData()
 39 |     },
 40 | 
 41 |     methods: {
 42 | 
 43 |       fetchWeeklyData () {
 44 |         NetWorking
 45 |           .doGet(API.weeklyData)
 46 |           .then(response => {
 47 |             this.results = response.data.list
 48 |             this.handleData()
 49 |           }, () => {
 50 |           })
 51 |       },
 52 | 
 53 |       handleData () {
 54 |         for (let result of this.results) {
 55 |           this.legend.push(result['platform'])
 56 |           this.days = result['days']
 57 |           this.series.push({
 58 |             name: result['platform'],
 59 |             type: 'line',
 60 |             stack: 'Mount',
 61 |             data: result['data']
 62 |           })
 63 |         }
 64 |         this.buildCharts()
 65 |       },
 66 | 
 67 |       buildCharts () {
 68 |         let chart = echarts.init(this.$refs.chart)
 69 |         let option = {
 70 |           tooltip: {
 71 |             trigger: 'axis',
 72 |             axisPointer: {
 73 |               type: 'cross',
 74 |               label: {
 75 |                 backgroundColor: '#6a7985'
 76 |               }
 77 |             }
 78 |           },
 79 |           legend: {
 80 |             data: this.legend
 81 |           },
 82 |           toolbox: {
 83 |             feature: {
 84 |               saveAsImage: {}
 85 |             }
 86 |           },
 87 |           grid: {
 88 |             left: '10',
 89 |             right: '15',
 90 |             bottom: '10',
 91 |             containLabel: true
 92 |           },
 93 |           xAxis: [
 94 |             {
 95 |               type: 'category',
 96 |               boundaryGap: false,
 97 |               data: this.days
 98 |             }
 99 |           ],
100 |           yAxis: [
101 |             {
102 |               type: 'value'
103 |             }
104 |           ],
105 |           series: this.series
106 |         }
107 |         chart.setOption(option)
108 |       }
109 |     }
110 |   }
111 | </script>
112 | 
113 | <style scoped>
114 |   .chart {
115 |     width: 100%;
116 |     height: 500px
117 |   }
118 | </style>
119 | 


--------------------------------------------------------------------------------
/src/components/global/TableBox.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="box box-solid">
  3 |     <transition name="fade">
  4 |       <loading-overlay v-show="showOverlay"></loading-overlay>
  5 |     </transition>
  6 |     <div class="box-body">
  7 |       <table class="table table-hover table-bordered">
  8 |         <tbody>
  9 |         <slot name="ths"></slot>
 10 |         <slot name="item"
 11 |               v-for="item in items"
 12 |               :item="item">
 13 |         </slot>
 14 |         </tbody>
 15 |       </table>
 16 |     </div>
 17 |     <div class="box-footer">
 18 |       <div class="dataTables_paginate paging_simple_numbers" v-show="paginate.totalRows>paginate.perPage">
 19 |         <pagination :total-rows="paginate.totalRows" v-model="paginate.currentPage"
 20 |                     :per-page="paginate.perPage" @input="pageChanged">
 21 |         </pagination>
 22 |       </div>
 23 |     </div>
 24 |   </div>
 25 | </template>
 26 | 
 27 | <script>
 28 |   import NetWorking from '@/utils/networking'
 29 |   import LoadingOverlay from '@/components/global/LoadingOverlay'
 30 |   import Pagination from '@/components/global/Pagination'
 31 | 
 32 |   export default {
 33 |     components: {LoadingOverlay, Pagination},
 34 | 
 35 |     props: {
 36 |       url: {
 37 |         type: String,
 38 |         default: ''
 39 |       },
 40 |       pathParams: {
 41 |         type: Object,
 42 |         default: () => {}
 43 |       },
 44 |       options: {
 45 |         type: Object,
 46 |         default: function () { return {params: {}} }
 47 |       },
 48 |       reloadData: {
 49 |         type: Boolean,
 50 |         default: false
 51 |       }
 52 |     },
 53 | 
 54 |     data () {
 55 |       return {
 56 |         showOverlay: false,
 57 |         items: [],
 58 |         paginate: {
 59 |           currentPage: 1,
 60 |           totalRows: 0,
 61 |           perPage: 15
 62 |         }
 63 |       }
 64 |     },
 65 | 
 66 |     created () {
 67 |       this.fetchData()
 68 |     },
 69 | 
 70 |     watch: {
 71 |       reloadData () {
 72 |         if (this.reloadData) {
 73 |           this.fetchData()
 74 |         }
 75 |       },
 76 | 
 77 |       pathParams () {
 78 |         this.fetchData()
 79 |       },
 80 | 
 81 |       options () {
 82 |         this.fetchData()
 83 |       }
 84 |     },
 85 | 
 86 |     methods: {
 87 |       fetchData (page) {
 88 |         this.showLoading()
 89 |         this.options.page = page >= 1 ? page : 1
 90 |         NetWorking
 91 |           .doGet(this.url, this.pathParams, this.options)
 92 |           .then(response => {
 93 |             this.items = response.data.list
 94 |             this.paginate.totalRows = response.data.total
 95 |             // 抛出data完整对象，以便父组件使用
 96 |             this.$emit('afterFetchData', response.data)
 97 |             this.hideLoading()
 98 |           }, () => {
 99 |             this.hideLoading()
100 |           })
101 |       },
102 | 
103 |       pageChanged (page) {
104 |         this.fetchData(page)
105 |       },
106 | 
107 |       showLoading () {
108 |         this.showOverlay = true
109 |       },
110 | 
111 |       hideLoading () {
112 |         this.showOverlay = false
113 |         this.$emit('update:reloadData', false)
114 |       }
115 |     }
116 |   }
117 | </script>
118 | 


--------------------------------------------------------------------------------
/mock/data/configs.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "configs": [
 3 |     {
 4 |       "id": "info",
 5 |       "name": "Information",
 6 |       "desc": "Information of environment",
 7 |       "finished": true,
 8 |       "environmentsId": 1
 9 |     },
10 |     {
11 |       "id": "git_clone",
12 |       "name": "Git",
13 |       "desc": "Git clone the project to local",
14 |       "finished": false,
15 |       "environmentsId": 1
16 |     },
17 |     {
18 |       "id": "fastlane",
19 |       "name": "Fastlane",
20 |       "desc": "Initialize fastlane file of the environment",
21 |       "finished": true,
22 |       "environmentsId": 1
23 |     }
24 |   ],
25 |   "templates": [
26 |     {
27 |       "id": 0,
28 |       "name": "Production",
29 |       "projectId": 4
30 |     },
31 |     {
32 |       "id": 1,
33 |       "name": "Test",
34 |       "projectId": 4
35 |     },
36 |     {
37 |       "id": 2,
38 |       "name": "Beta",
39 |       "projectId": 4
40 |     }
41 |   ],
42 |   "git_branch": [
43 |     {
44 |       "name": "HEAD -\u003e origin/test",
45 |       "full": "remotes/origin/HEAD -\u003e origin/test",
46 |       "current": false,
47 |       "environmentsId": 1
48 |     },
49 |     {
50 |       "name": "dev",
51 |       "full": "remotes/origin/dev",
52 |       "current": false,
53 |       "environmentsId": 1
54 |     },
55 |     {
56 |       "name": "jinzhu/dev",
57 |       "full": "remotes/origin/jinzhu/dev",
58 |       "current": false,
59 |       "environmentsId": 1
60 |     },
61 |     {
62 |       "name": "master",
63 |       "full": "remotes/origin/master",
64 |       "current": false,
65 |       "environmentsId": 1
66 |     },
67 |     {
68 |       "name": "swift3",
69 |       "full": "remotes/origin/swift3",
70 |       "current": false,
71 |       "environmentsId": 1
72 |     },
73 |     {
74 |       "name": "test",
75 |       "full": "remotes/origin/test",
76 |       "current": true,
77 |       "environmentsId": 1
78 |     }
79 |   ],
80 |   "fastlane": [
81 |     {
82 |       "name": "Fastfile",
83 |       "title": "Fastfile",
84 |       "content": "import_from_git(url: 'git@git.gengmei.cc:mobile/JaguarTemplate.git',\r\n               path: 'fastlane/ios_fastfile')"
85 |     },
86 |     {
87 |       "name": "Appfile",
88 |       "title": "Appfile",
89 |       "content": "app_identifier \"com.wanmeizhensuo.Doctor\" # The bundle identifier of your app\r\napple_id \"wanmeizhensuo@gmail.com\" # Your Apple email address\r\n\r\nteam_id \"[[DEV_PORTAL_TEAM_ID]]\"  # Developer Portal Team ID\r\n[[ITC_TEAM]]\r\n# you can even provide different app identifiers, Apple IDs and team names per lane:\r\n# More information: https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Appfile.md"
90 |     },
91 |     {
92 |       "name": "Deliverfile",
93 |       "title": "Deliverfile",
94 |       "content": "###################### More Options ######################\n# If you want to have even more control, check out the documentation\n# https://github.com/fastlane/deliver/blob/master/Deliverfile.md\n\n\n###################### Automatically generated ######################\n# Feel free to remove the following line if you use fastlane (which you should)\n\napp_identifier \"com.wanmeizhensuo.Doctor\" # The bundle identifier of your app\nusername \"wanmeizhensuo@gmail.com\" # your Apple ID user\n"
95 |     }
96 |   ]
97 | }
98 | 


--------------------------------------------------------------------------------
/src/views/projects/builds/Info.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="box box-primary">
  3 |     <loading-overlay v-show="showOverlay"></loading-overlay>
  4 |     <div class="box-header with-border">
  5 |       <h3 class="box-title">Build Info</h3>
  6 |     </div>
  7 |     <div class="box-body">
  8 |       <form @submit.prevent="doBuild" accept-charset="UTF-8" method="post">
  9 |         <div class="form-group">
 10 |           <label for="current_version">Current Version</label>
 11 |           <input name="current_version" id="current_version" :value="build.current_version" class="form-control" disabled>
 12 |         </div>
 13 |         <div class="form-group" v-show="isLib()">
 14 |           <label for="version">New Version</label>
 15 |           <input name="version" id="version" class="form-control" v-model="build.version">
 16 |         </div>
 17 |         <div class="form-group">
 18 |           <label for="notes">Release Notes</label>
 19 |           <textarea name="notes" id="notes" class="form-control" rows="10" v-model="build.notes"></textarea>
 20 |         </div>
 21 |         <div class="box-footer">
 22 |           <button class="btn btn-primary">
 23 |             Build
 24 |           </button>
 25 |         </div>
 26 |       </form>
 27 |     </div>
 28 |   </div>
 29 | </template>
 30 | 
 31 | <script>
 32 |   import * as API from '@/constants/api'
 33 |   import NetWorking from '@/utils/networking'
 34 |   import LoadingOverlay from '@/components/global/LoadingOverlay'
 35 |   import { mapGetters } from 'vuex'
 36 | 
 37 |   export default {
 38 |     components: {LoadingOverlay},
 39 | 
 40 |     computed: {
 41 |       ...mapGetters({
 42 |         project: 'currentProject'
 43 |       })
 44 |     },
 45 | 
 46 |     data () {
 47 |       return {
 48 |         build: {
 49 |           current_version: '',
 50 |           version: '',
 51 |           notes: ''
 52 |         },
 53 |         showOverlay: false,
 54 |         pathParams: {id: this.$route.params.project_id, env_id: this.$route.params.env_id}
 55 |       }
 56 |     },
 57 | 
 58 |     created () {
 59 |       this.fetchBuildInfo()
 60 |     },
 61 | 
 62 |     methods: {
 63 | 
 64 |       fetchBuildInfo () {
 65 |         this.showLoading()
 66 |         NetWorking
 67 |           .doGet(API.environmentBuildInfo, this.pathParams, this.build)
 68 |           .then(response => {
 69 |             this.build = response.data
 70 |             this.build.notes = response.data.notes.join('\n')
 71 |             this.hideLoading()
 72 |           }, () => {
 73 |             this.hideLoading()
 74 |           })
 75 |       },
 76 | 
 77 |       doBuild () {
 78 |         this.showLoading()
 79 |         NetWorking
 80 |           .doPost(API.environmentBuild, this.pathParams, this.build)
 81 |           .then(response => {
 82 |             this.$router.replace({name: 'build_detail', params: {'build_id': response.data.id}})
 83 |             this.hideLoading()
 84 |           }, () => {
 85 |             this.hideLoading()
 86 |           })
 87 |       },
 88 | 
 89 |       isLib () {
 90 |         return this.project.type === 'Lib'
 91 |       },
 92 | 
 93 |       showLoading () {
 94 |         this.showOverlay = true
 95 |       },
 96 | 
 97 |       hideLoading () {
 98 |         this.showOverlay = false
 99 |       }
100 | 
101 |     }
102 |   }
103 | </script>
104 | 


--------------------------------------------------------------------------------
/src/views/projects/environments/Edit.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="box box-primary">
  3 |     <loading-overlay v-show="showOverlay"></loading-overlay>
  4 |     <div class="box-header with-border">
  5 |       <h3 class="box-title">Edit Environment</h3>
  6 |     </div>
  7 |     <form @submit.prevent="doUpdate" accept-charset="UTF-8" method="post">
  8 |       <env-form :environment.sync="environment"></env-form>
  9 |       <div class="box-footer">
 10 |         <input class="btn btn-primary" type="submit" value="Update">
 11 |         <button type="button" class="btn btn-danger" @click="show">
 12 |           Delete
 13 |         </button>
 14 |         <confirm-modal :show.sync="showModal" @ok="doDelete">
 15 |           <span slot="body">This action CANNOT be undone.
 16 |             This will permanently delete the environment, builds and remove all collaborator associations.
 17 |           </span>
 18 |         </confirm-modal>
 19 |       </div>
 20 |     </form>
 21 |   </div>
 22 | </template>
 23 | 
 24 | <script>
 25 |   import NetWorking from '@/utils/networking'
 26 |   import * as API from '@/constants/api'
 27 |   import { mapGetters } from 'vuex'
 28 |   import LoadingOverlay from '@/components/global/LoadingOverlay'
 29 |   import ConfirmModal from '@/components/global/ConfirmModal'
 30 |   import EnvForm from '@/components/projects/EnvForm'
 31 | 
 32 |   export default {
 33 |     components: {LoadingOverlay, ConfirmModal, EnvForm},
 34 | 
 35 |     computed: {
 36 |       ...mapGetters({
 37 |         project: 'currentProject'
 38 |       })
 39 |     },
 40 | 
 41 |     data () {
 42 |       return {
 43 |         showOverlay: false,
 44 |         showModal: false,
 45 |         selected: '',
 46 |         environment: {
 47 |           fastlane_template: {}
 48 |         }
 49 |       }
 50 |     },
 51 | 
 52 |     created () {
 53 |       this.fetchData()
 54 |     },
 55 | 
 56 |     methods: {
 57 |       fetchData () {
 58 |         this.showLoading()
 59 |         NetWorking
 60 |           .doGet(API.environment, {id: this.$route.params.project_id, env_id: this.$route.params.env_id})
 61 |           .then(response => {
 62 |             this.environment = response.data
 63 |             this.selected = this.environment.build_template
 64 |             this.hideLoading()
 65 |           }, () => {
 66 |             this.hideLoading()
 67 |           })
 68 |       },
 69 | 
 70 |       doUpdate () {
 71 |         this.showLoading()
 72 |         NetWorking
 73 |           .doPut(API.environment, {id: this.$route.params.project_id, env_id: this.$route.params.env_id}, {environment: this.environment})
 74 |           .then(response => {
 75 |             this.config = response.data
 76 |             this.hideLoading()
 77 |           }, () => {
 78 |             this.hideLoading()
 79 |           })
 80 |       },
 81 | 
 82 |       doDelete () {
 83 |         this.showLoading()
 84 |         NetWorking
 85 |           .doDelete(API.environment, {id: this.$route.params.project_id, env_id: this.$route.params.env_id})
 86 |           .then(() => {
 87 |             this.$router.replace({name: 'environments'})
 88 |             this.hideLoading()
 89 |           }, () => {
 90 |             this.hideLoading()
 91 |           })
 92 |       },
 93 | 
 94 |       showLoading () {
 95 |         this.showOverlay = true
 96 |       },
 97 | 
 98 |       hideLoading () {
 99 |         this.showOverlay = false
100 |       },
101 | 
102 |       show () {
103 |         this.showModal = true
104 |       }
105 |     }
106 |   }
107 | </script>
108 | 
109 | 


--------------------------------------------------------------------------------
/src/views/projects/environments/configs/services/List.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="row">
  3 |     <div class="col-xs-12">
  4 |       <div class="box">
  5 |         <div class="box-header">
  6 |           <h3 class="box-title">Environment Services</h3>
  7 |         </div>
  8 |         <table-box :url="url" :pathParams="pathParams" :reloadData.sync="reloadData">
  9 |           <tr slot="ths">
 10 |             <th></th>
 11 |             <th>Service</th>
 12 |             <th>Description</th>
 13 |             <th>Last edit</th>
 14 |             <th>Action</th>
 15 |           </tr>
 16 |           <template slot="item" slot-scope="props">
 17 |             <tr>
 18 |               <td>
 19 |                 <i class="fa" :class="activeClass(props.item)"></i>
 20 |               </td>
 21 |               <td>
 22 |                 {{ props.item.title }}
 23 |               </td>
 24 |               <td>
 25 |                 {{ props.item.desc }}
 26 |               </td>
 27 |               <td>
 28 |                 {{ props.item.updated_at }}
 29 |               </td>
 30 |               <td>
 31 |                 <button class="btn btn-warning" @click="showEditService(props.item)">Edit</button>
 32 |               </td>
 33 |             </tr>
 34 |           </template>
 35 |         </table-box>
 36 |         <confirm-modal :show.sync="showModal" @ok="doUpdate">
 37 |           <div slot="title">Edit Service {{ currentService.title }}</div>
 38 |           <div slot="body">
 39 |             <div class="box-body">
 40 |               <form @submit.prevent="doUpdate" accept-charset="UTF-8" method="post" class="form-horizontal">
 41 |                 <service-field :field.sync="field" v-for="field in currentService.fields" :key="field.title"></service-field>
 42 |               </form>
 43 |             </div>
 44 |           </div>
 45 |         </confirm-modal>
 46 |       </div>
 47 |     </div>
 48 |   </div>
 49 | </template>
 50 | 
 51 | <script>
 52 |   import * as API from '@/constants/api'
 53 |   import NetWorking from '@/utils/networking'
 54 |   import TableBox from '@/components/global/TableBox'
 55 |   import ConfirmModal from '@/components/global/ConfirmModal'
 56 |   import ServiceField from '@/components/projects/ServiceField'
 57 | 
 58 |   export default {
 59 |     components: {
 60 |       ServiceField,
 61 |       TableBox, ConfirmModal
 62 |     },
 63 | 
 64 |     data () {
 65 |       return {
 66 |         currentService: {
 67 |           fields: []
 68 |         },
 69 |         showModal: false,
 70 |         url: API.services,
 71 |         pathParams: {id: this.$route.params.project_id, env_id: this.$route.params.env_id},
 72 |         reloadData: false
 73 |       }
 74 |     },
 75 | 
 76 |     methods: {
 77 | 
 78 |       showEditService (service) {
 79 |         this.currentService = service
 80 |         this.showModal = true
 81 |       },
 82 | 
 83 |       activeClass (service) {
 84 |         return service.active ? 'fa-circle text-green' : 'fa-power-off text-gray'
 85 |       },
 86 | 
 87 |       doUpdate () {
 88 |         let data = {}
 89 |         for (let field of this.currentService.fields) {
 90 |           data[field.name] = field.value
 91 |         }
 92 |         data['service_type'] = this.currentService.service_type
 93 |         NetWorking
 94 |           .doPut(API.service, Object.assign(this.pathParams, {service_id: this.currentService.id}), {service: data})
 95 |           .then(() => {
 96 |             this.reloadData = true
 97 |           })
 98 |       }
 99 |     }
100 |   }
101 | </script>
102 | 


--------------------------------------------------------------------------------
/src/components/global/NavBar.vue:
--------------------------------------------------------------------------------
  1 | <!--顶部导航栏-->
  2 | <template>
  3 |   <header class="main-header">
  4 |     <a class="logo" href="/">
  5 |     <span class="logo-lg">
  6 |       <b>Falcon</b>
  7 |     </span>
  8 |     </a>
  9 |     <nav class="navbar navbar-static-top">
 10 |       <a class="sidebar-toggle" data-toggle="push-menu">
 11 |         <span class="sr-only">Toggle navigation</span>
 12 |       </a>
 13 |       <div class="navbar-custom-menu">
 14 |         <ul class="nav navbar-nav navbar-right" style="margin-right:0">
 15 |           <li class="dropdown user user-menu">
 16 |             <a aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown" href="#">
 17 |               <img alt="User Image" class="user-image" :src="currentUser.avatar_url">
 18 |               <span class="hidden-xs">{{ currentUser.name }}</span>
 19 |             </a>
 20 |             <ul class="dropdown-menu">
 21 |               <li class="user-header">
 22 |                 <img alt="User Image" class="img-circle" :src="currentUser.avatar_url">
 23 |                 <p>
 24 |                   {{ currentUser.name }} - {{ currentUser.username }}
 25 |                   <small>{{ currentUser.created_at }}</small>
 26 |                 </p>
 27 |               </li>
 28 |               <li class="user-footer">
 29 |                 <div class="pull-right">
 30 |                   <a class="btn btn-default btn-flat" href="javascript:" @click="signOut()">Sign Out</a>
 31 |                 </div>
 32 |               </li>
 33 |             </ul>
 34 |           </li>
 35 |           <li class="dropdown">
 36 |             <a aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown" href="#">
 37 |               Platform:
 38 |               {{ platform }}
 39 |               <span class="caret"></span>
 40 |             </a>
 41 |             <ul class="dropdown-menu" role="menu">
 42 |               <li>
 43 |                 <a href="javascript:" @click="changePlatform('ios')">iOS</a>
 44 |               </li>
 45 |               <li>
 46 |                 <a href="javascript:" @click="changePlatform('android')">Android</a>
 47 |               </li>
 48 |             </ul>
 49 |           </li>
 50 |           <li>
 51 |             <a href="javascript:;" @click="jumpToAdmin()" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
 52 |           </li>
 53 |         </ul>
 54 |       </div>
 55 |     </nav>
 56 |   </header>
 57 | </template>
 58 | 
 59 | <script>
 60 |   import NetWorking from '@/utils/networking'
 61 |   import * as API from '@/constants/api'
 62 |   import { mapGetters } from 'vuex'
 63 | 
 64 |   export default {
 65 | 
 66 |     computed: {
 67 |       ...mapGetters({
 68 |         platform: 'currentPlatform',
 69 |         currentUser: 'currentUser'
 70 |       })
 71 |     },
 72 | 
 73 |     created () {
 74 |       this.$store.dispatch('fetchPlatform')
 75 |     },
 76 | 
 77 |     methods: {
 78 |       signOut () {
 79 |         NetWorking.doGet(API.logout).then(() => {
 80 |           this.$store.dispatch('deleteUser')
 81 |           this.$router.replace({name: 'login'})
 82 |         })
 83 |       },
 84 | 
 85 |       changePlatform (platform) {
 86 |         NetWorking
 87 |           .doGet(API.setPlatform, {id: this.currentUser.id, platform: platform})
 88 |           .then(response => {
 89 |             this.$store.dispatch('setPlatform', response.data.platform)
 90 |             this.$router.replace({name: 'root', force: true})
 91 |             window.location.reload()
 92 |           })
 93 |       },
 94 | 
 95 |       jumpToAdmin () {
 96 |         this.$router.replace({name: 'admin'})
 97 |       }
 98 |     }
 99 |   }
100 | </script>
101 | 


--------------------------------------------------------------------------------
/src/components/global/ConfirmModal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-show="show" :transition="transition">
  3 |     <div class="modal" @click.self="clickMask">
  4 |       <div class="modal-dialog">
  5 |         <div class="modal-content">
  6 |           <!--Header-->
  7 |           <div class="modal-header">
  8 |             <slot name="header">
  9 |               <a type="button" class="close" @click="cancel">x</a>
 10 |               <h4 class="modal-title">
 11 |                 <slot name="title">Are your sure?</slot>
 12 |               </h4>
 13 |             </slot>
 14 |           </div>
 15 |           <!--Container-->
 16 |           <div class="modal-body">
 17 |             <slot name="body"></slot>
 18 |           </div>
 19 |           <!--Footer-->
 20 |           <div class="modal-footer">
 21 |             <button type="button" class="btn btn-default pull-left" @click="cancel">Cancel</button>
 22 |             <button type="button" class="btn btn-primary" @click="ok">Confirm</button>
 23 |           </div>
 24 |         </div>
 25 |       </div>
 26 |     </div>
 27 |     <div class="modal-backdrop in"></div>
 28 |   </div>
 29 | </template>
 30 | 
 31 | <script>
 32 |   export default {
 33 | 
 34 |     props: {
 35 |       show: {
 36 |         type: Boolean,
 37 |         default: false
 38 |       },
 39 |       title: {
 40 |         type: String,
 41 |         default: 'Modal'
 42 |       },
 43 |       // 为true时无法通过点击遮罩层关闭modal
 44 |       force: {
 45 |         type: Boolean,
 46 |         default: false
 47 |       },
 48 |       // 自定义组件transition
 49 |       transition: {
 50 |         type: String,
 51 |         default: 'modal'
 52 |       }
 53 |     },
 54 | 
 55 |     data () {
 56 |       return {
 57 |         duration: null
 58 |       }
 59 |     },
 60 | 
 61 |     created () {
 62 |       if (this.show) {
 63 |         document.body.className += ' modal-open'
 64 |       }
 65 |     },
 66 | 
 67 |     beforeDestroy () {
 68 |       document.body.className = document.body.className.replace(/\s?modal-open/, '')
 69 |     },
 70 | 
 71 |     watch: {
 72 |       show (value) {
 73 |         // 在显示时去掉body滚动条，防止出现双滚动条
 74 |         if (value) {
 75 |           document.body.className += ' modal-open'
 76 |         } else {
 77 |           if (!this.duration) {
 78 |             this.duration = window.getComputedStyle(this.$el)['transition-duration'].replace('s', '') * 1000
 79 |           }
 80 |           window.setTimeout(() => {
 81 |             document.body.className = document.body.className.replace(/\s?modal-open/, '')
 82 |           }, this.duration || 0)
 83 |         }
 84 |       }
 85 |     },
 86 | 
 87 |     methods: {
 88 |       ok () {
 89 |         this.$emit('ok')
 90 |         this.$emit('update:show', false)
 91 |       },
 92 | 
 93 |       cancel () {
 94 |         this.$emit('cancel')
 95 |         this.$emit('update:show', false)
 96 |       },
 97 | 
 98 |       // 点击遮罩层
 99 |       clickMask () {
100 |         if (!this.force) {
101 |           this.cancel()
102 |         }
103 |       }
104 |     }
105 |   }
106 | </script>
107 | 
108 | <style scoped>
109 | .modal {
110 |   display: block;
111 | }
112 | 
113 | .modal-transition {
114 |   transition: all 0.6s ease;
115 | }
116 | 
117 | .modal-leave {
118 |   /* 样式没什么用，但可以让根标签的transitionEnd生效，以去掉modal-leave */
119 |   border-radius: 1px !important;
120 | }
121 | 
122 | .modal-transition .modal-dialog,
123 | .modal-transition .modal-backdrop {
124 |   transition: all 0.5s ease;
125 | }
126 | 
127 | .modal-enter .modal-dialog,
128 | .modal-leave .modal-dialog {
129 |   opacity: 0;
130 |   transform: translateY(-30%);
131 | }
132 | 
133 | .modal-enter .modal-backdrop,
134 | .modal-leave .modal-backdrop {
135 |   opacity: 0;
136 | }
137 | </style>
138 | 


--------------------------------------------------------------------------------
/static/css/application.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  3 | }
  4 | 
  5 | img.avatar, div.avatar {
  6 |   border-radius: 50%;
  7 |   width: 35px;
  8 |   height: 35px;
  9 |   line-height: 35px;
 10 | }
 11 | 
 12 | div.avatar {
 13 |   background-color: #FFEBEE;
 14 |   color: #555;
 15 |   font-size: 16px;
 16 |   margin-right: 10px;
 17 |   text-align: center;
 18 |   vertical-align: top;
 19 | }
 20 | 
 21 | /* console output format*/
 22 | pre, textarea.code {
 23 |   clear: left;
 24 |   min-height: 42px;
 25 |   padding: 15px;
 26 |   color: #f1f1f1;
 27 |   font-family: Monaco, monospace;
 28 |   font-size: 12px;
 29 |   line-height: 20px;
 30 |   white-space: pre-wrap;
 31 |   word-wrap: break-word;
 32 |   background-color: #222;
 33 |   counter-reset: line-numbering;
 34 |   margin-top: 0
 35 | }
 36 | 
 37 | pre, code, textarea.code {
 38 |   font-family: Monaco, Helvetica, Arial, sans-serif !important;
 39 | }
 40 | 
 41 | textarea.code {
 42 |   line-height: 1.8em
 43 | }
 44 | 
 45 | pre code p {
 46 |   margin: 0;
 47 | }
 48 | 
 49 | textarea.code {
 50 |   color: #edede3;
 51 |   padding: 10px;
 52 | }
 53 | 
 54 | pre.bash .green {
 55 |   color: #42c88a;
 56 | }
 57 | 
 58 | pre.bash .magenta {
 59 |   color: #65d8ee;
 60 | }
 61 | 
 62 | pre.bash .m35 {
 63 |   color: #42c88a;
 64 | }
 65 | 
 66 | pre.bash .yellow {
 67 |   color: #d6cc75;
 68 | }
 69 | 
 70 | pre.bash .cyan {
 71 |   color: #ab7fd1;
 72 | }
 73 | 
 74 | pre.bash .red {
 75 |   color: #ed5c5c;
 76 | }
 77 | 
 78 | pre.bash .bold {
 79 |   color: #fff;
 80 |   font-weight: 900;
 81 | }
 82 | 
 83 | pre.bash .underline {
 84 |   text-decoration: underline;
 85 | }
 86 | 
 87 | /* will pagination */
 88 | .digg_pagination {
 89 |   background: white;
 90 |   cursor: default;
 91 |   border-radius: 4px;
 92 |   /* self-clearing method: */
 93 | }
 94 | 
 95 | .digg_pagination a, .digg_pagination span, .digg_pagination em {
 96 |   text-decoration: none;
 97 |   line-height: 1.42857143;
 98 |   padding: 6px 12px;
 99 |   background: #fafafa;
100 |   color: #666;
101 |   border: 1px solid #ddd;
102 |   margin-right: 1px;
103 | }
104 | 
105 | .digg_pagination .disabled {
106 |   color: #777;
107 |   cursor: not-allowed;
108 |   background-color: #fff;
109 |   border: 1px solid #ddd;
110 | }
111 | 
112 | .digg_pagination .current {
113 |   font-style: normal;
114 |   font-weight: bold;
115 |   background: #337ab7;
116 |   color: white;
117 |   border: 1px solid #337ab7;
118 | }
119 | 
120 | .digg_pagination a, .digg_pagination span, .digg_pagination em {
121 |   text-decoration: none;
122 |   line-height: 1.42857143;
123 |   padding: 6px 12px;
124 |   background: #fafafa;
125 |   color: #666;
126 |   border: 1px solid #ddd
127 | }
128 | 
129 | .digg_pagination a:hover, .digg_pagination a:focus {
130 |   color: #000033;
131 |   border-color: #000033;
132 | }
133 | 
134 | .digg_pagination .page_info {
135 |   background: #2e6ab1;
136 |   color: white;
137 |   padding: 0.4em 0.6em;
138 |   width: 22em;
139 |   margin-bottom: 0.3em;
140 |   text-align: center;
141 | }
142 | 
143 | .digg_pagination .page_info b {
144 |   color: #000033;
145 |   background: #6aa6ed;
146 |   padding: 0.1em 0.25em;
147 | }
148 | 
149 | .digg_pagination:after {
150 |   content: ".";
151 |   display: block;
152 |   height: 0;
153 |   clear: both;
154 |   visibility: hidden;
155 | }
156 | 
157 | * html .digg_pagination {
158 |   height: 1%;
159 | }
160 | 
161 | *:first-child + html .digg_pagination {
162 |   overflow: hidden;
163 | }
164 | 
165 | /* rewrite form style*/
166 | .form-group label.has-warning {
167 |   color: #f39c12;
168 | }
169 | 
170 | .fa-success:before {
171 |   content: "\f00c";
172 | }
173 | 
174 | .fa-error:before {
175 |   content: "\f05e";
176 | }
177 | 


--------------------------------------------------------------------------------
/src/views/admin/fastlane_templates/List.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="box">
  3 |     <div class="box-header with-border">
  4 |       <h3 class="box-title">Fastlane Templates</h3>
  5 |       <div class="box-tools">
  6 |         <router-link class="btn btn-block btn-primary btn-sm" :to="{ name: 'fastlane_templates_new'}">
  7 |           New Template
  8 |         </router-link>
  9 |       </div>
 10 |     </div>
 11 |     <div class="box-body">
 12 |       <div class="dataTables_wrapper form-inline dt-bootstrap">
 13 |         <div class="row">
 14 |         </div>
 15 |         <div>
 16 |           <table-box :url="url" :reloadData="reloadData">
 17 |             <tr slot="ths">
 18 |               <th>ID</th>
 19 |               <th>Name</th>
 20 |               <th>Command</th>
 21 |               <th>Platform</th>
 22 |               <th>Updated Time</th>
 23 |               <th style="width:300px">Action</th>
 24 |             </tr>
 25 |             <template slot="item" slot-scope="props">
 26 |               <tr>
 27 |                 <td>
 28 |                   {{ props.item.id }}
 29 |                 </td>
 30 |                 <td>
 31 |                   {{ props.item.name }}
 32 |                 </td>
 33 |                 <td>
 34 |                   {{ props.item.command }}
 35 |                 </td>
 36 |                 <td>
 37 |                   {{ props.item.platform }}
 38 |                 </td>
 39 |                 <td>
 40 |                   {{ props.item.created_at }}
 41 |                 </td>
 42 |                 <td>
 43 |                   <router-link
 44 |                     :to="{ name: 'fastlane_templates_edit', params: { id: props.item.id }}"
 45 |                     class="btn btn-info">
 46 |                     Edit
 47 |                   </router-link>
 48 |                   <a href="javascript:" @click="confirmDelete(props.item.id)" class="btn btn-danger">Delete</a>
 49 |                 </td>
 50 |               </tr>
 51 |             </template>
 52 |           </table-box>
 53 |         </div>
 54 |       </div>
 55 |     </div>
 56 |     <confirm-modal :show.sync="showModal" @ok="doDelete">
 57 |                       <span slot="body">This action CANNOT be undone.
 58 |                         This will permanently delete the template and remove all collaborator associations.
 59 |                       </span>
 60 |     </confirm-modal>
 61 |   </div>
 62 | </template>
 63 | 
 64 | <script>
 65 |   import LoadingOverlay from '@/components/global/LoadingOverlay'
 66 |   import NetWorking from '@/utils/networking'
 67 |   import * as API from '@/constants/api'
 68 |   import TableBox from '@/components/global/TableBox'
 69 |   import ConfirmModal from '@/components/global/ConfirmModal'
 70 | 
 71 |   export default {
 72 |     components: {LoadingOverlay, TableBox, ConfirmModal},
 73 | 
 74 |     data () {
 75 |       return {
 76 |         showOverlay: false,
 77 |         showModal: false,
 78 |         currentEnvironment: '',
 79 |         currentTemplateId: '',
 80 |         fastlaneTemplates: [],
 81 |         url: API.fastlaneTemplates,
 82 |         reloadData: false
 83 |       }
 84 |     },
 85 | 
 86 |     methods: {
 87 |       doDelete () {
 88 |         this.showLoading()
 89 |         NetWorking
 90 |           .doDelete(API.fastlaneTemplate, {id: this.currentTemplateId})
 91 |           .then(() => {
 92 |             this.hideLoading()
 93 |             this.reloadData = true
 94 |           }, () => {
 95 |             this.hideLoading()
 96 |           })
 97 |       },
 98 | 
 99 |       showLoading () {
100 |         this.showOverlay = true
101 |       },
102 | 
103 |       hideLoading () {
104 |         this.showOverlay = false
105 |       },
106 | 
107 |       confirmDelete (id) {
108 |         this.currentTemplateId = id
109 |         this.showModal = true
110 |       }
111 |     }
112 |   }
113 | </script>
114 | 


--------------------------------------------------------------------------------
/src/views/projects/environments/configs/Fastlane.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="box box-solid">
  3 |     <loading-overlay v-show="showOverlay"></loading-overlay>
  4 |     <div class="nav-tabs-custom">
  5 |       <ul class="nav nav-tabs">
  6 |         <li :class="tabClass(file)" v-for="file in files">
  7 |           <a data-toggle="tab" :href="getAnchor(file)" @click="switchTab(file)">
  8 |             {{ file.name }}
  9 |           </a>
 10 |         </li>
 11 |         <li class="pull-right">
 12 |           <a class="text-muted" href="javascript:" @click="showEdit=true">
 13 |             <i class="fa fa-edit"></i>
 14 |           </a>
 15 |         </li>
 16 |       </ul>
 17 |       <div class="tab-content">
 18 |         <div class="tab-pane" :class="tabClass(file)" :id="getPaneId(file)" v-for="file in files">
 19 |         <pre class="tab_pre" id="tab_pre_0" v-highlightjs v-show="!showEdit">
 20 |           <code v-html="file.content" class="ruby"></code>
 21 |         </pre>
 22 |           <div class="tab_form" id="tab_form_0" v-show="showEdit">
 23 |             <form @submit.prevent="doSave" accept-charset="UTF-8" method="post">
 24 |               <div class="box-body">
 25 |                 <div class="form-group">
 26 |                   <textarea name="contents" id="contents" class="form-control code" rows="15" v-model="currentFile.content"></textarea>
 27 |                 </div>
 28 |               </div>
 29 |               <div class="box-footer">
 30 |                 <input class="btn btn-primary" type="submit" value="Save">
 31 |               </div>
 32 |             </form>
 33 |           </div>
 34 |         </div>
 35 |       </div>
 36 |     </div>
 37 |   </div>
 38 | </template>
 39 | 
 40 | <script>
 41 |   import NetWorking from '@/utils/networking'
 42 |   import * as API from '@/constants/api'
 43 |   import LoadingOverlay from '@/components/global/LoadingOverlay'
 44 | 
 45 |   export default {
 46 |     components: {LoadingOverlay},
 47 |     data () {
 48 |       return {
 49 |         showOverlay: false,
 50 |         showEdit: false,
 51 |         files: [],
 52 |         currentFile: {}
 53 |       }
 54 |     },
 55 | 
 56 |     created () {
 57 |       this.fetchData()
 58 |     },
 59 | 
 60 |     methods: {
 61 |       fetchData () {
 62 |         this.showLoading()
 63 |         NetWorking
 64 |           .doGet(API.environmentFastlane, {id: this.$route.params.project_id, env_id: this.$route.params.env_id}, this.currentFile)
 65 |           .then(response => {
 66 |             this.files = response.data.list
 67 |             this.currentFile = this.files[0]
 68 |             this.hideLoading()
 69 |           }, () => {
 70 |             this.hideLoading()
 71 |           })
 72 |       },
 73 | 
 74 |       doSave () {
 75 |         this.showLoading()
 76 |         NetWorking
 77 |           .doPut(API.environmentUpdateFastfile, {id: this.$route.params.project_id, env_id: this.$route.params.env_id}, this.currentFile)
 78 |           .then(() => {
 79 |             this.showEdit = false
 80 |             this.hideLoading()
 81 |           }, () => {
 82 |             this.hideLoading()
 83 |           })
 84 |       },
 85 | 
 86 |       switchTab (file) {
 87 |         this.showEdit = false
 88 |         this.currentFile = file
 89 |       },
 90 | 
 91 |       tabClass (file) {
 92 |         return this.currentFile.name === file.name ? 'active' : ''
 93 |       },
 94 | 
 95 |       getAnchor (file) {
 96 |         return '#tab_' + file.name
 97 |       },
 98 | 
 99 |       getPaneId (file) {
100 |         return 'tab_' + file.name
101 |       },
102 | 
103 |       showLoading () {
104 |         this.showOverlay = true
105 |       },
106 | 
107 |       hideLoading () {
108 |         this.showOverlay = false
109 |       }
110 |     }
111 |   }
112 | </script>
113 | 
114 | <style scoped>
115 |   .hljs {
116 |     display: block;
117 |     overflow-x: auto;
118 |     padding: 0.5em;
119 |     background: #232323;
120 |     color: #e6e1dc;
121 |   }
122 | </style>
123 | 


--------------------------------------------------------------------------------
/mock/data/dependencies.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "dependencies": {
  3 |     "total": 100,
  4 |     "list": [
  5 |       {
  6 |         "id": 8821,
  7 |         "name": "GMBase",
  8 |         "current_version": "0.1.1",
  9 |         "latest_version": "",
 10 |         "need_update": false,
 11 |         "projectId": 4
 12 |       },
 13 |       {
 14 |         "id": 8822,
 15 |         "name": "GMBaseSwift",
 16 |         "current_version": "3.0.1",
 17 |         "latest_version": "",
 18 |         "need_update": false,
 19 |         "projectId": 4
 20 |       },
 21 |       {
 22 |         "id": 8823,
 23 |         "name": "GMCache",
 24 |         "current_version": "0.1.1",
 25 |         "latest_version": "0.1.0",
 26 |         "need_update": false,
 27 |         "projectId": 4
 28 |       },
 29 |       {
 30 |         "id": 8824,
 31 |         "name": "GMFoundation",
 32 |         "current_version": "0.0.5",
 33 |         "latest_version": "",
 34 |         "need_update": false,
 35 |         "projectId": 4
 36 |       },
 37 |       {
 38 |         "id": 8825,
 39 |         "name": "GMHud",
 40 |         "current_version": "0.1.2",
 41 |         "latest_version": "",
 42 |         "need_update": false,
 43 |         "projectId": 4
 44 |       },
 45 |       {
 46 |         "id": 8826,
 47 |         "name": "GMKit",
 48 |         "current_version": "0.7.24",
 49 |         "latest_version": "",
 50 |         "need_update": false,
 51 |         "projectId": 4
 52 |       },
 53 |       {
 54 |         "id": 8827,
 55 |         "name": "GMKit/Category",
 56 |         "current_version": "0.7.24",
 57 |         "latest_version": "",
 58 |         "need_update": false,
 59 |         "projectId": 4
 60 |       },
 61 |       {
 62 |         "id": 8828,
 63 |         "name": "GMKit/FDFullscreenPopGesture",
 64 |         "current_version": "0.7.24",
 65 |         "latest_version": "",
 66 |         "need_update": false,
 67 |         "projectId": 4
 68 |       },
 69 |       {
 70 |         "id": 8829,
 71 |         "name": "GMKit/Kit",
 72 |         "current_version": "0.7.24",
 73 |         "latest_version": "",
 74 |         "need_update": false,
 75 |         "projectId": 4
 76 |       },
 77 |       {
 78 |         "id": 8830,
 79 |         "name": "GMKit/Protocol",
 80 |         "current_version": "0.7.24",
 81 |         "latest_version": "",
 82 |         "need_update": false,
 83 |         "projectId": 4
 84 |       },
 85 |       {
 86 |         "id": 8831,
 87 |         "name": "GMNetService",
 88 |         "current_version": "0.1.7",
 89 |         "latest_version": "",
 90 |         "need_update": false,
 91 |         "projectId": 4
 92 |       },
 93 |       {
 94 |         "id": 8832,
 95 |         "name": "GMNetworking",
 96 |         "current_version": "3.0.3",
 97 |         "latest_version": "0.2.2",
 98 |         "need_update": false,
 99 |         "projectId": 4
100 |       },
101 |       {
102 |         "id": 8833,
103 |         "name": "GMOCConstant",
104 |         "current_version": "0.0.3",
105 |         "latest_version": "",
106 |         "need_update": false,
107 |         "projectId": 4
108 |       },
109 |       {
110 |         "id": 8834,
111 |         "name": "GMPhobos",
112 |         "current_version": "0.3.7",
113 |         "latest_version": "0.2.10",
114 |         "need_update": false,
115 |         "projectId": 4
116 |       },
117 |       {
118 |         "id": 8835,
119 |         "name": "GMRefresh",
120 |         "current_version": "0.1.5",
121 |         "latest_version": "",
122 |         "need_update": false,
123 |         "projectId": 4
124 |       },
125 |       {
126 |         "id": 8836,
127 |         "name": "GMSwiftConstant",
128 |         "current_version": "0.3.0",
129 |         "latest_version": "",
130 |         "need_update": false,
131 |         "projectId": 4
132 |       },
133 |       {
134 |         "id": 8837,
135 |         "name": "GMUtil",
136 |         "current_version": "0.3.0",
137 |         "latest_version": "",
138 |         "need_update": false,
139 |         "projectId": 4
140 |       },
141 |       {
142 |         "id": 8810,
143 |         "name": "AFNetworking",
144 |         "current_version": "3.1.0",
145 |         "latest_version": "",
146 |         "need_update": false,
147 |         "projectId": 4
148 |       }
149 |     ]
150 |   }
151 | }
152 | 


--------------------------------------------------------------------------------
/src/views/projects/builds/Detail.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="box">
  3 |     <loading-overlay v-show="showOverlay"></loading-overlay>
  4 |     <div class="box-header" id="delivery_id">
  5 |       <h3 class="box-title">{{ buildId }}</h3>
  6 |     </div>
  7 |     <div class="box-body">
  8 |       <div class="row">
  9 |         <div class="col-lg-12 log-container">
 10 |           <pre class="bash" v-html="buildLog"></pre>
 11 |           <a class="float-icon fa fa-arrow-down bg-gray" href="javascript:" @click="scrollToBottom()"></a>
 12 |         </div>
 13 |       </div>
 14 |     </div>
 15 |     <div class="box-footer">
 16 |       <button class="btn btn-info" @click="markStatusSuccess">Mark as Success</button>
 17 |       <button class="btn btn-danger" @click="markStatusFailed">Mark as Failed</button>
 18 |     </div>
 19 |   </div>
 20 | </template>
 21 | 
 22 | <script>
 23 |   import NetWorking from '@/utils/networking'
 24 |   import * as API from '@/constants/api'
 25 |   import LoadingOverlay from '@/components/global/LoadingOverlay'
 26 |   import Enum from '@/constants/enum'
 27 | 
 28 |   export default {
 29 |     components: {LoadingOverlay},
 30 | 
 31 |     data () {
 32 |       return {
 33 |         showOverlay: false,
 34 |         buildId: this.$route.params.build_id,
 35 |         pathParams: {id: this.$route.params.project_id, build_id: this.$route.params.build_id},
 36 |         buildLog: '',
 37 |         offset: 0,
 38 |         shouldPoll: true,
 39 |         fetching: false,
 40 |         interval: null
 41 |       }
 42 |     },
 43 | 
 44 |     created () {
 45 |       this.pollLog()
 46 |     },
 47 | 
 48 |     beforeDestroy () {
 49 |       window.clearInterval(this.interval)
 50 |     },
 51 | 
 52 |     methods: {
 53 |       fetchData () {
 54 |         if (this.offset === 0) {
 55 |           this.showLoading()
 56 |         }
 57 |         this.fetching = true
 58 |         NetWorking
 59 |           .doGet(API.buildLog, this.pathParams, {offset: this.offset})
 60 |           .then(response => {
 61 |               this.buildLog = this.buildLog + response.data.log
 62 |               this.shouldPoll = response.data.should_poll
 63 |               this.offset = response.data.offset
 64 |               this.fetching = false
 65 |               this.hideLoading()
 66 |               if (!this.shouldPoll) {
 67 |                 window.clearInterval(this.interval)
 68 |               }
 69 |             }, () => {
 70 |               this.hideLoading()
 71 |               this.fetching = false
 72 |               window.clearInterval(this.interval)
 73 |             }
 74 |           )
 75 |       },
 76 | 
 77 |       markStatusSuccess () {
 78 |         this._markStatus(Enum.BuildStatus.Success)
 79 |       },
 80 | 
 81 |       markStatusFailed () {
 82 |         this._markStatus(Enum.BuildStatus.Failed)
 83 |       },
 84 | 
 85 |       _markStatus (status) {
 86 |         this.showLoading()
 87 |         NetWorking
 88 |           .doGet(API.buildMarkStatus, this.pathParams, {status: status})
 89 |           .then(() => {
 90 |               this.hideLoading()
 91 |               this.$router.replace({name: 'builds'})
 92 |             }, () => {
 93 |               this.hideLoading()
 94 |             }
 95 |           )
 96 |       },
 97 | 
 98 |       showLoading () {
 99 |         this.showOverlay = true
100 |       },
101 | 
102 |       hideLoading () {
103 |         this.showOverlay = false
104 |       },
105 | 
106 |       pollLog () {
107 |         this.interval = setInterval(function () {
108 |           if (this.shouldPoll && !this.fetching) {
109 |             this.fetchData()
110 |           }
111 |         }.bind(this), 1000)
112 |       },
113 | 
114 |       scrollToBottom () {
115 |         this.$nextTick(() => {
116 |           let body = document.documentElement || document.body
117 |           body.scrollTop = body.scrollHeight
118 |         })
119 |       }
120 |     }
121 |   }
122 | </script>
123 | 
124 | <style scoped>
125 |   a.float-icon {
126 |     display: block;
127 |     position: fixed;
128 |     bottom: 200px;
129 |     right: 30px;
130 |     width: 55px;
131 |     height: 55px;
132 |     border-radius: 50%;
133 |     text-align: center;
134 |     line-height: 55px;
135 |     font-size: 20px;
136 |   }
137 | </style>
138 | 


--------------------------------------------------------------------------------
/src/utils/networking.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Created by Thierry on 2017/4/14.
  3 |  */
  4 | import axios from 'axios'
  5 | 
  6 | export default {
  7 | 
  8 |   httpMethod: {
  9 |     GET: 'get',
 10 |     POST: 'post',
 11 |     PUT: 'put',
 12 |     DELETE: 'delete'
 13 |   },
 14 | 
 15 |   instance: axios.create({
 16 |     baseURL: '/api/v1/',
 17 |     timeout: 10000
 18 |   }),
 19 | 
 20 |   /**
 21 |    *
 22 |    * @param url
 23 |    * @param pathParams
 24 |    * @param options
 25 |    * @returns {*|Promise}
 26 |    */
 27 |   doGet(url, pathParams = null, options = null) {
 28 |     return this.doRequest(url, this.httpMethod.GET, pathParams, null, options)
 29 |   },
 30 | 
 31 |   /**
 32 |    * Http Post
 33 |    * @param url
 34 |    * @param pathParams
 35 |    * @param body
 36 |    * @param options
 37 |    * @returns {*|Promise}
 38 |    */
 39 |   doPost(url, pathParams = null, body = null, options = null) {
 40 |     return this.doRequest(url, this.httpMethod.POST, pathParams, body, options)
 41 |   },
 42 | 
 43 |   /**
 44 |    * Http Put
 45 |    * @param url
 46 |    * @param pathParams
 47 |    * @param body
 48 |    * @param options
 49 |    * @returns {*|Promise}
 50 |    */
 51 |   doPut(url, pathParams = null, body = null, options = null) {
 52 |     return this.doRequest(url, this.httpMethod.PUT, pathParams, body, options)
 53 |   },
 54 | 
 55 |   /**
 56 |    * Http Delete
 57 |    * @param url
 58 |    * @param pathParams
 59 |    * @param options
 60 |    * @returns {*|Promise}
 61 |    */
 62 |   doDelete(url, pathParams = null, options = null) {
 63 |     return this.doRequest(url, this.httpMethod.DELETE, pathParams, null, options)
 64 |   },
 65 | 
 66 |   /**
 67 |    * Http Request
 68 |    * @param url
 69 |    * @param method
 70 |    * @param pathParams
 71 |    * @param body
 72 |    * @param options
 73 |    * @returns {Promise}
 74 |    */
 75 |   doRequest(url, method, pathParams, body, options) {
 76 |     let wrapURL = this._wrapUrl(url, pathParams)
 77 |     let request = null
 78 |     switch (method) {
 79 |       case this.httpMethod.GET: {
 80 |         if (options !== null) {
 81 |           request = this.instance.get(wrapURL, {params: options})
 82 |         } else {
 83 |           request = this.instance.get(wrapURL)
 84 |         }
 85 |         break
 86 |       }
 87 |       case this.httpMethod.POST: {
 88 |         request = this.instance.post(wrapURL, body, options)
 89 |         break
 90 |       }
 91 |       case this.httpMethod.PUT: {
 92 |         request = this.instance.put(wrapURL, body, options)
 93 |         break
 94 |       }
 95 |       case this.httpMethod.DELETE: {
 96 |         request = this.instance.delete(wrapURL, options)
 97 |         break
 98 |       }
 99 |     }
100 |     return this._requestPromise(request)
101 |   },
102 | 
103 |   /**
104 |    * Request Promise
105 |    * @param request {Promise} Axios Http Promise
106 |    * @returns {Promise}
107 |    * @private
108 |    */
109 |   _requestPromise(request) {
110 |     console.log('_requestPromise')
111 |     return new Promise(function (resolve, reject) {
112 |       request.then(response => {
113 |         if (response.data.status === 0) {
114 |           resolve(response.data)
115 |         } else {
116 |           reject(response.data.message)
117 |         }
118 |       }, error => {
119 |         reject(error)
120 |       })
121 |     })
122 |   },
123 | 
124 |   /**
125 |    * 从URL匹配出参数pathParams
126 |    * @param {string} url
127 |    * @param {object} params
128 |    * @returns {string}
129 |    * @private
130 |    */
131 |   _wrapUrl(url, params) {
132 |     if (params !== null) {
133 |       let matches = this._getMatches(url)
134 |       for (let match of matches) {
135 |         let value = params[match.replace(':', '')]
136 |         if (value !== null) {
137 |           url = url.replace(match, value)
138 |         }
139 |       }
140 |     }
141 |     return url
142 |   },
143 | 
144 |   /**
145 |    * 正则Group匹配
146 |    * @param {string} string
147 |    * @returns {Array}
148 |    * @private
149 |    */
150 |   _getMatches(string) {
151 |     let matches = []
152 |     let regex = /(:[a-z_A-Z]+)/
153 |     let match = regex.exec(string)
154 |     while (match !== null) {
155 |       matches.push(match[1])
156 |       string = string.replace(match[1], '')
157 |       match = regex.exec(string)
158 |     }
159 |     return matches
160 |   }
161 | 
162 | }
163 | 


--------------------------------------------------------------------------------
/src/router/routes.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Thierry on 2017/6/14.
 3 |  */
 4 | import Layout from '@/views/Layout'
 5 | import Dashboard from '@/views/dashboard/List'
 6 | import Jobs from '@/views/jobs/Index'
 7 | import Activity from '@/views/activity/List'
 8 | import Members from '@/views/members/List'
 9 | import Projects from '@/views/projects/List'
10 | 
11 | import ProjectLayout from '@/views/projects/Layout'
12 | import ProjectNew from '@/views/projects/New'
13 | import ProjectEdit from '@/views/projects/Edit'
14 | import ProjectHome from '@/views/projects/Home'
15 | 
16 | import Builds from '@/views/projects/builds/List'
17 | import BuildInfo from '@/views/projects/builds/Info'
18 | 
19 | import Environments from '@/views/projects/environments/List'
20 | import EnvironmentCLone from '@/views/projects/environments/Clone'
21 | import EnvironmentNew from '@/views/projects/environments/New'
22 | import EnvironmentEdit from '@/views/projects/environments/Edit'
23 | import Configs from '@/views/projects/environments/configs/Index'
24 | import ConfigGitClone from '@/views/projects/environments/configs/GitClone'
25 | import ConfigFastlane from '@/views/projects/environments/configs/Fastlane'
26 | import ServiceList from '@/views/projects/environments/configs/services/List'
27 | import ServiceEdit from '@/views/projects/environments/configs/services/Edit'
28 | 
29 | import BuildDetail from '@/views/projects/builds/Detail'
30 | 
31 | import Login from '@/views/account/Login'
32 | 
33 | import AdminLayout from '@/views/admin/Layout'
34 | import AdminFastlaneTemplates from '@/views/admin/fastlane_templates/List'
35 | import AdminFastlaneTemplatesNew from '@/views/admin/fastlane_templates/New'
36 | import AdminFastlaneTemplatesEdit from '@/views/admin/fastlane_templates/Edit'
37 | 
38 | const loginRoutes = {
39 |   path: '/login',
40 |   name: 'login',
41 |   component: Login
42 | }
43 | 
44 | const dashboardRoutes = {
45 |   path: '/', name: 'root', component: Layout, redirect: '/dashboard',
46 |   children: [
47 |     {path: 'dashboard', name: 'dashboard', component: Dashboard, meta: {contentHeader: {title: 'Dashboard', subTitle: 'Control panel'}}},
48 |     {path: 'jobs', name: 'jobs', component: Jobs, meta: {contentHeader: {title: 'Background Jobs', subTitle: 'Sidekiq'}}},
49 |     {path: 'activity', name: 'activity', component: Activity, meta: {contentHeader: {title: 'Activity', subTitle: 'Executing jobs'}}},
50 |     {path: 'members', name: 'members', component: Members, meta: {contentHeader: {title: 'Member', subTitle: 'list'}}},
51 |     {path: 'project_list', name: 'project_list', component: Projects, meta: {contentHeader: {title: 'Project', subTitle: 'list'}}},
52 |     {path: 'project_new', name: 'project_new', component: ProjectNew, meta: {contentHeader: {title: 'Project', subTitle: 'new'}}}
53 |   ]
54 | }
55 | 
56 | const adminRoutes = {
57 |   path: '/admin', name: 'admin', component: AdminLayout, redirect: '/admin/fastlane_templates',
58 |   children: [
59 |     {path: 'fastlane_templates', name: 'fastlane_templates', component: AdminFastlaneTemplates, meta: {contentHeader: {title: 'Admin', subTitle: 'Fastlane Templates'}}},
60 |     {path: 'fastlane_templates/new', name: 'fastlane_templates_new', component: AdminFastlaneTemplatesNew, meta: {contentHeader: {title: 'Admin', subTitle: 'Fastlane Templates'}}},
61 |     {path: 'fastlane_templates/:id/edit', name: 'fastlane_templates_edit', component: AdminFastlaneTemplatesEdit, meta: {contentHeader: {title: 'Admin', subTitle: 'Fastlane Templates'}}}
62 |   ]
63 | }
64 | 
65 | const projectRoutes = {
66 |   path: '/projects/:project_id', component: ProjectLayout,
67 |   children: [
68 |     {name: 'home', path: 'home', component: ProjectHome},
69 |     {name: 'setting', path: 'setting', component: ProjectEdit},
70 |     {name: 'environments', path: 'environments', component: Environments},
71 |     {name: 'builds', path: 'builds', component: Builds},
72 |     {name: 'build_detail', path: 'builds/:build_id', component: BuildDetail},
73 |     {name: 'build_info', path: 'environments/:env_id/build_info', component: BuildInfo},
74 |     {name: 'environments_new', path: 'environments/new', component: EnvironmentNew},
75 |     {name: 'environments_edit', path: 'environments/:env_id/edit', component: EnvironmentEdit},
76 |     {name: 'environments_clone', path: 'environments/:env_id/clone', component: EnvironmentCLone},
77 |     {
78 |       name: 'environments_config',
79 |       path: 'environments/:env_id/config',
80 |       component: Configs,
81 |       children: [
82 |         {name: 'git_clone', path: 'git_clone', component: ConfigGitClone},
83 |         {name: 'fastlane', path: 'fastlane', component: ConfigFastlane},
84 |         {name: 'services', path: 'services', component: ServiceList},
85 |         {name: 'services_edit', path: 'services/:service_id/edit', component: ServiceEdit}
86 |       ]
87 |     }
88 |   ]
89 | }
90 | 
91 | export default [
92 |   loginRoutes,
93 |   dashboardRoutes,
94 |   projectRoutes,
95 |   adminRoutes
96 | ]
97 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Falcon
  2 | > 基于Vue2和AdminLTE的移动客户端自动化平台（前端）
  3 | 
  4 | ## 关于Falcon
  5 | 从16年初开始到现在，我们的前端团队将 Vue 作为主框架已经有一年多的时间了，而作为前端工程师出身的我，知识体系还停留在远古的 Prototype 和 jQuery 上，说起来也是一件十分惭愧的事情。
  6 | 
  7 | 于是我下定决心花一段时间由浅入深地学习一下这个目前非常流行的框架，同时恶补一下ES6的知识。
  8 | 
  9 | 本人一直赞同并践行一个观点：
 10 | 
 11 | > 学习一项新技术的最佳途径就是动手写一个完整的项目。
 12 | 
 13 | 因为在这个项目中你将遇到几乎所有的问题，那么解决这些问题的过程就是你不断提高，融会贯通的过程。
 14 | 
 15 | 学习 Vue 也不例外，恰好最近正在计划为内部的自动化平台 Jaguar 提供 iOS 和 Android 的版本，以方便大家在移动端进行使用，那么用 Native 去写显然有些浪费资源，而做一个Hybrid的跨平台App应该是最经济的方式了，所以最终的计划是将 Jaguar 进行前后端分离，然后在前端使用Vue框架，并使其同时能够支持浏览器，iOS 和 Android 平台。
 16 | 
 17 | 为了和 Jaguar（美洲豹）相对应，最终决定给项目取名叫 Falcon，即：猎鹰，和 Jaguar 一样都是速度飞快的动物。
 18 | 
 19 | 经过一段时间的规划和整理，可以预计出最终的版本大约包含40个左右的页面，30 个左右的组件，这么算来也可以称之为一个不大不小的项目了。
 20 | 
 21 | 最终的界面大概如下：
 22 | ![Dashboard.png](http://upload-images.jianshu.io/upload_images/1639341-feeaad585cad9bba.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 23 | 
 24 | ![Project.png](http://upload-images.jianshu.io/upload_images/1639341-00dfe3a7d6767857.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 25 | 
 26 | [Vue实战](http://www.jianshu.com/nb/13169691)将事无巨细的记录我在完成整个项目过程中对Vue的从浅到深理解，遇到的点点滴滴问题，希望可以帮助正在入门或打算尝试Vue框架的同学们。
 27 | 
 28 | ## 如何运行
 29 | 由于后端 Jaguar 服务配置起来比较繁琐，为了简化大家的使用，我已经将部分 API 放置在了 Easy-Mock 服务上（不断更新中），运行方法如下：
 30 | 
 31 | ### 配置 proxy
 32 | 首先保证，vue.config.js 中 proxy 的内容如下（注释部分）：
 33 | 
 34 | ```
 35 |     proxy: {
 36 |             '/api/v1': {
 37 |               changeOrigin: true,
 38 |               secure: false,
 39 |               target: 'https://www.easy-mock.com/mock/5b18ccb77dddfa3903693dba'
 40 |             },
 41 |             '/sidekiq': {
 42 |               changeOrigin: true,
 43 |               secure: false,
 44 |               target: 'http://localhost:3000'
 45 |             }
 46 |           }
 47 | ```
 48 | 
 49 | ### 运行项目：
 50 | 
 51 | * 安装npm依赖的库
 52 | 
 53 | ```
 54 | npm install
 55 | ```
 56 | 
 57 | * 运行服务
 58 | 
 59 | ```
 60 | npm run serve
 61 | ```
 62 | 
 63 | * 在浏览器中访问：[http://localhost:8080/#/](http://localhost:8080/#/)
 64 | 
 65 | ### 登录
 66 | 
 67 | 登录页面的用户名（邮箱）和密码可以随意填写
 68 | 
 69 | ## 项目结构
 70 | 
 71 | ```
 72 | .
 73 | ├── App.vue
 74 | ├── assets
 75 | │   └── logo.png
 76 | ├── components
 77 | │   ├── global
 78 | │   │   ├── Alert.vue
 79 | │   │   ├── ConfirmModal.vue
 80 | │   │   ├── ContentFooter.vue
 81 | │   │   ├── ContentHeader.vue
 82 | │   │   ├── LoadingOverlay.vue
 83 | │   │   ├── NavBar.vue
 84 | │   │   ├── Pagination.vue
 85 | │   │   ├── SideBar.vue
 86 | │   │   ├── SideBarItem.vue
 87 | │   │   ├── TableBox.vue
 88 | │   │   └── UserPanel.vue
 89 | │   └── projects
 90 | │       ├── Dependency.vue
 91 | │       ├── EnvForm.vue
 92 | │       ├── Form.vue
 93 | │       ├── Info.vue
 94 | │       └── SideBar.vue
 95 | ├── constants
 96 | │   ├── api.js
 97 | │   └── enum.js
 98 | ├── main.js
 99 | ├── router
100 | │   ├── index.js
101 | │   └── routes.js
102 | ├── store
103 | │   ├── actions.js
104 | │   ├── index.js
105 | │   ├── modules
106 | │   │   ├── alert.js
107 | │   │   ├── current-platform.js
108 | │   │   ├── current-project.js
109 | │   │   └── current-user.js
110 | │   └── mutation-types.js
111 | ├── utils
112 | │   ├── networking.js
113 | │   └── storage.js
114 | └── views
115 |     ├── Dashboard.vue
116 |     ├── Layout.vue
117 |     ├── account
118 |     │   └── Login.vue
119 |     ├── guardian
120 |     │   └── List.vue
121 |     ├── job
122 |     │   └── Index.vue
123 |     └── projects
124 |         ├── Edit.vue
125 |         ├── Home.vue
126 |         ├── Layout.vue
127 |         ├── New.vue
128 |         ├── builds
129 |         │   ├── CheckDependency.vue
130 |         │   ├── Detail.vue
131 |         │   ├── List.vue
132 |         │   ├── PreBuildBeta.vue
133 |         │   └── PreBuildLib.vue
134 |         ├── environments
135 |         │   ├── Clone.vue
136 |         │   ├── List.vue
137 |         │   ├── New.vue
138 |         │   └── configs
139 |         │       ├── Fastlane.vue
140 |         │       ├── GitClone.vue
141 |         │       ├── Info.vue
142 |         │       └── List.vue
143 |         └── services
144 |             ├── Edit.vue
145 |             └── List.vue
146 | 
147 | 18 directories, 55 files
148 | ```
149 | 
150 | ## 功能
151 | 目前项目还在不断的开发中，已经包含的功能如下：
152 | 
153 | - [x] 登录
154 | - [x] 登出
155 | - [x] 项目列表展示
156 | - [x] 新增项目
157 | - [x] 项目详情
158 | - [x] 项目依赖第三方库列表
159 | - [x] 项目下新增构建环境
160 | - [x] 配置环境
161 | - [x] 项目构建列表
162 | - [x] 项目构建前配置
163 | - [x] 第三方服务（Bugly，Fir）列表
164 | - [x] 项目设置
165 | - [x] 用户列表
166 | - ...
167 | 
168 | ## 链接
169 | 
170 | ### 文章
171 | 
172 | * [Vue实战（一）Falcon计划](http://www.jianshu.com/p/52eac947cd96)
173 | * [Vue实战（二）框架和环境](http://www.jianshu.com/p/a6e37818fd9a)
174 | * [Vue实战（三）Mock服务JSON Server](http://www.jianshu.com/p/7094c477207d)
175 | * [Vue实战（四）组件和路由](http://www.jianshu.com/p/153f847fa2aa)
176 | * [Vue实战（五）网络层拦截器与全局异常信息展示](http://www.jianshu.com/p/0f3f27f33a6f)
177 | 
178 | ### 三方工具
179 | 
180 | * [AdminLTE](https://github.com/almasaeed2010/AdminLTE)
181 | * [JSON Server](https://github.com/typicode/json-server)
182 | * [Vue Highlightjs](https://github.com/metachris/vue-highlightjs)
183 | 
184 | ## License
185 | MIT licensed.
186 | 


--------------------------------------------------------------------------------
/src/views/projects/environments/configs/GitClone.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="box box-solid">
  3 |     <loading-overlay v-show="showOverlay"></loading-overlay>
  4 |     <div class="box-body" v-show="cloneButtonShow">
  5 |       <button class="btn btn-block btn-primary" role="button" @click="doClone()">
  6 |         Clone Project
  7 |       </button>
  8 |     </div>
  9 |     <div class="nav-tabs-custom">
 10 |       <ul class="nav nav-tabs">
 11 |         <li id="tab-branch" :class="{ active: type === 'branch' }">
 12 |           <a href="javascript:" @click="switchTab('branch')">
 13 |             Branches
 14 |           </a>
 15 |         </li>
 16 |         <li id="tab-tag" :class="{ active: type === 'tag' }">
 17 |           <a href="javascript:" @click="switchTab('tag')">
 18 |             Tags
 19 |           </a>
 20 |         </li>
 21 |       </ul>
 22 |       <table-box :url="url" :pathParams="pathParams" :reloadData.sync="reloadData">
 23 |         <tr slot="ths">
 24 |           <th>Name</th>
 25 |           <th>Full</th>
 26 |           <th>Action</th>
 27 |         </tr>
 28 |         <template slot="item" slot-scope="props">
 29 |           <tr>
 30 |             <td>
 31 |               {{ props.item.name }}
 32 |             </td>
 33 |             <td>
 34 |               {{ props.item.full }}
 35 |             </td>
 36 |             <td>
 37 |               <button class="btn btn-block btn-success" v-if="props.item.current">Current Branch</button>
 38 |               <button class="btn btn-block btn-primary" :disabled="buttonDisabled" @click="chooseBranch(props.item.name, props.item.full)"
 39 |                       v-else>Choose
 40 |               </button>
 41 |             </td>
 42 |           </tr>
 43 |         </template>
 44 |       </table-box>
 45 |     </div>
 46 |   </div>
 47 | </template>
 48 | 
 49 | <script>
 50 |   import NetWorking from '@/utils/networking'
 51 |   import * as API from '@/constants/api'
 52 |   import LoadingOverlay from '@/components/global/LoadingOverlay'
 53 |   import TableBox from '@/components/global/TableBox'
 54 |   import Enum from '@/constants/enum'
 55 | 
 56 |   export default {
 57 |     components: {LoadingOverlay, TableBox},
 58 | 
 59 |     data () {
 60 |       return {
 61 |         type: 'branch',
 62 |         interval: null,
 63 |         fetching: false,
 64 |         shouldPoll: true,
 65 |         showOverlay: false,
 66 |         buttonDisabled: false,
 67 |         cloneButtonShow: true,
 68 |         environment: {},
 69 |         reloadData: false,
 70 |         url: API.environmentGitBranch,
 71 |         pathParams: {
 72 |           id: this.$route.params.project_id,
 73 |           env_id: this.$route.params.env_id
 74 |         }
 75 |       }
 76 |     },
 77 | 
 78 |     created () {
 79 |       this.fetchData()
 80 |     },
 81 | 
 82 |     beforeDestroy () {
 83 |       window.clearInterval(this.interval)
 84 |     },
 85 | 
 86 |     methods: {
 87 | 
 88 |       fetchData () {
 89 |         this.fetching = true
 90 |         this.showLoading()
 91 |         NetWorking
 92 |           .doGet(API.environment, {id: this.$route.params.project_id, env_id: this.$route.params.env_id})
 93 |           .then(response => {
 94 |             this.environment = response.data
 95 |             this.fetching = false
 96 |             if (this.environment.clone_status === Enum.CloneStatus.Processing) {
 97 |               this.shouldPoll = true
 98 |               this.pollLog()
 99 |             } else {
100 |               this.shouldPoll = false
101 |               this.reloadData = true
102 |               this.hideLoading()
103 |             }
104 |           }, () => {
105 |             this.fetching = false
106 |             this.hideLoading()
107 |           })
108 |       },
109 | 
110 |       doClone () {
111 |         this.showLoading()
112 |         NetWorking
113 |           .doGet(API.environmentGitClone, this.pathParams)
114 |           .then(response => {
115 |             this.environment = response.data
116 |             if (this.environment.clone_status === Enum.CloneStatus.Processing) {
117 |               this.fetchData()
118 |             } else {
119 |               this.hideLoading()
120 |             }
121 |           }, () => {
122 |             this.hideLoading()
123 |           })
124 |       },
125 | 
126 |       chooseBranch (name, full) {
127 |         this.showLoading()
128 |         let url = API.environmentChooseBranch
129 |         let options = {branch: name, full: full}
130 |         if (this.type === 'tag') {
131 |           url = API.environmentChooseTag
132 |           options = {tag: name}
133 |         }
134 |         NetWorking
135 |           .doPut(url, this.pathParams, options)
136 |           .then(() => {
137 |             this.hideLoading()
138 |             this.reloadData = true
139 |           }, () => {
140 |             this.hideLoading()
141 |           })
142 |       },
143 | 
144 |       switchTab (type) {
145 |         this.type = type
146 |         this.url = type === 'branch' ? API.environmentGitBranch : API.environmentGitTag
147 |         this.reloadData = true
148 |       },
149 | 
150 |       showLoading () {
151 |         this.showOverlay = true
152 |       },
153 | 
154 |       hideLoading () {
155 |         if (this.environment.clone_status === Enum.CloneStatus.Success) {
156 |           this.cloneButtonShow = false
157 |         }
158 |         this.showOverlay = false
159 |       },
160 | 
161 |       pollLog () {
162 |         this.interval = setInterval(function () {
163 |           if (this.shouldPoll && !this.fetching) {
164 |             this.fetchData()
165 |           }
166 |         }.bind(this), 5000)
167 |       }
168 |     }
169 |   }
170 | </script>
171 | 


--------------------------------------------------------------------------------
/src/views/projects/builds/List.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="box">
  3 |     <div class="box-header with-border">
  4 |       <h3 class="box-title">Builds</h3>
  5 |     </div>
  6 |     <div class="box-body">
  7 |       <div class="dataTables_wrapper form-inline dt-bootstrap">
  8 |         <div class="row">
  9 |           <div class="col-sm-6">
 10 |             <div class="dataTables_length">
 11 |               <label>
 12 |                 Choose Environment
 13 |                 <select name="environments" class="form-control input-sm" v-model="currentEnvironment">
 14 |                   <option v-for="environment in environments" :value="environment.id">{{ environment.name }}</option>
 15 |                 </select>
 16 |               </label>
 17 |             </div>
 18 |           </div>
 19 |         </div>
 20 |         <div>
 21 |           <table-box :url="url" :pathParams="pathParams" :options="options" :reloadData.sync="reloadData">
 22 |             <tr slot="ths">
 23 |               <th>ID</th>
 24 |               <th>Status</th>
 25 |               <th>Version</th>
 26 |               <th>Operator</th>
 27 |               <th>Environment</th>
 28 |               <th>Release Notes</th>
 29 |               <th>Updated Time</th>
 30 |               <th style="width:300px">Action</th>
 31 |             </tr>
 32 |             <template slot="item" slot-scope="props">
 33 |               <tr>
 34 |                 <td>
 35 |                   {{ props.item.id }}
 36 |                 </td>
 37 |                 <td>
 38 |                   <span class="label" :class="getStatusText(props.item.status)">{{ props.item.status }}</span>
 39 |                 </td>
 40 |                 <td>
 41 |                   <div>
 42 |                     {{ props.item.version }}
 43 |                   </div>
 44 |                   <div>
 45 |                     {{ props.item.number }}
 46 |                   </div>
 47 |                 </td>
 48 |                 <td>
 49 |                   {{ props.item.operator.name }}
 50 |                 </td>
 51 |                 <td>
 52 |                   {{ props.item.environment.name }}
 53 |                 </td>
 54 |                 <td>
 55 |                   <ul v-for="note in props.item.release_notes">
 56 |                     <li>{{ note.content }}</li>
 57 |                   </ul>
 58 |                 </td>
 59 |                 <td>
 60 |                   {{ props.item.updated_at }}
 61 |                 </td>
 62 |                 <td>
 63 |                   <div class="btn-group">
 64 |                     <router-link
 65 |                       :to="{ name: 'build_detail', params: { id: $route.params.id, env_id:$route.params.env_id, build_id:props.item.id }}"
 66 |                       class="btn btn-block btn-info">
 67 |                       Detail
 68 |                     </router-link>
 69 |                   </div>
 70 |                   <div class="btn-group" v-show="canDownload(props.item)">
 71 |                     <button class="btn btn-block btn-info" @click="download(props.item.id)">Download</button>
 72 |                   </div>
 73 |                   <div class="btn-group">
 74 |                     <button class="btn btn-block btn-danger" @click="remove(props.item.id)">Remove</button>
 75 |                   </div>
 76 |                 </td>
 77 |               </tr>
 78 |             </template>
 79 |           </table-box>
 80 |         </div>
 81 |       </div>
 82 |     </div>
 83 |   </div>
 84 | </template>
 85 | 
 86 | <script>
 87 |   import * as API from '@/constants/api'
 88 |   import NetWorking from '@/utils/networking'
 89 |   import TableBox from '@/components/global/TableBox'
 90 |   import Enum from '@/constants/enum'
 91 | 
 92 |   export default {
 93 |     components: {TableBox},
 94 | 
 95 |     data () {
 96 |       return {
 97 |         project_id: '',
 98 |         currentEnvironment: '',
 99 |         environments: [],
100 |         url: API.projectBuilds,
101 |         pathParams: {id: this.$route.params.project_id},
102 |         options: {environment_id: this.currentEnvironment},
103 |         reloadData: false
104 |       }
105 |     },
106 | 
107 |     created () {
108 |       this.project_id = this.$route.params.project_id
109 |       this.fetchEnvironments()
110 |     },
111 | 
112 |     watch: {
113 |       currentEnvironment (value) {
114 |         this.options.environment_id = value
115 |         this.reloadData = true
116 |       }
117 |     },
118 | 
119 |     methods: {
120 |       fetchEnvironments () {
121 |         NetWorking.doGet(API.environments, {id: this.project_id})
122 |           .then(response => {
123 |             this.environments = [{'id': '', name: 'All'}].concat(response.data.list)
124 |           })
125 |       },
126 | 
127 |       getStatusText (status) {
128 |         switch (status) {
129 |           case 'failed': {
130 |             return 'bg-red'
131 |           }
132 |           case 'success': {
133 |             return 'bg-green'
134 |           }
135 |           case 'canceled': {
136 |             return 'bg-yellow'
137 |           }
138 |           case 'processing': {
139 |             return 'bg-blue'
140 |           }
141 |         }
142 |       },
143 | 
144 |       download (buildId) {
145 |         NetWorking
146 |           .doDownload(API.buildDownload, {id: this.project_id, build_id: buildId})
147 |       },
148 | 
149 |       remove (buildId) {
150 |         NetWorking
151 |           .doDelete(API.build, {id: this.project_id, build_id: buildId})
152 |           .then(() => {
153 |             this.reloadData = true
154 |           })
155 |       },
156 | 
157 |       canDownload (build) {
158 |         return build.status === Enum.BuildStatus.Success
159 |       }
160 |     }
161 | 
162 |   }
163 | </script>
164 | 


--------------------------------------------------------------------------------
/mock/data/builds.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "builds": {
  3 |     "total": 100,
  4 |     "list": [
  5 |       {
  6 |         "id": 2418,
  7 |         "status": "success",
  8 |         "version": "7.2.0",
  9 |         "number": null,
 10 |         "updated_at": "22 May 06:44",
 11 |         "release_notes": [],
 12 |         "operator": {
 13 |           "id": 51,
 14 |           "name": "张伟男"
 15 |         },
 16 |         "environment": {
 17 |           "id": 1,
 18 |           "name": "Prod"
 19 |         }
 20 |       },
 21 |       {
 22 |         "id": 2411,
 23 |         "status": "success",
 24 |         "version": "7.2.0",
 25 |         "number": null,
 26 |         "updated_at": "22 May 06:44",
 27 |         "release_notes": [],
 28 |         "operator": {
 29 |           "id": 36,
 30 |           "name": "汪洋"
 31 |         },
 32 |         "environment": {
 33 |           "id": 1,
 34 |           "name": "Prod"
 35 |         }
 36 |       },
 37 |       {
 38 |         "id": 2410,
 39 |         "status": "success",
 40 |         "version": "7.2.0",
 41 |         "number": null,
 42 |         "updated_at": "22 May 06:44",
 43 |         "release_notes": [],
 44 |         "operator": {
 45 |           "id": 36,
 46 |           "name": "汪洋"
 47 |         },
 48 |         "environment": {
 49 |           "id": 1,
 50 |           "name": "Prod"
 51 |         }
 52 |       },
 53 |       {
 54 |         "id": 2406,
 55 |         "status": "success",
 56 |         "version": "7.2.0",
 57 |         "number": null,
 58 |         "updated_at": "22 May 06:44",
 59 |         "release_notes": [],
 60 |         "operator": {
 61 |           "id": 36,
 62 |           "name": "汪洋"
 63 |         },
 64 |         "environment": {
 65 |           "id": 1,
 66 |           "name": "Prod"
 67 |         }
 68 |       },
 69 |       {
 70 |         "id": 2402,
 71 |         "status": "success",
 72 |         "version": "7.1.5",
 73 |         "number": null,
 74 |         "updated_at": "22 May 06:44",
 75 |         "release_notes": [],
 76 |         "operator": {
 77 |           "id": 36,
 78 |           "name": "汪洋"
 79 |         },
 80 |         "environment": {
 81 |           "id": 1,
 82 |           "name": "Prod"
 83 |         }
 84 |       },
 85 |       {
 86 |         "id": 2401,
 87 |         "status": "success",
 88 |         "version": "7.1.5",
 89 |         "number": null,
 90 |         "updated_at": "22 May 06:44",
 91 |         "release_notes": [],
 92 |         "operator": {
 93 |           "id": 36,
 94 |           "name": "汪洋"
 95 |         },
 96 |         "environment": {
 97 |           "id": 1,
 98 |           "name": "Prod"
 99 |         }
100 |       },
101 |       {
102 |         "id": 2399,
103 |         "status": "failed",
104 |         "version": "7.1.5",
105 |         "number": null,
106 |         "updated_at": "22 May 06:44",
107 |         "release_notes": [],
108 |         "operator": {
109 |           "id": 36,
110 |           "name": "汪洋"
111 |         },
112 |         "environment": {
113 |           "id": 1,
114 |           "name": "Prod"
115 |         }
116 |       },
117 |       {
118 |         "id": 2398,
119 |         "status": "success",
120 |         "version": "7.1.5",
121 |         "number": null,
122 |         "updated_at": "22 May 06:44",
123 |         "release_notes": [],
124 |         "operator": {
125 |           "id": 36,
126 |           "name": "汪洋"
127 |         },
128 |         "environment": {
129 |           "id": 1,
130 |           "name": "Prod"
131 |         }
132 |       },
133 |       {
134 |         "id": 2397,
135 |         "status": "success",
136 |         "version": "7.1.5",
137 |         "number": null,
138 |         "updated_at": "22 May 06:44",
139 |         "release_notes": [],
140 |         "operator": {
141 |           "id": 36,
142 |           "name": "汪洋"
143 |         },
144 |         "environment": {
145 |           "id": 1,
146 |           "name": "Prod"
147 |         }
148 |       },
149 |       {
150 |         "id": 2393,
151 |         "status": "success",
152 |         "version": "7.1.5",
153 |         "number": "201705161539",
154 |         "updated_at": "22 May 06:44",
155 |         "release_notes": [],
156 |         "operator": {
157 |           "id": 36,
158 |           "name": "汪洋"
159 |         },
160 |         "environment": {
161 |           "id": 2,
162 |           "name": "Test"
163 |         }
164 |       },
165 |       {
166 |         "id": 2383,
167 |         "status": "success",
168 |         "version": "7.1.5",
169 |         "number": "201705151818",
170 |         "updated_at": "22 May 06:44",
171 |         "release_notes": [],
172 |         "operator": {
173 |           "id": 36,
174 |           "name": "汪洋"
175 |         },
176 |         "environment": {
177 |           "id": 2,
178 |           "name": "Test"
179 |         }
180 |       },
181 |       {
182 |         "id": 2380,
183 |         "status": "success",
184 |         "version": "7.1.5",
185 |         "number": "201705151537",
186 |         "updated_at": "22 May 06:44",
187 |         "release_notes": [],
188 |         "operator": {
189 |           "id": 34,
190 |           "name": "翟国钧"
191 |         },
192 |         "environment": {
193 |           "id": 2,
194 |           "name": "Test"
195 |         }
196 |       },
197 |       {
198 |         "id": 2378,
199 |         "status": "success",
200 |         "version": "7.1.5",
201 |         "number": "201705151425",
202 |         "updated_at": "22 May 06:44",
203 |         "release_notes": [],
204 |         "operator": {
205 |           "id": 34,
206 |           "name": "翟国钧"
207 |         },
208 |         "environment": {
209 |           "id": 2,
210 |           "name": "Test"
211 |         }
212 |       },
213 |       {
214 |         "id": 2375,
215 |         "status": "success",
216 |         "version": "7.1.5",
217 |         "number": "201705151112",
218 |         "updated_at": "22 May 06:44",
219 |         "release_notes": [],
220 |         "operator": {
221 |           "id": 34,
222 |           "name": "翟国钧"
223 |         },
224 |         "environment": {
225 |           "id": 2,
226 |           "name": "Test"
227 |         }
228 |       },
229 |       {
230 |         "id": 2370,
231 |         "status": "success",
232 |         "version": "7.1.5",
233 |         "number": null,
234 |         "updated_at": "22 May 06:44",
235 |         "release_notes": [],
236 |         "operator": {
237 |           "id": 37,
238 |           "name": "李聪"
239 |         },
240 |         "environment": {
241 |           "id": 1,
242 |           "name": "Prod"
243 |         }
244 |       }
245 |     ]
246 |   }
247 | }
248 | 


--------------------------------------------------------------------------------
/mock/data/projects.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "projects": {
  3 |     "total": 100,
  4 |     "list": [
  5 |       {
  6 |         "id": 4,
  7 |         "title": "Gengmei",
  8 |         "desc": "更美APP 用户版",
  9 |         "identifier": "com.wanmeizhensuo.ZhengXing",
 10 |         "type": "app",
 11 |         "icon": "http://www.gmei.com/static/images/download/gm-logo-5aeee8294d.png",
 12 |         "version": "7.0.0",
 13 |         "platform": "ios",
 14 |         "git_repo_url": "git@git.gengmei.cc:gengmeiios/gengmeiios.git",
 15 |         "updated_at": "30 Mar 16:29",
 16 |         "guardian": {
 17 |           "id": 34,
 18 |           "name": "翟国钧"
 19 |         }
 20 |       },
 21 |       {
 22 |         "id": 78,
 23 |         "title": "GMDoctor",
 24 |         "desc": "更美医生新版",
 25 |         "identifier": "com.wanmeizhensuo.Doctor",
 26 |         "type": "app",
 27 |         "icon": "http://www.gmei.com/static/images/download/gm-logo-5aeee8294d.png",
 28 |         "version": "2.9.5",
 29 |         "platform": "ios",
 30 |         "git_repo_url": "git@git.gengmei.cc:gengmeiios/GMDoctor.git",
 31 |         "updated_at": "05 Jun 04:09",
 32 |         "guardian": {
 33 |           "id": 42,
 34 |           "name": "胡乐平"
 35 |         }
 36 |       },
 37 |       {
 38 |         "id": 5,
 39 |         "title": "GMPhobos",
 40 |         "desc": "iOS埋点统计SDK",
 41 |         "identifier": "",
 42 |         "type": "lib",
 43 |         "icon": "http://www.gmei.com/static/images/download/gm-logo-5aeee8294d.png",
 44 |         "version": "0.2.10",
 45 |         "platform": "ios",
 46 |         "git_repo_url": "git@git.gengmei.cc:gengmeiios/GMPhobos.git",
 47 |         "updated_at": "22 Aug 17:47",
 48 |         "guardian": {
 49 |           "id": 34,
 50 |           "name": "翟国钧"
 51 |         }
 52 |       },
 53 |       {
 54 |         "id": 8,
 55 |         "title": "GMKit",
 56 |         "desc": "更美UI基础控件库",
 57 |         "identifier": "",
 58 |         "type": "lib",
 59 |         "icon": "http://www.gmei.com/static/images/download/gm-logo-5aeee8294d.png",
 60 |         "version": "",
 61 |         "platform": "ios",
 62 |         "git_repo_url": "git@git.gengmei.cc:gengmeiios/GMKit.git",
 63 |         "updated_at": "17 Aug 18:36",
 64 |         "guardian": {
 65 |           "id": 36,
 66 |           "name": "汪洋"
 67 |         }
 68 |       },
 69 |       {
 70 |         "id": 10,
 71 |         "title": "GMNetService",
 72 |         "desc": "更美网络库 OC版",
 73 |         "identifier": "",
 74 |         "type": "lib",
 75 |         "icon": "http://www.gmei.com/static/images/download/gm-logo-5aeee8294d.png",
 76 |         "version": "",
 77 |         "platform": "ios",
 78 |         "git_repo_url": "git@git.gengmei.cc:gengmeiios/GMNetService.git",
 79 |         "updated_at": "22 Aug 17:47",
 80 |         "guardian": {
 81 |           "id": 37,
 82 |           "name": "李聪"
 83 |         }
 84 |       },
 85 |       {
 86 |         "id": 13,
 87 |         "title": "GMRefresh",
 88 |         "desc": "基于MJRefresh做的下拉刷新，自动加载更多",
 89 |         "identifier": "",
 90 |         "type": "lib",
 91 |         "icon": "http://www.gmei.com/static/images/download/gm-logo-5aeee8294d.png",
 92 |         "version": "",
 93 |         "platform": "ios",
 94 |         "git_repo_url": "git@git.gengmei.cc:gengmeiios/GMRefresh.git",
 95 |         "updated_at": "17 Aug 18:36",
 96 |         "guardian": {
 97 |           "id": 36,
 98 |           "name": "汪洋"
 99 |         }
100 |       },
101 |       {
102 |         "id": 18,
103 |         "title": "GMUtil",
104 |         "desc": "常用的工具库",
105 |         "identifier": "",
106 |         "type": "lib",
107 |         "icon": "http://www.gmei.com/static/images/download/gm-logo-5aeee8294d.png",
108 |         "version": "",
109 |         "platform": "ios",
110 |         "git_repo_url": "git@git.gengmei.cc:gengmeiios/GMUtil.git",
111 |         "updated_at": "17 Aug 18:36",
112 |         "guardian": {
113 |           "id": 36,
114 |           "name": "汪洋"
115 |         }
116 |       },
117 |       {
118 |         "id": 22,
119 |         "title": "GMediator",
120 |         "desc": "iOS Business Module Communication Middleware",
121 |         "identifier": "",
122 |         "type": "lib",
123 |         "icon": "http://www.gmei.com/static/images/download/gm-logo-5aeee8294d.png",
124 |         "version": "",
125 |         "platform": "ios",
126 |         "git_repo_url": "git@git.gengmei.cc:gengmeiios/GMediator.git",
127 |         "updated_at": "22 Aug 17:47",
128 |         "guardian": {
129 |           "id": 36,
130 |           "name": "汪洋"
131 |         }
132 |       },
133 |       {
134 |         "id": 23,
135 |         "title": "GMBase",
136 |         "desc": "各种基类库",
137 |         "identifier": "",
138 |         "type": "lib",
139 |         "icon": "http://www.gmei.com/static/images/download/gm-logo-5aeee8294d.png",
140 |         "version": "",
141 |         "platform": "ios",
142 |         "git_repo_url": "git@git.gengmei.cc:gengmeiios/GMBase.git",
143 |         "updated_at": "17 Aug 18:37",
144 |         "guardian": {
145 |           "id": 36,
146 |           "name": "汪洋"
147 |         }
148 |       },
149 |       {
150 |         "id": 24,
151 |         "title": "GMConversation",
152 |         "desc": "会话、私信、客服业务组件",
153 |         "identifier": "",
154 |         "type": "lib",
155 |         "icon": "http://www.gmei.com/static/images/download/gm-logo-5aeee8294d.png",
156 |         "version": "0.1.6",
157 |         "platform": "ios",
158 |         "git_repo_url": "git@git.gengmei.cc:gengmeiios/GMConversation.git",
159 |         "updated_at": "17 Aug 18:12",
160 |         "guardian": {
161 |           "id": 34,
162 |           "name": "翟国钧"
163 |         }
164 |       },
165 |       {
166 |         "id": 31,
167 |         "title": "GMCache",
168 |         "desc": "缓存库 OC版",
169 |         "identifier": "",
170 |         "type": "Lib",
171 |         "icon": "http://www.gmei.com/static/images/download/gm-logo-5aeee8294d.png",
172 |         "version": "0.1.0",
173 |         "platform": "ios",
174 |         "git_repo_url": "git@git.gengmei.cc:gengmeiios/GMCache.git",
175 |         "updated_at": "17 Aug 18:32",
176 |         "guardian": {
177 |           "id": 37,
178 |           "name": "李聪"
179 |         }
180 |       },
181 |       {
182 |         "id": 48,
183 |         "title": "GMSwiftConstant",
184 |         "desc": "单独对swift的常量进行管理",
185 |         "identifier": "",
186 |         "type": "Lib",
187 |         "icon": "http://www.gmei.com/static/images/download/gm-logo-5aeee8294d.png",
188 |         "version": "",
189 |         "platform": "ios",
190 |         "git_repo_url": "git@git.gengmei.cc:gengmeiios/GMSwiftConstant.git",
191 |         "updated_at": "17 Aug 18:32",
192 |         "guardian": {
193 |           "id": 37,
194 |           "name": "李聪"
195 |         }
196 |       },
197 |       {
198 |         "id": 50,
199 |         "title": "GMLibrary",
200 |         "desc": "基础组件第一版（已废弃，专门用于测试）",
201 |         "identifier": "",
202 |         "type": "Lib",
203 |         "icon": "http://www.gmei.com/static/images/download/gm-logo-5aeee8294d.png",
204 |         "version": "0.4.4",
205 |         "platform": "ios",
206 |         "git_repo_url": "git@git.gengmei.cc:gengmeiios/GMLibrary.git",
207 |         "updated_at": "22 Aug 17:48",
208 |         "guardian": {
209 |           "id": 33,
210 |           "name": "邢天宇"
211 |         }
212 |       },
213 |       {
214 |         "id": 54,
215 |         "title": "GMediator_Conversation",
216 |         "desc": "私信业务组件TargetAction接口",
217 |         "identifier": "",
218 |         "type": "Lib",
219 |         "icon": null,
220 |         "version": "",
221 |         "platform": "ios",
222 |         "git_repo_url": "git@git.gengmei.cc:gengmeiios/GMediator_Conversation.git",
223 |         "updated_at": "22 Aug 17:48",
224 |         "guardian": {
225 |           "id": 34,
226 |           "name": "翟国钧"
227 |         }
228 |       }
229 |     ]
230 |   }
231 | }
232 | 


--------------------------------------------------------------------------------
/src/components/global/Pagination.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <ul :class="['pagination',btnSize]"
  3 |       role="group"
  4 |       :aria-disabled="disabled ? 'true' : 'false'"
  5 |       :aria-label="ariaLabel ? ariaLabel : null"
  6 |       @focusin.self="focusCurrent"
  7 |       @keydown.left.prevent="focusPrev"
  8 |       @keydown.right.prevent="focusNext"
  9 |       @keydown.shift.left.prevent="focusFirst"
 10 |       @keydown.shift.right.prevent="focusLast">
 11 | 
 12 |     <li v-if="isActive(1) || disabled" class="page-item disabled" aria-hidden="true">
 13 |       <span class="page-link">&laquo;</span>
 14 |     </li>
 15 | 
 16 |     <li v-else class="page-item">
 17 |       <a role="button"
 18 |          class="page-link"
 19 |          :aria-label="labelPrevPage"
 20 |          tabindex="-1"
 21 |          href="#"
 22 |          @click.prevent="setPage($event, currentPage - 1)"
 23 |          @keydown.enter.prevent="setPage($event, currentPage - 1)"
 24 |          @keydown.space.prevent="setPage($event, currentPage - 1)">
 25 |         <span aria-hidden="true">&laquo;</span>
 26 |       </a>
 27 |     <li>
 28 | 
 29 |     <li v-if="showPrev" class="page-item">
 30 |       <a role="button"
 31 |          :class="['page-link', {disabled}, isActive(1)?'active':'']"
 32 |          :disabled="disabled"
 33 |          :aria-disabled="disabled ? 'true' : 'false'"
 34 |          :aria-label="labelPage + ' 1'"
 35 |          :aria-current="isActive(1) ? 'true' : 'false'"
 36 |          :aria-posinset="1"
 37 |          :aria-setsize="numberOfPages"
 38 |          tabindex="-1"
 39 |          @click.prevent="setPage($event, 1)"
 40 |          @keydown.enter.prevent="setPage($event, 1)"
 41 |          @keydown.space.prevent="setPage($event, 1)">1</a>
 42 |     </li>
 43 | 
 44 |     <li v-if="showPrev" class="page-item disabled" role="seperator">
 45 |       <span :class="page-link">&hellip;</span>
 46 |     </li>
 47 | 
 48 |     <li class="page-item" v-for="_,index in pageLinks" :key="index">
 49 |       <a role="button"
 50 |          :class="['page-link',{disabled},isActive(index + diff)?'active':'',isActive(index + diff)?'':'hidden-xs-down']"
 51 |          :disabled="disabled"
 52 |          :aria-disabled="disabled ? 'true' : 'false'"
 53 |          :aria-label="labelPage + ' ' + (index + diff)"
 54 |          :aria-current="isActive(index + diff) ? 'true' : 'false'"
 55 |          :aria-posinset="index + diff"
 56 |          :aria-setsize="numberOfPages"
 57 |          tabindex="-1"
 58 |          @click.prevent="setPage($event, index + diff)"
 59 |          @keydown.enter.prevent="setPage($event, index + diff)"
 60 |          @keydown.space.prevent="setPage($event, index + diff)">{{index + diff}}</a>
 61 |     </li>
 62 | 
 63 |     <li v-if="showNext" class="page-item disabled" role="seperator">
 64 |       <span class="page-link">&hellip;</span>
 65 |     </li>
 66 | 
 67 |     <li class="page-item" v-if="showNext">
 68 |       <a role="button"
 69 |          :class="['page-link', {disabled}, isActive(numberOfPages) ? 'active' : '']"
 70 |          :disabled="disabled"
 71 |          :aria-disabled="disabled ? 'true' : 'false'"
 72 |          :aria-label="labelPage + ' ' + numberOfPages"
 73 |          :aria-current="isActive(numberOfPages) ? 'true' : 'false'"
 74 |          :aria-posinset="numberOfPages"
 75 |          :aria-setsize="numberOfPages"
 76 |          tabindex="-1"
 77 |          @click.prevent="setPage($event, numberOfPages)"
 78 |          @keydown.enter.prevent="setPage($event, numberOfPages)"
 79 |          @keydown.space.prevent="setPage($event, numberOfPages)">{{numberOfPages}}</a>
 80 |     </li>
 81 | 
 82 |     <li v-if="isActive(numberOfPages) || disabled" class="page-item disabled" aria-hidden="true">
 83 |       <span class="page-link">&raquo;</span>
 84 |     </li>
 85 | 
 86 |     <li v-else class="page-item">
 87 |       <a role="button"
 88 |          class="page-link"
 89 |          :aria-label="labelNextPage"
 90 |          tabindex="-1"
 91 |          @click.prevent="setPage($event, currentPage + 1)"
 92 |          @keydown.enter.prevent="setPage($event, currentPage + 1)"
 93 |          @keydown.space.prevent="setPage($event, currentPage + 1)"><span aria-hidden="true">&raquo;</span></a>
 94 |     </li>
 95 | 
 96 |   </ul>
 97 | </template>
 98 | 
 99 | <script>
100 |   function isVisible (el) {
101 |     return el && (el.offsetWidth > 0 || el.offsetHeight > 0);
102 |   }
103 | 
104 |   export default {
105 |     data () {
106 |       return {
107 |         diff: 1,
108 |         page: 0,
109 |         link: '',
110 |         showPrev: false,
111 |         showNext: false,
112 |         currentPage: this.value
113 |       }
114 |     },
115 | 
116 |     computed: {
117 |       numberOfPages () {
118 |         const result = Math.ceil(this.totalRows / this.perPage);
119 |         return (result < 1) ? 1 : result;
120 |       },
121 |       btnSize () {
122 |         return this.size ? `pagination-${this.size}` : '';
123 |       },
124 |       pageLinks () {
125 |         if (this.currentPage > this.numberOfPages) {
126 |           this.currentPage = 1;
127 |         }
128 | 
129 |         // Defaults
130 |         this.diff = 1;
131 |         this.showPrev = false;
132 |         this.showNext = false;
133 | 
134 |         // If less pages than limit just show this pages
135 |         if (this.numberOfPages <= this.limit) {
136 |           return this.numberOfPages;
137 |         }
138 | 
139 |         // If at the beginning of the list
140 |         if (this.currentPage <= this.limit - 2) {
141 |           this.diff = 1;
142 |           this.showNext = true;
143 |           return this.limit - 2;
144 |         }
145 | 
146 |         // If at the end of the list
147 |         if (this.currentPage > this.numberOfPages - this.limit + 2) {
148 |           this.diff = this.numberOfPages - this.limit + 3;
149 |           this.showPrev = true;
150 |           return this.limit - 2;
151 |         }
152 | 
153 |         // Else we are somewhere in the middle
154 |         this.diff = this.currentPage - 1;
155 |         this.showPrev = this.currentPage >= this.limit;
156 |         this.showNext = this.currentPage <= this.numberOfPages - this.limit + 1;
157 |         return this.limit;
158 |       }
159 |     },
160 | 
161 |     methods: {
162 |       isActive (page) {
163 |         return page === this.currentPage;
164 |       },
165 |       setPage (e, num) {
166 |         if (this.disabled) {
167 |           e.preventDefault();
168 |           e.stopPropagation();
169 |           return;
170 |         }
171 |         this.currentPage = num;
172 |         this.$nextTick(() => {
173 |           // Keep the current button focused if possible
174 |           if (isVisible(e.target) && e.target.focus) {
175 |             e.target.focus();
176 |           } else {
177 |             this.focusCurrent();
178 |           }
179 |         });
180 |       },
181 |       getButtons () {
182 |         const buttons = Array.prototype.slice.call(this.$el.querySelectorAll('a.page-link'));
183 |         // Return only buttons that are visible
184 |         return buttons.filter(btn => isVisible(btn));
185 |       },
186 |       setBtnFocus (btn) {
187 |         this.$nextTick(() => {
188 |           btn.focus();
189 |         });
190 |       },
191 |       focusFirst () {
192 |         const btn = this.getButtons().find(el => !el.disabled);
193 |         if (btn && btn.focus && btn !== document.activeElement) {
194 |           this.setBtnFocus(btn);
195 |         }
196 |       },
197 |       focusLast () {
198 |         const btn = this.getButtons().reverse().find(el => !el.disabled);
199 |         if (btn && btn.focus && btn !== document.activeElement) {
200 |           this.setBtnFocus(btn);
201 |         }
202 |       },
203 |       focusCurrent () {
204 |         const btn = this.getButtons().find(el => parseInt(el.getAttribute('aria-posinset'), 10) === this.currentPage);
205 |         if (btn && btn.focus) {
206 |           this.setBtnFocus(btn);
207 |         } else {
208 |           // Fallback if current page is not in button list
209 |           this.focusFirst();
210 |         }
211 |       },
212 |       focusPrev () {
213 |         const buttons = this.getButtons();
214 |         const idx = buttons.indexOf(document.activeElement);
215 |         if (idx > 0 && !buttons[idx - 1].disabled && buttons[idx - 1].focus) {
216 |           this.setBtnFocus(buttons[idx - 1]);
217 |         }
218 |       },
219 |       focusNext () {
220 |         const buttons = this.getButtons();
221 |         const idx = buttons.indexOf(document.activeElement);
222 |         const cnt = buttons.length - 1;
223 |         if (idx < cnt && !buttons[idx + 1].disabled && buttons[idx + 1].focus) {
224 |           this.setBtnFocus(buttons[idx + 1]);
225 |         }
226 |       },
227 |       _return () {
228 | 
229 |       }
230 |     },
231 | 
232 |     watch: {
233 |       currentPage (newPage, oldPage) {
234 |         if (newPage === oldPage) {
235 |           return;
236 |         }
237 | 
238 |         this.$emit('input', newPage);
239 |       },
240 |       value (newValue, oldValue) {
241 |         if (newValue !== oldValue) {
242 |           this.currentPage = newValue;
243 |         }
244 |       }
245 |     },
246 | 
247 |     props: {
248 |       disabled: {
249 |         type: Boolean,
250 |         default: false
251 |       },
252 |       value: {
253 |         type: Number,
254 |         default: 1
255 |       },
256 |       limit: {
257 |         type: Number,
258 |         default: 3
259 |       },
260 |       perPage: {
261 |         type: Number,
262 |         default: 20
263 |       },
264 |       totalRows: {
265 |         type: Number,
266 |         default: 20
267 |       },
268 |       size: {
269 |         type: String,
270 |         default: 'md'
271 |       },
272 |       ariaLabel: {
273 |         type: String,
274 |         default: 'Pagination'
275 |       },
276 |       labelPrevPage: {
277 |         type: String,
278 |         default: 'Previous Page'
279 |       },
280 |       labelNextPage: {
281 |         type: String,
282 |         default: 'Next Page'
283 |       },
284 |       labelPage: {
285 |         type: String,
286 |         default: 'Page'
287 |       }
288 |     }
289 |   };
290 | 
291 | </script>
292 | 
293 | <style scoped>
294 |   .page-item.disabled {
295 |     cursor: not-allowed;
296 |     -webkit-user-select: none;
297 |     -moz-user-select: none;
298 |     -ms-user-select: none;
299 |     user-select: none;
300 |     opacity: .65;
301 |   }
302 | 
303 |   .page-item > a.active, .page-item > a.active:focus, .page-item > a.active:hover, .page-item > .active > span, .page-item > .active > span:focus, .page-item > .active > span:hover {
304 |     z-index: 3;
305 |     color: #fff;
306 |     cursor: default;
307 |     background-color: #337ab7;
308 |     border-color: #337ab7;
309 |   }
310 | </style>
311 | 


--------------------------------------------------------------------------------