summaryrefslogtreecommitdiffstats
path: root/utils/test/vnfcatalogue/VNF_Catalogue/views
diff options
context:
space:
mode:
authorKumar Rishabh <shailrishabh@gmail.com>2017-03-15 01:02:11 +0530
committerKumar Rishabh <shailrishabh@gmail.com>2017-03-16 08:08:12 +0530
commit0ddfff32a990dda5a487229641aa189161f3d25a (patch)
tree5448523a516b1c9efd932c9be96ebe832aab7a47 /utils/test/vnfcatalogue/VNF_Catalogue/views
parenta18c846020f2833ed887f6a44ef602a73bfe88a6 (diff)
Add vnf, tag create & Associate Plugins
Adds support for accessing database, plugin to create tags and vnfs and make association between them. Also adds autocomplete feature to vnf-tag association. Change-Id: Id55f998df68ae5e6e6fd298c6393b3500777468a Signed-off-by: Kumar Rishabh <shailrishabh@gmail.com>
Diffstat (limited to 'utils/test/vnfcatalogue/VNF_Catalogue/views')
-rw-r--r--utils/test/vnfcatalogue/VNF_Catalogue/views/add_project.jade164
-rw-r--r--utils/test/vnfcatalogue/VNF_Catalogue/views/index.jade3
-rw-r--r--utils/test/vnfcatalogue/VNF_Catalogue/views/layout.jade3
-rw-r--r--utils/test/vnfcatalogue/VNF_Catalogue/views/project_profile.jade84
-rw-r--r--utils/test/vnfcatalogue/VNF_Catalogue/views/search.jade5
-rw-r--r--utils/test/vnfcatalogue/VNF_Catalogue/views/search_projects.jade132
-rw-r--r--utils/test/vnfcatalogue/VNF_Catalogue/views/vnf_tag_association.jade167
7 files changed, 494 insertions, 64 deletions
diff --git a/utils/test/vnfcatalogue/VNF_Catalogue/views/add_project.jade b/utils/test/vnfcatalogue/VNF_Catalogue/views/add_project.jade
new file mode 100644
index 000000000..dde8cfe75
--- /dev/null
+++ b/utils/test/vnfcatalogue/VNF_Catalogue/views/add_project.jade
@@ -0,0 +1,164 @@
+
+.search-box
+ script(src='/3rd_party/typeahead.js')
+ script(type='text/javascript', src='/javascripts/mode_edit.js')
+ .fixed-action-btn.fixed-action-btn_custom
+ a.btn-floating.btn-large.red
+ i.large.material-icons mode_edit
+ ul
+ li
+ a.btn-floating.red.tooltipped(href='#modal2', data-position='left', data-delay='50', data-tooltip='Add a TAG')
+ i.large.material-icons attach_file
+ li
+ a.btn-floating.green.tooltipped(href='#modal1', data-position='left', data-delay='50', data-tooltip='Add a VNF')
+ i.large.material-icons add
+ li
+ a.btn-floating.blue.tooltipped(href='#modal3', data-position='left', data-delay='50', data-tooltip='Add a TAG to a VNF')
+ i.large.material-icons share
+ #modal1.modal
+ .modal-content
+ h4.center
+ i.material-icons library_add
+ | Add a VNF
+ .row
+ form#add_project_form.col.s12(action='/add_project', enctype='multipart/form-data', method='post')
+ .row.modal-form-row
+ .input-field.col.s12
+ input#vnf_name.validate(type='text', name='vnf_name')
+ label.left-align(for='vnf_name') Name
+ .row
+ .input-field.col.s12
+ input#repo_url.validate(type='text', name='repo_url')
+ label.left-align(for='repo_url') Github URL
+ .row
+ .input-field.col.s12
+ select#license
+ option(value='', name='license', disabled='', selected='') Choose the License
+ option(value='MIT') MIT
+ option(value='GPL') GPL
+ option(value='GPL_V2') GPL_V2
+ option(value='BSD') BSD
+ option(value='APACHE') APACHE
+ label License
+ .row
+ .input-field.col.s12
+ select#opnfv_indicator
+ option(value='', name='opnfv_indicator', disabled='', selected='') Choose the OPNFV Indicator
+ option(value='silver') silver
+ option(value='gold') gold
+ option(value='platinum') platinum
+ label OPNFV Indicator
+
+ .row
+ .file-field.input-field
+ .btn
+ span Photo (Optional)
+ input#file_upload(type='file', name='file_upload')
+ .file-path-wrapper
+ input.file-path.validate(type='text', name='file_url')
+
+ .row
+ .input-field.col.s12
+ input#submitter_id.validate(type='hidden', name='submitter_id', value=1)
+
+ .row
+ button#add_project_button.modal-action.modal-close.waves-effect.waves-light.btn.right
+ | Submit VNF
+ i.material-icons.right send
+ #modal2.modal
+ .modal-content
+ h4.center
+ i.material-icons library_add
+ | Add a TAG
+ .row
+ form#add_tag_form.col.s12(action='/add_tag', method='post')
+ .row.modal-form-row
+ .input-field.col.s12
+ input#tag_name.validate(type='text', name='tag_name')
+ label.left-align(for='tag_name') Name
+ button#add_tag_button.modal-action.modal-close.waves-effect.waves-light.btn.right
+ | Submit TAG
+ i.material-icons.right send
+ #modal3.modal
+ h4.center
+ i.material-icons library_add
+ | Add a TAG to a VNF
+ .row
+ form#add_vnf_tag_association_form.col.s12(action='/vnf_tag_association', method='post')
+
+ .row.modal-form-row.modal-form-row-custom
+ .input-field.col.s2 VNF Name
+ #scrollable-dropdown-menu.input-field.col.s4
+ input#vnf_name.typeahead(type='text', name='vnf_name')
+ //
+ label.left-align(for='tag_name') VNF Name
+ .input-field.col.s2 TAG Name
+ #scrollable-dropdown-menu.input-field.col.s4
+ input#tag_name.validate.typeahead(type='text', name='tag_name')
+ //
+ label.left-align(for='tag_name') TAG Name
+
+ button#add_vnf_tag_association_button.modal-action.modal-close.waves-effect.waves-light.btn.right
+ | Submit
+ i.material-icons.right send
+ style.
+ .select-dropdown{
+ overflow-y: auto !important;
+ }
+ .dropdown-content {
+ max-height: 200px !important;
+ }
+ .backdrop{
+ background-color: rgb(253,225,109);
+ }
+ .bg {
+ }
+ .modal-form-row-custom {
+ min-height: 200px !important;
+ }
+ #scrollable-dropdown-menu .tt-menu {
+ max-height: 150px;
+ overflow-y: auto;
+ }
+
+ .typeahead, .tt-query, .tt-hint {
+ border: 2px solid #CCCCCC;
+ border-radius: 8px 8px 8px 8px;
+ font-size: 24px;
+ height: 30px;
+ line-height: 30px;
+ outline: medium none;
+ padding: 8px 12px;
+ width: 396px;
+ }
+
+ .tt-query {
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
+ }
+ .tt-hint {
+ color: #999999;
+ }
+ .tt-dropdown-menu {
+ background-color: #FFFFFF;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 8px 8px 8px 8px;
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+ margin-top: 12px;
+ padding: 8px 0;
+ width: 200px;
+ }
+ .tt-suggestion {
+ font-size: 18px;
+ line-height: 24px;
+ padding: 3px 20px;
+ }
+ .tt-suggestion.tt-cursor {
+ background-color: #0097CF;
+ color: #FFFFFF;
+ }
+ .tt-suggestion p {
+ margin: 0;
+ }
+ .tt-dropdown-menu, .gist {
+ text-align: left;
+ }
diff --git a/utils/test/vnfcatalogue/VNF_Catalogue/views/index.jade b/utils/test/vnfcatalogue/VNF_Catalogue/views/index.jade
index e60c3ba26..bf0cd149e 100644
--- a/utils/test/vnfcatalogue/VNF_Catalogue/views/index.jade
+++ b/utils/test/vnfcatalogue/VNF_Catalogue/views/index.jade
@@ -7,10 +7,11 @@ extends layout
which accompanies this distribution, and is available at
http://www.apache.org/licenses/LICENSE-2.0
block content
+ link(rel='stylesheet', href='/stylesheets/3rd_party/bootstrap.css')
.search-box
h1 VNF Catalogue
form.search-form
- input.search-input(type='text', placeholder='Search...', id='Tags')
+ input.search-input(type='search', placeholder='Search...', id='Tags')
.space-10
button.search-button(type='submit', value='Search', id='Search') Search
.content.content-height-overwrite
diff --git a/utils/test/vnfcatalogue/VNF_Catalogue/views/layout.jade b/utils/test/vnfcatalogue/VNF_Catalogue/views/layout.jade
index 89142f813..33c09e338 100644
--- a/utils/test/vnfcatalogue/VNF_Catalogue/views/layout.jade
+++ b/utils/test/vnfcatalogue/VNF_Catalogue/views/layout.jade
@@ -9,7 +9,6 @@ html(lang='en')
html
head
title= title
- link(rel='stylesheet', href='/stylesheets/3rd_party/bootstrap.css')
link(rel='stylesheet', href='/3rd_party/materialize/css/materialize.css')
script(type='text/javascript', src='https://code.jquery.com/jquery-3.1.1.min.js')
script(src='/javascripts/global.js')
@@ -49,5 +48,7 @@ html
a(href='#') Sign up
li.signin
a(href='#') Sign in
+ block search
+ block add_project
block content
diff --git a/utils/test/vnfcatalogue/VNF_Catalogue/views/project_profile.jade b/utils/test/vnfcatalogue/VNF_Catalogue/views/project_profile.jade
new file mode 100644
index 000000000..7b37bd423
--- /dev/null
+++ b/utils/test/vnfcatalogue/VNF_Catalogue/views/project_profile.jade
@@ -0,0 +1,84 @@
+extends layout
+
+//
+ Copyright (c) 2017 Kumar Rishabh and others.
+ All rights reserved. This program and the accompanying materials
+ are made available under the terms of the Apache License, Version 2.0
+ which accompanies this distribution, and is available at
+ http://www.apache.org/licenses/LICENSE-2.0
+block search
+ include search
+block content
+ .content
+ .container.container-custom
+ .carousel
+ a.carousel-item(href='#one!')
+ img(src='http://lorempixel.com/250/250/nature/1')
+ a.carousel-item(href='#two!')
+ img(src='http://lorempixel.com/250/250/nature/2')
+ a.carousel-item(href='#three!')
+ img(src='http://lorempixel.com/250/250/nature/3')
+ a.carousel-item(href='#four!')
+ img(src='http://lorempixel.com/250/250/nature/4')
+ a.carousel-item(href='#five!')
+ img(src='http://lorempixel.com/250/250/nature/5')
+ .card.card-shadow-custom.horizontal
+ .row.row-custom
+ .col.s5.card-title-div-custom
+ span.card-title.card-title-span-custom Card Title
+ .col.s5.card-title-div-custom
+ i.material-icons grade
+ span.card-title PenguinScore: 42
+ .col.s2.card-title-div-custom-right
+ form(action='#')
+ input#search_result_1(type='checkbox')
+ label(for='search_result_1') Compare
+ //
+ <div class="card-action">
+ <a href="#">This is a link</a>
+ </div>
+ .col.s4.card-image.card-image-custom
+ img.card-image-picture-custom(src='/images/logo.png')
+ .col.s8.card-stacked
+ .card-content
+ p
+ .collection.collection-custom
+ a.collection-item(href='#!')
+ span
+ i.material-icons code
+ | Lines Of Code: 1.03M
+ a.collection-item(href='#!')
+ span
+ i.material-icons code
+ | Lines Of Code: 1.03M
+ a.collection-item(href='#!')
+ span
+ i.material-icons code
+ | Lines Of Code: 1.03M
+ a.collection-item(href='#!')
+ span
+ i.material-icons code
+ | Lines Of Code: 1.03M
+ .card-action
+ | Tags:
+ .chip
+ a.a-custom(href='#!') Tag1
+ .chip
+ a.a-custom(href='#!') Tag2
+ .chip
+ a.a-custom(href='#!') Tag3
+ .chip
+ a.a-custom(href='#!') Tag4
+ .chip
+ a.a-custom(href='#!') Tag5
+ a.a-custom-more(href='#!') more
+ .divider
+ .card-action-custom.col.s12.card-action
+ | License:
+ a(href='#') MIT
+ | Complexity:
+ a(href='#') Atomic
+ footer
+ | © 2017 XYZ Company
+ link(rel='stylesheet', href='/stylesheets/search_projects.css')
+
diff --git a/utils/test/vnfcatalogue/VNF_Catalogue/views/search.jade b/utils/test/vnfcatalogue/VNF_Catalogue/views/search.jade
new file mode 100644
index 000000000..77b24881e
--- /dev/null
+++ b/utils/test/vnfcatalogue/VNF_Catalogue/views/search.jade
@@ -0,0 +1,5 @@
+.search-box
+ link(rel='stylesheet', href='/stylesheets/search_form.css')
+ .form-group-custom.form-group.has-feedback
+ input.search-input-rest.form-control(type='search', placeholder='Search...', id='Tags')
+ i.material-icons search \ No newline at end of file
diff --git a/utils/test/vnfcatalogue/VNF_Catalogue/views/search_projects.jade b/utils/test/vnfcatalogue/VNF_Catalogue/views/search_projects.jade
index 6670d212c..ac91aa68d 100644
--- a/utils/test/vnfcatalogue/VNF_Catalogue/views/search_projects.jade
+++ b/utils/test/vnfcatalogue/VNF_Catalogue/views/search_projects.jade
@@ -6,70 +6,78 @@ extends layout
are made available under the terms of the Apache License, Version 2.0
which accompanies this distribution, and is available at
http://www.apache.org/licenses/LICENSE-2.0
+block search
+ include search
+block add_project
+ include add_project
block content
- .search-box
- .form-group-custom.form-group.has-feedback
- input.search-input-rest.form-control(type='text', placeholder='Search...', id='Tags')
- i.material-icons search
.content
- .container
- .card.card-shadow-custom.horizontal
- .row.row-custom
- .col.s5.card-title-div-custom
- span.card-title.card-title-span-custom Card Title
- .col.s5.card-title-div-custom
- i.material-icons grade
- span.card-title PenguinScore: 42
- .col.s2.card-title-div-custom-right
- form(action='#')
- input#search_result_1(type='checkbox')
- label(for='search_result_1') Compare
- //
- <div class="card-action">
- <a href="#">This is a link</a>
- </div>
- .col.s4.card-image
- img.card-image-picture-custom(src='/images/logo.png')
- .col.s8.card-stacked
- .card-content
- p
- .collection.collection-custom
- a.collection-item(href='#!')
- span
- i.material-icons code
- | Lines Of Code: 1.03M
- a.collection-item(href='#!')
- span
- i.material-icons code
- | Lines Of Code: 1.03M
- a.collection-item(href='#!')
- span
- i.material-icons code
- | Lines Of Code: 1.03M
- a.collection-item(href='#!')
- span
- i.material-icons code
- | Lines Of Code: 1.03M
- .card-action
- | Tags:
- .chip
- a.a-custom(href='#!') Tag1
- .chip
- a.a-custom(href='#!') Tag2
- .chip
- a.a-custom(href='#!') Tag3
- .chip
- a.a-custom(href='#!') Tag4
- .chip
- a.a-custom(href='#!') Tag5
- a.a-custom-more(href='#!') more
- .divider
- .card-action-custom.col.s12.card-action
- | License:
- a(href='#') MIT
- | Complexity:
- a(href='#') Atomic
+ each key, index in json
+ .container.container-custom
+ .card.card-shadow-custom.horizontal
+ .row.row-custom
+ .col.s5.card-title-div-custom
+ span.card-title.card-title-span-custom #{key.vnf_name}
+ .col.s5.card-title-div-custom
+ i.material-icons grade
+ span.card-title PenguinScore: 42
+ .col.s2.card-title-div-custom-right
+ form(action='#')
+ input#search_result_1(type='checkbox', name='#{key.vnf_name}')
+ label(for='search_result_1') Compare
+ //
+ <div class="card-action">
+ <a href="#">This is a link</a>
+ </div>
+ .col.s4.card-image.card-image-custom
+ img.card-image-picture-custom(src='/uploads/#{key.photo_url}')
+ .col.s8.card-stacked
+ .card-content
+ p
+ .collection.collection-custom
+ a.collection-item(href='#!')
+ span
+ i.material-icons code
+ | Lines Of Code: #{key.lines_of_code}
+ a.collection-item(href='#!')
+ span
+ i.material-icons person
+ | Number of Developers: #{key.no_of_developers}
+ a.collection-item(href='#!')
+ span
+ i.material-icons star
+ | Number of Stars: #{key.no_of_stars}
+ a.collection-item(href='#!')
+ span
+ i.material-icons description
+ | Number of Versions: #{key.versions}
+ .card-action
+ | Tags:
+ each tag, index in key.tags
+ .chip
+ a.a-custom(href='/search_projects?tags=#{tag.tag_name}') #{tag.tag_name}
+ //
+ .chip
+ a.a-custom(href='#!') tag1
+ .chip
+ a.a-custom(href='#!') Tag2
+ .chip
+ a.a-custom(href='#!') Tag3
+ .chip
+ a.a-custom(href='#!') Tag4
+ .chip
+ a.a-custom(href='#!') Tag5
+ a.a-custom-more(href='#!') more
+ .divider
+ .card-action-custom.col.s12.card-action
+ | License:
+ a(href='#') #{key.license}
+ | Complexity:
+ a(href='#') Atomic
+ | Activity:
+ a(href='#') Medium
+ | OPNFV Indicator:
+ a(href='#') #{key.opnfv_indicator}
footer
| © 2017 XYZ Company
link(rel='stylesheet', href='/stylesheets/search_projects.css')
-
diff --git a/utils/test/vnfcatalogue/VNF_Catalogue/views/vnf_tag_association.jade b/utils/test/vnfcatalogue/VNF_Catalogue/views/vnf_tag_association.jade
new file mode 100644
index 000000000..c2e11601d
--- /dev/null
+++ b/utils/test/vnfcatalogue/VNF_Catalogue/views/vnf_tag_association.jade
@@ -0,0 +1,167 @@
+doctype html
+//
+ Copyright (c) 2017 Kumar Rishabh and others.
+ All rights reserved. This program and the accompanying materials
+ are made available under the terms of the Apache License, Version 2.0
+ which accompanies this distribution, and is available at
+ http://www.apache.org/licenses/LICENSE-2.0
+html(lang='en')
+html
+ head
+ title= title
+ //
+ link(rel='stylesheet', href='/3rd_party/materialize/css/materialize.css')
+ script(type='text/javascript', src='https://code.jquery.com/jquery-3.1.1.min.js')
+ //
+ script(src='/javascripts/global.js')
+ //
+ script(src='/3rd_party/materialize/js/materialize.js')
+ link(href='https://fonts.googleapis.com/icon?family=Material+Icons', rel='stylesheet')
+ link(rel='stylesheet', href='/stylesheets/style.css')
+ script(src='/3rd_party/typeahead.js')
+ script(src='/javascripts/mode_edit.js')
+ body
+ h4.center
+ i.material-icons library_add
+ | Add a TAG to a VNF
+ .row
+ form#add_tag_form.col.s12(action='/add_tag', method='post')
+ .row.modal-form-row
+ .input-field.col.s6 VNF Name
+ .input-field.col.s6 TAG Name
+ .row.modal-form-row
+ #scrollable-dropdown-menu.input-field.col.s6
+ input#tag_name.typeahead(type='text', name='tag_name')
+ //
+ label.left-align(for='tag_name') VNF Name
+
+ .input-field.col.s6
+ input#tag_name.validate(type='text', name='vnf_name')
+ //
+ label.left-align(for='tag_name') TAG Name
+ .row.modal-form-row
+ .input-field.col.s6
+ .input-field.col.s6
+ .row.modal-form-row
+ button#add_tag_button.modal-action.modal-close.waves-effect.waves-light.btn.right
+ | Submit
+ i.material-icons.right send
+style.
+ #scrollable-dropdown-menu .tt-menu {
+ max-height: 150px;
+ overflow-y: auto;
+ }
+
+ .typeahead, .tt-query, .tt-hint {
+ border: 2px solid #CCCCCC;
+ border-radius: 8px 8px 8px 8px;
+ font-size: 24px;
+ height: 30px;
+ line-height: 30px;
+ outline: medium none;
+ padding: 8px 12px;
+ width: 396px;
+ }
+ .typeahead {
+ background-color: #FFFFFF;
+ }
+ .typeahead:focus {
+ border: 2px solid #0097CF;
+ }
+ .tt-query {
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
+ }
+ .tt-hint {
+ color: #999999;
+ }
+ .tt-dropdown-menu {
+ background-color: #FFFFFF;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 8px 8px 8px 8px;
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+ margin-top: 12px;
+ padding: 8px 0;
+ width: 422px;
+ }
+ .tt-suggestion {
+ font-size: 18px;
+ line-height: 24px;
+ padding: 3px 20px;
+ }
+ .tt-suggestion.tt-cursor {
+ background-color: #0097CF;
+ color: #FFFFFF;
+ }
+ .tt-suggestion p {
+ margin: 0;
+ }
+ .tt-dropdown-menu, .gist {
+ text-align: left;
+ }
+ /*
+ html {
+ overflow-y: scroll;
+ }
+ .container {
+ margin: 0 auto;
+ max-width: 750px;
+ text-align: center;
+ }
+
+ html {
+ color: #333333;
+ font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ line-height: 1.2;
+ }
+ .title, .example-name {
+ font-family: Prociono;
+ }
+ p {
+ margin: 0 0 10px;
+ }
+ .title {
+ font-size: 64px;
+ margin: 20px 0 0;
+ }
+ .example {
+ padding: 30px 0;
+ }
+ .example-name {
+ font-size: 32px;
+ margin: 20px 0;
+ }
+ .demo {
+ margin: 50px 0;
+ position: relative;
+ }
+ */
+ /*
+ .gist {
+ font-size: 14px;
+ }
+ .example-twitter-oss .tt-suggestion {
+ padding: 8px 20px;
+ }
+ .example-twitter-oss .tt-suggestion + .tt-suggestion {
+ border-top: 1px solid #CCCCCC;
+ }
+ .example-twitter-oss .repo-language {
+ float: right;
+ font-style: italic;
+ }
+ .example-twitter-oss .repo-name {
+ font-weight: bold;
+ }
+ .example-twitter-oss .repo-description {
+ font-size: 14px;
+ }
+ .example-sports .league-name {
+ border-bottom: 1px solid #CCCCCC;
+ margin: 0 20px 5px;
+ padding: 3px 0;
+ }
+ .example-arabic .tt-dropdown-menu {
+ text-align: right;
+ }
+ */