We Keep Coding

Is it possible to change the image style of a bootstrap progress bar?

I am attempting to change the style of a bootstrap progress bar, and place the current percentage value in it. Clicking the button allows the value (width) to change, but not the background or text value.
Here is the code.
$(function() {
$(document).ready(function() {
$("#progress-bar1").css("width", "50%");
$("#progress-bar1").attr("aria-valuenow", "50%");
});
});
$(document).ready(function() {
$("#btnSubmit").click(function() {
$('#progress-bar1').css("width", "10%");
$("#progress-bar1").attr("progress-bar-danger", "10");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="progress">
<div class="progress-bar progress-bar-striped active" id="progress-bar1" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
50%
</div>
</div>
<input id="btnSubmit" type="submit" value="Update" />

You need to add the class progress-bar-danger and update the text to 10%:-
$("#btnSubmit").click(function(){
$('#progress-bar1')
.addClass('progress-bar-danger') // change to red
.css("width", "10%") // change width to 10%
.attr('aria-valuenow', 10) // change value to 10
.text('10%'); // change text to 10%
});
Fiddle

You can create a jQuery plugin to set the progress value.
(function($) {
$.progressArray = ['danger', 'warning', 'info', 'success'];
$.fn.setProgress = function(percentVal) {
percentVal = percentVal === 0 ? 0 : percentVal || parseInt(this.attr('aria-valuenow'), 10) || 0;
percentVal = Math.min(100, Math.max(0, percentVal));
var progressIndex = Math.ceil(percentVal / 25) - 1;
return this.css('width', percentVal + '%')
.attr('aria-valuenow', percentVal)
.text(percentVal + '%')
.removeClass($.progressArray.map(cls => 'progress-bar-' + cls).join(' '))
.addClass('progress-bar-' + $.progressArray[progressIndex]);
};
$.fn.addProgress = function(percentVal) {
return this.setProgress((parseInt(this.attr('aria-valuenow'), 10) || 0) + percentVal);
};
$.fn.setTooltipText = function(text) {
return this.tooltip('hide').attr('data-original-title', text).tooltip('fixTitle');
};
$.fn.replaceTooltipText = function(regex, repl) {
return this.setTooltipText(this.attr('data-original-title').replace(regex, repl));
};
})(jQuery);
$(function() {
$('[data-toggle="tooltip"]').tooltip({ placement : 'bottom' });
var $progressBar = $("#progress-bar-1").setProgress();
$('#btn-decr').on('click', function() {
$progressBar.addProgress(-parseInt($('#progress-step').val(), 10));
});
$('#btn-incr').on('click', function() {
$progressBar.addProgress(parseInt($('#progress-step').val(), 10));
});
$('#progress-step').on('keyup change', function() {
var pattern = /\d+(\.\d+)?/g, replacement = $('#progress-step').val();
$('#btn-decr').replaceTooltipText(pattern, replacement);
$('#btn-incr').replaceTooltipText(pattern, replacement);
});
});
.tooltip-inner {
font-size: 1.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="progress">
<div class="progress-bar progress-bar-striped active" id="progress-bar-1" role="progressbar"
aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-sm-5 col-md-2 text-center">
<button type="button" class="btn btn-primary" id="btn-decr"
data-toggle="tooltip" title="Decrease Progress by 25%">
<i class="fa fa-arrow-down"></i> %
</button>
</div>
<div class="col-sm-2 col-md-2">
<input type="number" class="form-control" id="progress-step"
min="0" max="100" step="10" data-buttons="true" value="25" />
</div>
<div class="col-sm-5 col-md-2 text-center">
<button type="button" class="btn btn-primary" id="btn-incr"
data-toggle="tooltip" title="Increase Progress by 25%">
<i class="fa fa-arrow-up"></i> %
</button>
</div>
</div>
</div>

You would have to modify the "background-image" css property. In your HTML code, try adding the following, as an example:
<style>
#progress-bar1{
background-image: none;
background-color: green;
}
</style>

How to create and store value of the progress bars in local storage

First,I have a textarea for tasks and an add button. When the button is clicked it will be stored in the database.All I want to do is to output the task with a progress bar and buttons for increment and decrement.
Does anyone know about bootstrap progress bar?
The progress bar must be incremented and decremented.
and the last value must be the latest value of it when a user came back to that progress bar.
I think jquery and javascript is the best solution for this. But I do not know how :( Can someone please help.
heres the code for the output:
<html>
<head>
<title>
Customize Bootstrap progressbar
</title>
<link href="bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body style="margin-top: 100px">
<div class=" col-sm-6 col-sm-offset-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Customize Bootstrap progressbar
</h3>
</div>
<div class="panel-body" style="padding-top: 50px">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0 %" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
</div>
</div>
</div>
<div class="panel-footer">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default" onclick="progress.increment(10)">
Increment
</button>
<button type="button" class="btn btn-default" onclick="progress.decrement(10)">
Decrement
</button>
<button type="button" class="btn btn-default"onclick="progress.reset()">
Reset
</button>
<button type="button" class="btn btn-default"onclick="progress.complete()">
Complete
</button>
</div>
</div>
</div>
</div>
</body>
<script src="jquery/jquery.min.js">
</script>
<script>
var progress = (function ($) {
var progress = $('.progress'),
progress_bar = $('.progress-bar'),
total_width = progress.width();
function calculatePercentage(increment_by,is_increment) {
var progress_percentage;
if (is_increment == true) {
progress_percentage = Math.round((progress_bar.width() / total_width) * 100 + increment_by) ;
progress_percentage = (progress_percentage > 100) ? 100 : progress_percentage;
} else {
progress_percentage = Math.round((progress_bar.width() / total_width) * 100 - increment_by) ;
progress_percentage = (progress_percentage < 0) ? 0 : progress_percentage;
}
return progress_percentage;
}
return{
increment: function (increment_by) {
var progress_percentage = calculatePercentage(increment_by, true);
progress_bar.css('width',progress_percentage + '%').attr('aria-valuenow', progress_percentage + ' %');
},
decrement: function (decrement_by) {
var progress_percentage = calculatePercentage(decrement_by, false);
progress_bar.css('width',progress_percentage+'%').attr('aria-valuenow', progress_percentage + ' %');
},
reset: function () {
progress_bar.css('width',0 + '%').attr('aria-valuenow', 0 + ' %');
},
complete: function () {
progress_bar.css('width',100 + '%').attr('aria-valuenow', 100 + ' %');
}
};
})( jQuery);
</script>
enter image description here

You need to implement the localStorage as shown below. Also I have converted the code to a jQuery plugin, which will be initialized per widget. All your progressBars are incremented at once as you are using something like progress_bar = $('.progress-bar') which means you are picking up all the progress_bars on the page, not targetting a single progress bar. I have create an attachEvent inside the plugin code, so you do not need to initialize the events from the dom. In general its a good practice to attach events from the script.
I would suggest adding a function createHTML for your HTML creation and call that code in init to create your HTML. You can use the same localStorage to track how many progress bars you have on page, when you refresh the page, and need to recreate the progress bars.
Try using templates for the html, as repeated html is not ideal.
<html>
<head>
<title>
Customize Bootstrap progressbar
</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
</head>
<body style="margin-top: 100px">
<div class=" col-sm-6 col-sm-offset-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Customize Bootstrap progressbar
</h3>
</div>
<div id="progress-bar-1" class="progress-bar-widget">
<div class="panel-body" style="padding-top: 50px">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0 %" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
</div>
</div>
</div>
<div class="panel-footer">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default increment">
Increment
</button>
<button type="button" class="btn btn-default decrement" >
Decrement
</button>
<button type="button" class="btn btn-default reset">
Reset
</button>
<button type="button" class="btn btn-default complete">
Complete
</button>
</div>
</div>
</div>
<div id="progress-bar-2" class="progress-bar-widget">
<div class="panel-body" style="padding-top: 50px" class="progress-bar-widget">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0 %" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
</div>
</div>
</div>
<div class="panel-footer">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default increment" >
Increment
</button>
<button type="button" class="btn btn-default decrement" ">
Decrement
</button>
<button type="button" class="btn btn-default reset">
Reset
</button>
<button type="button" class="btn btn-default complete">
Complete
</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
(function ($) {
$.fn.progressBar = function( ) {
var widget = $(this),
progress = $(this).find('.progress'),
progress_bar = $(this).find('.progress-bar'),
total_width = progress.width();
function init() {
var curr_progress = getLocalStorage();
if(curr_progress) {
progress_bar.css('width',curr_progress + '%').attr('aria-valuenow', curr_progress + ' %');
}
attachEvents();
}
function attachEvents() {
widget.find('.increment').on("click", function(){increment(10);});
widget.find('.decrement').on("click", function(){decrement(10);});
widget.find('.reset').on("click", reset);
widget.find('.complete').on("click", complete);
}
function calculatePercentage(increment_by,is_increment) {
var progress_percentage;
if (is_increment == true) {
progress_percentage = Math.round((progress_bar.width() / total_width) * 100 + increment_by) ;
progress_percentage = (progress_percentage > 100) ? 100 : progress_percentage;
} else {
progress_percentage = Math.round((progress_bar.width() / total_width) * 100 - increment_by) ;
progress_percentage = (progress_percentage < 0) ? 0 : progress_percentage;
}
return progress_percentage;
}
function getLocalStorage() {
return localStorage.getItem(widget.attr('id'));
}
function setLocalStorage(val) {
localStorage.setItem(widget.attr('id'), val);
}
function increment(increment_by) {
var progress_percentage = calculatePercentage(increment_by, true);
setLocalStorage(progress_percentage);
progress_bar.css('width',progress_percentage + '%').attr('aria-valuenow', progress_percentage + ' %');
};
function decrement (decrement_by) {
var progress_percentage = calculatePercentage(decrement_by, false);
setLocalStorage(progress_percentage);
progress_bar.css('width',progress_percentage+'%').attr('aria-valuenow', progress_percentage + ' %');
};
function reset () {
setLocalStorage(0);
progress_bar.css('width',0 + '%').attr('aria-valuenow', 0 + ' %');
};
function complete () {
setLocalStorage(100);
progress_bar.css('width',100 + '%').attr('aria-valuenow', 100 + ' %');
}
init();
}
$('.progress-bar-widget').each(function(index, elem){
$(elem).progressBar();
});
})( jQuery);
</script>
Hope it helped! :) All the best!

How to Print the Particular bootstrap Div

I would like to print a bootstrap div.
It is properly displayed in web browser but when I click on the print button then at print preview, the elements are floating and are not properly displayed.
what should I do to solve this problem ?
Div which I want to print with following this style
What I get the output at printing time which I dont want see on school name at the top
Button which call the print function:
<button class="btn btn-default" onclick="printDiv('printableArea')"><i class="fa fa-print" aria-hidden="true" style=" font-size: 17px;"> Print</i></button>
Print Function:
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
Div which i Want to print
<div class="container right-container col-md-6" id="printableArea" style="display:block;">
<span id="link7">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h3 id="school_title"><?php echo "$school_name";?> </h3>
<p><p>
<p style="font-size: 1.1em;" id="exam_title">Annual Examination [ 2015-2016 ] <p>
<div class="row">
<div class="col-md-4">
<div class="header-time-date-marks">
<span id="exam_time">Time: 12 AM - 2 PM</span>
<span id="exam_date">Date: 30/12/2016</span>
</div>
</div>
<div class="col-md-8 header-time-date-marks" style="text-align: right;padding-right: 36px;">
<span id="exam_marks">100 Marks</span>
</div>
</div>
</div>
</div>
<hr / id="line" style="margin-top: 13px;">
<div class="row q-question-type-style" id='question_section'>
</div>
</span>
</div>

Check this solution: It is working. The <div> is able to display for print.
Place your <script>-tag above the <html>-tag:
<script>
<html>
https://jsfiddle.net/6cz5br7m/

It's working, just try it on your Editor.
<!-- Your Jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Another Jquery version, which will be compatible with PrintThis.js -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<!-- CDN/Reference To the pluggin PrintThis.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.15.0/printThis.js"
integrity="sha512-Fd3EQng6gZYBGzHbKd52pV76dXZZravPY7lxfg01nPx5mdekqS8kX4o1NfTtWiHqQyKhEGaReSf4BrtfKc+D5w=="
crossorigin="anonymous"></script>
<script type="text/javascript">
// important : to avoid conflict between the two version of Jquery
var j = jQuery.noConflict(true);
// define a function that you can call as an EventListener or whatever you want ...
function Print_Specific_Element() {
// the element's id must be unique ..
// you can't print multiple element, but can put them all in one div and give it an id, then you will be able to print them !
// use the 'j' alias to call PrintThis, with its compatible version of jquery
j('#specificElement').printThis({
importCSS: true, // to import the page css
importStyle: true, // to import <style>css here will be imported !</style> the stylesheets (bootstrap included !)
loadCSS: true, // to import style="The css writed Here will be imported !"
canvas: true // only if you Have image/Charts ...
});
}
$("#printBtn").click(Print_Specific_Element);
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- It's very important to include the attribute : media='all'-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" media='all'
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
#media print {
#page {
/* To give the user the possibility to choise between landscape and portrait printing format */
size: auto;
/* setting custom margin, so the date and the url can be displayed */
margin: 40px 10px 35px;
}
/* Here you can give a custom styling which will be applied only while printing */
a,
button#printBtn {
display: none;
}
}
</style>
</head>
<body>
<div class="container" id="Page">
<div>
this Element will not be printed
</div>
<div id="specificElement" class="bg-primary m-2 p-2 text-center rounded" style="border: 2px solid black;">
<div class="jumbotron">
<h1 class="display-3">
My custom content which I want to print
</h1>
<p class="lead">Another element</p>
<hr class="my-2">
<p>Nothing ... just another element </p>
<button id="printBtn" class="btn btn-success btn-sm shadow">
CLick Me !
<br>
(Dont worry I will not be printed)
</button>
</div>
</div>
</div>
</body>
</html>

Call this function: PrintElem('printableArea')
function PrintElem(elem){
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
var css = "";
var myStylesLocation = "${pageContext.request.contextPath}/ui/css/bootstrap.min.css";
$.ajax({
url: myStylesLocation,
type: "POST",
async: false
}).done(function(data){
css += data;
})
mywindow.document.write('<html><head><title></title>');
mywindow.document.write('<style type="text/css">'+css+' </style>');
// mywindow.document.write('<link rel="stylesheet" href="${pageContext.request.contextPath}/ui/css/bootstrap.min.css" type="text/css" media="print"/>');
mywindow.document.write('</head><body >');
mywindow.document.write('<h1>' + document.title + '</h1>');
mywindow.document.write(document.getElementById(elem).innerHTML);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
return true;
}

You can try #media print in css.
Like bellow
In css
#media print
{
p.bodyText {font-family:georgia, times, serif;}
.noprint
{
display:none
}
}
In Html
<div class="noprint">
I dont want it on print
</div>
<br><br>
<div>
Prrintable Area
</div>
Fiddle

I was able to look for the section that was undesirably appearing in the print of the modal, and just hiding it, while using your print function:
print() {
let mainLayout = document.querySelector('app-main-layout') as HTMLDivElement;
mainLayout.style.display = 'none';
window.print();
mainLayout.style.display = 'unset';
}
And, make the buttons of my modal go away, by using this css:
#media print {
button.close {display:none !important;}
}

you just need to link your js script properly
<!DOCTYPE html>
<html>
<body>
<div class="container right-container col-md-6" id="printableArea" style="display:block;">
<span id="link7">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h3 id="school_title"><?php echo "$school_name";?> </h3>
<p><p>
<p style="font-size: 1.1em;" id="exam_title">Annual Examination [ 2015-2016 ] <p>
<div class="row">
<div class="col-md-4">
<div class="header-time-date-marks">
<span id="exam_time">Time: 12 AM - 2 PM</span>
<span id="exam_date">Date: 30/12/2016</span>
</div>
</div>
<div class="col-md-8 header-time-date-marks" style="text-align: right;padding-right: 36px;">
<span id="exam_marks">100 Marks</span>
</div>
</div>
</div>
</div>
<hr / id="line" style="margin-top: 13px;">
<div class="row q-question-type-style" id='question_section'>
</div>
</span>
</div>
<div> <h1>
asdads
</h1>
</div>
<button class="btn btn-default" onclick="printDiv('printableArea')"><i class="fa fa-print" aria-hidden="true" style=" font-size: 17px;"> Print</i></button>
<script>
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
</body>
</html>

progress bar error in angular bootstrap application

I have the following angular app:
<!DOCTYPE html>
<html ng-app="StudentProgram">
<head>
<title>Student Program Management</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/badge.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="panel col-lg-3 col-md-3 col-sm-2">
<div ng-controller="mylistcontroller" class="" id="menu">
<br/>
<h4><font color=#636363>My Academic Programs</font><button id="tooltip1" type="button" class="btn btn-default pull-right" data-toggle="tooltip" data-placement="right" data-original-title="Add a Program"><span class="glyphicon glyphicon-plus-sign pull-right"></span></button></h4>
<div ng-repeat="prog in programs" class="list-group">
<a ng-repeat="list in prog.programstaken" href="#" class="list-group-item">
{{list.program}}<span class="badge badge-info pull-right">{{list.completed}} / {{list.required}}</span>
<div class="progress progress-striped">
<div class="progress-bar" ng-class="{'progress-bar-danger': getPercentage()<40, 'progress-bar-info': getPercentage()>=40 && getPercentage()<70, 'progress-bar-success': getPercentage()>=70}" role="progressbar" aria-valuenow="{{getPercentage()}}" aria-valuemin="0" aria-valuemax="100" style="{width:(getPercentage()+'%')}">
{{getPercentage()}}%
</div>
</div>
</a>
<!-- <a href="#" class="list-group-item">
AA.ARTS<span class="badge badge-info pull-right">29 / 60</span>
<div class="progress progress-striped">
<div class="progress-bar" role="progressbar" aria-valuenow="48.3" aria-valuemin="0" aria-valuemax="100" style="width: 48.3%;">
48.3%
</div>
</div>
</a> -->
</div>
</div>
<br/><br/>
</div>
</div>
<script id="tooltipid" type="text/javascript">
$(document).ready(function() {
$('#tooltip1').tooltip();
});
</script>
<script src="js/bootstrap.js"></script>
<script>
var app = angular.module('StudentProgram', ['ui.bootstrap']);
app.controller('mylistcontroller', function($scope, $modal, $log){
$scope.programs=[{programlist:[
{program:"AS.SCIENCE", completed:"32", required:"60"},
{program:"AA.ARTS", completed:"29", required:"60"},
{program:"AAS.BUSI.ADMIN", completed:"0", required:"60"},
{program:"AAS.MANAGEMENT", completed:"0", required:"60"},
{program:"AS.FS.BUSINESS", completed:"0", required:"60"},
{program:"AAS.NURSING", completed:"0", required:"60"}],
programstaken:[
{program:"AS.SCIENCE", completed:"32", required:"60"},
{program:"AA.ARTS", completed:"29", required:"60"}]}
];
$scope.getPercentage = function () {
return (($scope.programstaken.completed)/($scope.programstaken.required)*100).toFixed(2);
}
});
</script>
<br/>
</div>
</body>
</html>
The progress bar is not getting the value for the getPercentage() function. Where is my error?

The following are the problems that I've noticed in the code above:
You are trying to access the completed and required property of each repeated item of your programstaken array without providing a reference of the current item.
You didn't use the angular-ui progressbar directve and its properties max, value, and type to manipulate angular-ui's progressbar.
You can place your logic in a controller function to determine the percentage and the progressbar color to assign to the type property of the progressbar directive.
Solution:
1 Create controller functions with an access to the current reference of the repeated item, e.g. add a parameter as a reference to such function.
2. Make use of the angular-ui progressbar directives' properties by assigning them with the programstaken item properties. Create a controller function to determine the progressbar color considering what I mentioned in 1.
max = required
value = completed
type = getProgressType()
See this PLUNKER for the live demo.
HTML
change
<div class="progress progress-striped">
<div class="progress-bar" ng-class="{'progress-bar-danger': getPercentage()<40, 'progress-bar-info': getPercentage()>=40 && getPercentage()<70, 'progress-bar-success': getPercentage()>=70}" role="progressbar" aria-valuenow="{{getPercentage()}}" aria-valuemin="0" aria-valuemax="100" style="{width:(getPercentage()+'%')}">
{{getPercentage()}}%
</div>
</div>
to
<progressbar class="progress-striped active" max="list.required" value="list.completed" type="{{getProgressType(list)}}">{{getPercentage(list)}}%</progressbar>
JAVASCRIPT
change
$scope.getPercentage = function () {
return (($scope.programstaken.completed)/($scope.programstaken.required)*100).toFixed(2);
}
to
$scope.getPercentage = function(item) {
return ((item.completed / item.required) * 100.00).toFixed(2);
};
$scope.getProgressType = function(item) {
var percent = $scope.getPercentage(item);
if(percent < 40) return 'danger';
if(percent < 70) return 'info';
return 'success';
};

$scope.programstaken isn't being defined.
programstaken is buried within an Array called $scope.programs and the array syntax is broken.
I think what you want is for $scope.programs to be an Object:
$scope.programs={
programlist:[
{program:"AS.SCIENCE", completed:"32", required:"60"},
{program:"AA.ARTS", completed:"29", required:"60"},
{program:"AAS.BUSI.ADMIN", completed:"0", required:"60"},
{program:"AAS.MANAGEMENT", completed:"0", required:"60"},
{program:"AS.FS.BUSINESS", completed:"0", required:"60"},
{program:"AAS.NURSING", completed:"0", required:"60"}
],
programstaken:[
{program:"AS.SCIENCE", completed:"32", required:"60"},
{program:"AA.ARTS", completed:"29", required:"60"}
]
};
then you would access it as $scope.programs.programstaken rather than $scope.programstaken

Firebase Storage and Dropzone.js multiple image upload on button press

Essentially what I am trying to do, is allow people to add files, then on button press upload the images to Firebase storage. I decided to use Dropzone.js because of the well written and customizable the package is but I am still stumped.
I have this code which allows me to upload multiple images to Firebase, however, I want it to fit the framework seen below this code:
HTML
<input type="file" id="file" name="file" multiple/>
JS
var auth = firebase.auth();
var storageRef = firebase.storage().ref();
//Handle waiting to upload each file using promise
function uploadImageAsPromise (imageFile) {
return new Promise(function (resolve, reject) {
var storageRef = firebase.storage().ref("/sth/"+imageFile.name);
//Upload file
var task = storageRef.put(imageFile);
//Update progress bar
task.on('state_changed',
function progress(snapshot){
// Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log('Upload is ' + progress + '% done');
},
function error(err){
},
function complete(){
var downloadURL = task.snapshot.downloadURL;
}
);
});
}
window.onload = function() {
document.getElementById('file').addEventListener('change', function(e){
//Get files
for (var i = 0; i < e.target.files.length; i++) {
var imageFile = e.target.files[i];
uploadImageAsPromise(imageFile);
}
});
document.getElementById('file').disabled = true;
auth.onAuthStateChanged(function(user) {
if (user) {
document.getElementById('file').disabled = false;
} else {
console.log('You need to sign in.');
}
});
}
What I'm Trying To Accomplish
I would like to incorporate the above upload functionality into the below snippet. When I press submit id like the progress bar to show and the files to be uploaded. Dropzone said I am supposed to specify the function where it says URL: but I don't know how to reference it. Also, dropzone said the function must return the downloaded URL.
// Get the template HTML and remove it from the doument
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
var submitButton = document.querySelector('#submit-button');
var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
url: "/", // Set the url
thumbnailWidth: 80,
thumbnailHeight: 80,
parallelUploads: 20,
previewTemplate: previewTemplate,
autoQueue: false, // Make sure the files aren't queued until manually added
previewsContainer: "#previews", // Define the container to display the previews
clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
});
// Update the total progress bar
myDropzone.on("totaluploadprogress", function(progress) {
document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
});
myDropzone.on("sending", function(file) {
// Show the total progress bar when upload starts
document.querySelector("#total-progress").style.opacity = "1";
// And disable the start button
file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
});
submitButton.addEventListener('click', function(){
myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
myDropzone.on("queuecomplete", function(progress) {
document.querySelector("#total-progress").style.opacity = "0";
//DO STUFF
});
});
#actions {
margin: 2em 0;
}
/* Mimic table appearance */
div.table {
display: table;
}
div.table .file-row {
display: table-row;
}
div.table .file-row > div {
display: table-cell;
vertical-align: top;
border-top: 1px solid #ddd;
padding: 8px;
}
div.table .file-row:nth-child(odd) {
background: #f9f9f9;
}
/* The total progress gets shown by event listeners */
#total-progress {
opacity: 0;
transition: opacity 0.3s linear;
}
/* Hide the progress bar when finished */
#previews .file-row.dz-success .progress {
opacity: 0;
transition: opacity 0.3s linear;
}
/* Hide the delete button initially */
#previews .file-row .delete {
display: none;
}
/* Hide the start and cancel buttons and show the delete button */
#previews .file-row.dz-success .start,
#previews .file-row.dz-success .cancel {
display: none;
}
#previews .file-row.dz-success .delete {
display: block;
}
<!DOCTYPE html>
<!--[if IE 9]> <html lang="zxx" class="ie9"> <![endif]-->
<!--[if gt IE 9]> <html lang="zxx" class="ie"> <![endif]-->
<!--[if !IE]><!-->
<html dir="ltr" lang="zxx">
<!--<![endif]-->
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- Import and configure the Firebase SDK -->
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "<your-api-key>",
authDomain: "<your-auth-domain>",
databaseURL: "<your-database-url>",
projectId: "<your-project-id>",
storageBucket: "<your-storage-bucket>",
messagingSenderId: "<your-messaging-id>"
};
firebase.initializeApp(config);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.2.0/dropzone.js"></script>
</head>
<body class=" ">
<!-- banner start -->
<!-- ================ -->
<div class="pv-40 banner light-gray-bg">
<div class="container clearfix">
<h3>Add Images</h3>
<div id="actions" class="row">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
</span>
</div>
</div>
<div class="table table-striped files" id="previews">
<div id="template" class="file-row">
<!-- This is used as the file preview template -->
<div>
<span class="preview"><img data-dz-thumbnail /></span>
</div>
<div>
<p class="name" data-dz-name></p>
<strong class="error text-danger" data-dz-errormessage></strong>
</div>
<div>
<p class="size" data-dz-size></p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
</div>
</div>
<div>
<button data-dz-remove class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
<button data-dz-remove class="btn btn-danger delete">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- banner end -->
<!-- main-container start -->
<!-- ================ -->
<section class="main-container padding-ver-clear">
<div class="container pv-40">
<div style="text-align: center;">
<button id="submit-button" type="submit" value="Submit" class="btn btn-danger btn-lg start">Submit <i class="fa fa-external-link"></i></button>
<div class="col-lg-5">
<!-- The global file processing state -->
<span class="fileupload-process">
<div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
</div>
</span>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>

You could use the 'addedfile' event to trigger your custom upload function like this:
myDropzone.on("addedfile", function(){
uploadImageAsPromise(file);
});
and omit the dropzone upload functionality completely.
To get the progress data use only the firebase put().on(state_changed) method and omit dropzone progress again.
You've probably solved this by now, so I'd love some feedback on this answer since I am working with dropzone and firebase myself at the moment.