Initial commit

app/assets/css/main.css

@@ -0,0 +1,123 @@
+#main{
+    padding-top: 50px;
+}
+.vuln-details{
+    border-collapse: collapse;
+}
+.vuln-details td, .vuln-details th {
+    padding: 5px;
+    border: 1px solid gray;
+}
+
+.toggle-warning {
+    float: left;
+    margin-right: 7px;
+}
+
+.versionless-dependency:not(:hover) .related-links{
+    display: none;
+}
+
+.description{
+    border-left: 3px solid black;
+    margin-bottom: 3px;
+    padding-left: 5px;
+}
+.badge a{
+    color: yellow;
+}
+h2:before, h3:before, h4:before, h5:before, h6:before {
+    display: block;
+    content: " ";
+    margin-top: -50px;
+    height: 50px;
+    visibility: hidden;
+}
+#project-selector{
+    float: left;
+    padding: 5px;
+    padding-top: 10px;
+}
+#project-selector button{
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+#project-selector .dropdown-menu{
+    max-height: 300px;
+    overflow: auto;
+}
+#project-selector .base-project a{
+    font-weight: bolder;
+}
+
+h3.library-identification{
+    border: 1px solid black;
+    padding: 5px;
+}
+
+.library-identification-badge-hack{
+    display: inline-block;
+    width: 1px;
+    padding-right: 0;
+    padding-left: 0;
+    margin-left: 0;
+    margin-right: 0;
+    visibility: hidden;
+}
+
+.jqplot-table-legend{
+    background-color: rgba(255, 255, 255, 0.25);
+    padding: 5px;
+    margin-right: 5px;
+}
+
+.jqplot-table-legend-swatch{
+    height: 10px;
+    width: 10px;
+    margin-right: 5px;
+}
+.jqplot-data-label{
+    color: white;
+    font-weight: bold;
+}
+
+.severity{
+    font-size: smaller;
+    margin-bottom: 5px;
+}
+
+.severity .score{
+    font-weight: bolder;
+}
+
+.explained{
+    border-bottom: 1px dashed black;
+}
+.explained:after{
+    content: "?";
+    font-weight: bold;
+    display: inline-block;
+    color: white;
+    background-color: black;
+    border: 1px solid black;
+    border-radius: 100%;
+    text-align: center;
+    vertical-align: middle;
+    height: 1.5em;
+    width: 1.5em;
+    margin-left: 0.5em;
+    font-size: 50%;
+}
+.explained:hover{
+    border-bottom-color: blue;
+}
+.explained:hover:after{
+    background-color: blue;
+    border-color: blue;
+}
+
+.help{
+    border-left: 5px solid #00c7ff;
+    padding-left: 10px;
+}

app/assets/js/main.js

@@ -0,0 +1,59 @@
+function toggleTag(el){
+    var btn = $(el);
+    var tagId = parseInt(btn.attr("data-tag-id"));
+    var libraryId = parseInt(btn.attr("data-library-id"));
+    btn.attr({disabled: true});
+    var add = !btn.hasClass("btn-success");
+    var libraryTagPair = {tagId: tagId, libraryId: libraryId};
+    $.ajax({
+        url: add ? Routes.addTag : Routes.removeTag,
+        method: 'POST',
+        //dataType: 'json',
+        data: JSON.stringify(
+            add ? { libraryTagPair: libraryTagPair, contextDependent: false} : libraryTagPair
+        ),
+        contentType : 'application/json',
+        success: function(){
+            if(add){
+                btn.addClass("btn-success");
+            }else{
+                btn.removeClass("btn-success");
+            }
+            btn.attr({disabled: false});
+            //alert("SUCCESS "+add);
+        },
+        error: function(){
+            alert("FAILED!");
+            btn.addClass("btn-danger");
+            // Can't enable the button as we can't be sure about the current state
+        }/*,
+        complete: function(a, b){
+            console.log("complete", a, b);
+            alert(["complete", a, b]);
+        }*/
+    });
+}
+function toggleClassified(el){
+    var btn = $(el);
+    var libraryId = parseInt(btn.attr("data-library-id"));
+    btn.attr({disabled: true});
+    var classifiedNewValue = !btn.hasClass("btn-success");
+    $.ajax({
+        url: Routes.controllers.Application.setClassified(classifiedNewValue).url,
+        method: 'POST',
+        contentType : 'application/json',
+        data: ""+libraryId,
+        success: function(){
+            if(classifiedNewValue){
+                btn.addClass("btn-success");
+            }else{
+                btn.removeClass("btn-success");
+            }
+            btn.attr({disabled: false});
+        },
+        error: function(){
+            alert("FAILED!");
+            btn.addClass("btn-danger");
+        }
+    });
+}