[OLD] GGBLIH - Vue.js

ggblih-vue-js.md

GGBLIH - Vue.js

A Pen by Vanadium on CodePen.

License.

index.html

<script src="https://unpkg.com/vue"></script>
<script src="https://wzrd.in/standalone/request@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.0.0-alpha.6/dist/css/bootstrap.min.css" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<div id="app" class="container">
  <div class="row header"><!-- AppHeader -->
    <div class="col col-md-2 navbox text-center"><!-- NavBox -->
      <div class="row text-center">{{ login }}</div>
      <div class="row btn-group-vertical">
        <!-- if route.path != activeRoute.path -->
        <span class="btn btn-info"><a href="#" @click="getRepoList">route1</a></span>
        <span class="btn btn-info"><a href="#">route2</a></span>
      </div>
    </div>
    <div class="col col-md-7 title"><!-- MainTitle -->
      <h1>{{ title }}</h1>
    </div>
    <div class="col col-md-3 text-center"><!-- LangSelect -->
      <div class="btn-group">
        <button type="button" class="btn btn-primary">English</button>
        <button type="button" class="btn btn-primary">Français</button>
      </div>
    </div>
  </div>
  <div class="row app-content"><!-- AppContent -->
    <div class="col"><!-- Repositories -->
      <div class="row">
        <label>Repositories</label>
      </div>
      <div class="row">
        <div class="col col-md-3"><!-- RepoList -->
          <div class="row" v-for="(repo, i) of repos"><!-- for repo in repos -->
            <input type="radio" :id="'repo' + i" name="group" :value="i" v-model="checked" />
            <label :for="'repo' + i" class="repo-name">{{ repo.name }}</label>
          </div>
        </div>
        <div class="content col col-md-9" v-if="checked !== ''"><!-- Repository -->
          <div class="row">UUID: {{ activeRepo.UUID }}</div>
          <div class="row">public: {{ activeRepo.public }}</div>
          <div class="row">Creation Date: {{ activeRepo.creationDate }}</div>
          <div class="row">Description: {{ activeRepo.description }}</div>
          <div class="row"><!-- RepoRights -->
            <span>Rights</span>
            <ul>
              <li>someone: rw</li>
              <li>someother: r</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer"><!-- AppFooter -->
    <span>Made by Vanadium</span>
  </div>
</div>

script.js

const storageService = {
  get: (key) => {
    if (!key)
      return null
    return JSON.parse(sessionStorage.getItem(key))
  },
  set: (obj, key) => {
    if (!key)
      return
    sessionStorage.setItem(key, JSON.stringify(obj))
  }
}

function onProgress(event) {
    if (event.lengthComputable) {
        var percentComplete = (event.loaded / event.total)*100;
        console.log("Téléchargement: %d%%", percentComplete);
    } else {
        // Impossible de calculer la progression puisque la taille totale est inconnue
    }
}

function onError(event) {
    console.error("Une erreur " + event.target.status + " s'est produite au cours de la réception du document.");
}

function onLoad(event) {
    // Ici, this.readyState égale XMLHttpRequest.DONE .
    if (this.status === 200) {
        console.log("Réponse reçu: %s", this.responseText);
    } else {
        console.log("Status de la réponse: %d (%s)", this.status, this.statusText);
    }
}

function onLoadEnd(event) {
    // Cet événement est exécuté, une fois la requête terminée.
    console.log("Le transfert est terminé. (peut importe le résultat)");
}



const request = {
  get: () => {
   /* const req = new XMLHttpRequest();
    req.onprogress = onProgress;
    req.onerror = onError;
    req.onload = onLoad;
    req.onloadend = onLoadEnd;
    
    req.onreadystatechange = function() { 
      console.debug(`readyState: ${req.readyState}, status: ${req.statusText}`)
    }
    req.open('GET', blihService.BLIH_URL + '/repositories');
   // req.setRequestHeader('User-Agent', 'blih-1.7')
   req.setRequestHeader('Content-type', 'application/json')
   req.setRequestHeader('Content-length', '')*/
    let signature = 'd1238f90edee05a6e04de5513c50036e8afb441478ead1813755a220c3b0d08e16f81543283f4140c4c6a1baff7ab4bda196b82bee38eb75ddc33959b752c239'
    let params = {
      user: 'david.calo@epitech.eu',
      signature: signature
    }
    
    //req.send(JSON.stringify(params));
    
    // d3.request('https://blih.epitech.eu/repositories')
    //   .header('content-type', 'application/json')
    //   .header('content-length', '175')
    //   .get(JSON.stringify(params), (err, xhr) => {
    //     console.log('ERR:', err, '\nXHR:', xhr)
    //   })
    request({
      url: 'http://blih.epitech.eu/repositories',
      method: 'GET',
      json: params
    }, (err, res, body) => {
      if (err || body.error)
        console.error('Err: ', err, 'body.error:', body.error)
       console.log('res:', res)
    })
  },
  post: () => {

  },
  delete: () => {
    
  }
}

const blihService = {
  BLIH_URL: 'https://blih.epitech.eu',
  repository:  {
    getAll: () => {
      let endpoint = '/repositories'
      request.get()
    },
    create: ({name, type}) => {
      let endpoint = '/repositories'
      request.post()
    },
    get: ({name}) => {
      let endpoint = `/repository/${name}`
      request.get()
    },
    delete: ({name}) => {
      let endpoint = `/repository/${name}`
      request.delete()
    },
    acl: {
      get: ({name}) => {
        let endpoint = `/repository/${name}/acls`
        request.get()
      },
      set: ({name}, {user, acl}) => {
        let endpoint = `/repository/${name}/acls`
        request.post()
      }
    }
  },
  sshkey: {
    getAll: () => {
      let endpoint = '/sshkeys'
      request.get()
    },
    create: ({key, comment}) => {
      let endpoint = '/sshkeys'
      request.post()
    },
    get: ({comment}) => {
      let endpoint = `/sshkeys/${comment}`
      request.get()
    },
    delete: ({comment}) => {
      let endpoint = `/sshkeys/${comment}`
      request.delete()
    }
  },
  whoami: () => {
    let endpoint = '/whoami'
    request.get()
  }
}

let vm = new Vue({
  el: '#app',
  data: {
    title: 'Gestion Graphique de BLIH',
    repos: [
      {UUID : '4b584d85-cd54-f45a-455d-ddb5ad422d42',
       name: 'my_repo_1',
       public: false,
       creationDate: 'Lundi 9 Mai 2016 18:26:31',
       description: 'my_description_1'},
      {UUID : 'abcdef01-cd54-f45a-455d-ddb5ad422d42',
       name: 'my_repo_2',
       public: false,
       creationDate: 'Lundi 9 Mai 2016 18:26:31',
       description: 'my_description_2'}
    ],
    checked: ''
  },
  computed: {
    activeRepo: function() {
      return this.repos[this.checked]
    },
    login: function() {
      return storageService.get('login');
    }
  },
  methods: {
    getRepoList: function() {
      request.get()
    }
  }
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-request/1.0.5/d3-request.min.js"></script>

style.css

#app {
  background-color: lightgrey;
  padding: 10px;
  height: 100%;
}
/* --- label selectionnable --- */
input[type=radio] {
  display: none;
}

input[type=radio]:checked ~ label.repo-name {
  background-color: lightgrey;
}
/* ------ */
.header {
  height: auto;
  padding: 10px;
}
.navbox {
  padding: 10px;
}
.title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  height: 100%
}
.app-content {
  padding:10px;
  text-align: center;
}
.footer {
 /*  position: absolute;
  bottom: 0; */
}
/*
span#content {
    display: block;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    font-size: 0;
    overflow: hidden;
}

input#show:checked ~ .show:before {
    content: ""
}
input#show:checked ~ .hide:before {
    content: "Hide"
}

input#hide:checked ~ .hide:before {
    content: ""
}
input#hide:checked ~ .show:before {
    content: "Show"
}
input#show:checked ~ span#content {
    opacity: 1;
    font-size: 100%;
    height: auto;
}
input#hide:checked ~ span#content {
    display: block;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    font-size: 0;
    overflow: hidden;
} */