Skip to content
Permalink
Browse files
refactored the code to pick up data dynamically
  • Loading branch information
aarushiibisht committed Apr 11, 2020
1 parent 0a8a84f commit 18a06d352e8a2586bd64b4c1431aa6f21c653e3f
Show file tree
Hide file tree
Showing 13 changed files with 10,325 additions and 193 deletions.
@@ -2,3 +2,4 @@
venv/
**/__pycache__/
db.sqlite3
dist

Large diffs are not rendered by default.

@@ -9,7 +9,8 @@
},
"dependencies": {
"core-js": "^3.6.4",
"vue": "^2.6.11"
"vue": "^2.6.11",
"common": "file:../../static/common"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.3.0",
@@ -22,7 +23,8 @@
"vue-template-compiler": "^2.6.11",
"webpack-bundle-tracker": "^0.4.3",
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.11.0"
"bootstrap-vue": "^2.11.0",
"jquery": "^3.5.0"
},
"eslintConfig": {
"root": true,
@@ -1,89 +1,51 @@
<template>
<div id="storage">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-8">
<h1 class="h4 mb-4">Storage Units</h1>
</div>
<div class="col-1">
<div class="dropdown">
<button class="btn btn-sm btn-secondary dropdown-toggle" style="background: white;color: grey" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Sort by
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
</div>
<div class="col-1">

</div>
<div class="col-2">
<button class="btn btn-sm"><span data-feather="plus"></span> Add new unit</button>
</div>
<!-- Add buttons here -->
</div>
<!--
<div class="btn-group btn-group-sm" role="group" aria-label="view">
<button class="btn-sm btn-primary"></button>
<button class="btn-sm btn-primary"></button>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Storage size</th>
<th scope="col">Storage occupied</th>
<th scope="col">Last modified</th>
</tr>
</thead>
<tbody>
<tr v-for="storage in storageList"
:key="storage.storageList">
<th scope="row">{{storage.name}}</th>
<td>{{storage.size}}</td>
<td>
<div class="progress storage-progress" style="width: 20%">
<!-- TODO: storage value should be picked from storage.occupied -->
<div class="progress-bar bg-danger" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 85%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<button class="btn-sm btn-primary"> Add new unit</button> -->

<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Storage size</th>
<th scope="col">Storage occupied</th>
<th scope="col">Last modified</th>
</tr>
</thead>
<!--- This should be removed -->
<tbody>
<tr>
<th scope="row">Box </th>
<td>15 GB</td>
<td>
<div class="progress storage-progress" style="width: 20%">
<div class="progress-bar bg-danger" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 85%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>Jan 15, 2020</td>
</tr>
<tr>
<th scope="row">Box </th>
<td>15 GB</td>
<td>
<div class="progress storage-progress" style="width: 20%">
<div class="progress-bar bg-danger" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 85%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div></td>
<td>Jan 15, 2020</td>
</tr>
<tr>
<th scope="row">Box </th>
<td>15 GB</td>
<td>
<div class="progress storage-progress" style="width: 20%">
<div class="progress-bar bg-danger" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 85%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>Jan 15, 2020</td>
</tr>

</tbody>
</table>
</td>
<td>{{storage.lastModified}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>

<script>
//TODO: implement pagination
export default {
name: 'storage',
props: ["initialStorageList"],
data: function(){
return {
storageList: this.initialStorageList
}
}
}
</script>

@@ -3,9 +3,31 @@ import storage from "./containers/Storage"
import { BootstrapVue } from 'bootstrap-vue'

// Install BootstrapVue
Vue.use(BootstrapVue)
Vue.use(BootstrapVue);

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

new Vue ({render: h => h(storage, {})}).$mount("#storage")
window.onload = function(){

new Vue({
render(h) {
return h(storage, {
props: {
initialStorageList: this.storageList
}
});

},
data() {
return {
storageList: null
};
},
beforeMount() {
if (this.$el.dataset.storageList) {
this.storageList = JSON.parse(this.$el.dataset.storageList);
}
}
}).$mount("#storage");
};
@@ -1,20 +1,10 @@
{#{% extends "base.html" %}#}

{% load static %}
{% load render_bundle from webpack_loader %}
<div id="storage"></div>

{% render_bundle "chunk-vendors" %}
{% render_bundle "storage" %}

{% block app %}

<div id="storage"></div>

<div id="storage" data-storage-list="{{ data }}"></div>
{% endblock app %}

<!--- This has to go to vue file--->
<style>
.storage-progress {
width: 20%;
}
</style>
@@ -1,5 +1,14 @@
from django.shortcuts import render

import json
# Create your views here.


def storage(request):
return render(request, 'storage.html', {})
# TODO: grpc calls to backend
storage_json = [{"storageId": "ssh-storage1", "name": "ssh-storage1", "size": "15GB", "occupied": "10GB", "lastModified":"26, March 2020"},
{"storageId": "ssh-storage1", "name": "ssh-storage1", "size": "15GB", "occupied": "10GB", "lastModified":"26, March 2020"},
{"storageId": "ssh-storage1", "name": "ssh-storage1", "size": "15GB", "occupied": "10GB", "lastModified":"26, March 2020"},
{"storageId": "ssh-storage1", "name": "ssh-storage1", "size": "15GB", "occupied": "10GB", "lastModified":"26, March 2020"}]

return render(request, 'storage.html', {'data': json.dumps(storage_json)})

This file was deleted.

@@ -0,0 +1,19 @@
import Vue from "vue";
import BootstrapVue from "bootstrap-vue";


import 'bootstrap/dist/css/bootstrap.css'
import "bootstrap-vue/dist/bootstrap-vue.css";

/**
* Common entry point function. Sets up common entry point functionality and
* then calls the passed function with the Vue class as the first argument.
*
* @param {Function} entryPointFunction
*/
export default function entry(entryPointFunction) {
// Common Vue configuration
Vue.use(BootstrapVue);

entryPointFunction(Vue);
}
@@ -0,0 +1,7 @@
import entry from "./entry";

export default {
entry
};

export {entry};
Empty file.
@@ -5,8 +5,6 @@ module.exports = {
productionSourceMap: false,
pages: {
app: "./js/main.js",
cms: "./js/cms.js",
notices: "./js/notices.js"
},
configureWebpack: {
plugins: [
@@ -1,89 +1,3 @@
<!--- This has to change according to the latest UX design specified in https://issues.apache.org/jira/browse/AIRAVATA-3314--->
{% load static %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

<title>Airavata MFT</title>

<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<!-- Custom styles -->
<link href="{% static 'base.css' %}" type="text/css" rel="stylesheet">
</head>

<body>
<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Airavata MFT</a>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Sign out</a>
</li>
</ul>
</nav>

<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<span data-feather="home"></span>
Agents <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
Transactions
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Test
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span>
Test
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
Test
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
Test
</a>
</li>
</ul>
</div>
</nav>

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
{% block app %}
{% endblock app %}
</div>
</main>


<!-- Icons -->
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
<script>
feather.replace()
</script>
</body>
</html>
<!-- TODO : header and side navigation bar" -->
{% block app %}
{% endblock app %}

0 comments on commit 18a06d3

Please sign in to comment.