Adding "AdminLTE" theme on Aurelia

Best Practices
1

Good morning,

i’m new with Aurelia Framework. I’m trying to insert a custom theme css for my project and i chose for “AdminLTE” theme ( https://adminlte.io/themes/AdminLTE/index.html ) because i think it’s quite complete for me.
The problem is that when i run the site some javascript doesn’t work, for example the datepicker doesn’t work.

Index.html:

- Aurelia 
<link rel="stylesheet" href="/dist/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/dist/adminlte/bower_components/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="/dist/adminlte/bower_components/Ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="/dist/adminlte/bower_components/bootstrap-daterangepicker/daterangepicker.css" />
<link rel="stylesheet" href="/dist/adminlte/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" />
<link rel="stylesheet" href="/dist/adminlte/bower_components/morris.js/morris.css" />

<link rel="stylesheet" href="/dist/adminlte/css/AdminLTE.css" />
<link rel="stylesheet" href="/dist/adminlte/css/skins/_all-skins.min.css">

<link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">

<link rel="stylesheet" href="/dist/vendor.css?v=b_M7vdGvPSJOo55_XCEeI_fYCVztjxk08tEeZj5UyoU" />

<div aurelia-app="boot">Loading...</div>

<script type="text/javascript" src="/dist/vendor.js?v=8kh55HdjmafGVyQfWaHURccoz4Vi-HAb9obSOc7CDCk"></script>
<script type="text/javascript" src="/dist/app.js?v=woz_9TCSywaoWqXnYujNaqDZF5o3lbZelqMrul38gyw"></script>

<!-- jQuery 3 -->
<script src="/dist/adminlte/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/dist/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Select2 -->
<script src="/dist/adminlte/bower_components/select2/dist/js/select2.full.min.js"></script>
<!-- InputMask -->
<script src="/dist/adminlte/plugins/input-mask/jquery.inputmask.js"></script>
<script src="/dist/adminlte/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="/dist/adminlte/plugins/input-mask/jquery.inputmask.extensions.js"></script>
<!-- date-range-picker -->
<script src="/dist/adminlte/bower_components/moment/min/moment.min.js"></script>
<script src="/dist/adminlte/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- bootstrap datepicker -->
<script src="/dist/adminlte/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<!-- bootstrap color picker -->
<script src="/dist/adminlte/bower_components/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
<!-- bootstrap time picker -->
<script src="/dist/adminlte/plugins/timepicker/bootstrap-timepicker.min.js"></script>
<!-- SlimScroll -->
<script src="/dist/adminlte/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- iCheck 1.0.1 -->
<script src="/dist/adminlte/plugins/iCheck/icheck.min.js"></script>
<!-- FastClick -->
<script src="/dist/adminlte/bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="/dist/adminlte/dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/dist/adminlte/dist/js/demo.js"></script>
<!-- Page script -->
<script>
    $(function () {
        //Initialize Select2 Elements

        //Date picker
        $('#datepicker').datepicker({
            autoclose: true
        })

        //Timepicker
        $('.timepicker').timepicker({
            showInputs: false
        })
    })
</script>

and this a part of the html component of my home page.
Home.html:

i don’t understand why control doesn’t see the scripts or by the way it doesn’t execute this:

"
//Date picker
$(’#datepicker’).datepicker({
autoclose: true
})
"

EDIT:

Now i’m able to open the calendary but when i change page with routing than i return in my home page the control doesn’t work. The calender wouldn’t open… as if the scripts disappear

1 Like
2

I’d suggest wrapping those jquery components in an aurelia component firing the datepicker() or timepicker() methods within the attached() method of the view model of the component.

You can extend the example below with more logic to bind data into and out of as well

As an example:
some-component.html

<template>
   <div class="input-group date">
      <div class="input-group-addon">
         <i class="fa fa-calendar"></i>
      </div>
      <input type="text" class="form-control pull-right" ref="element">
   </div>
</template>

some-component.js

export class SomeComponent {
   attached() {
      $(this.element).datepicker({
         autoclose: true
      })
   }
}
1 Like
3

Aside from that it’s likely that if your using webpack you’ll need to configure jquery to be static via the ProvidePlugin({...}) unless that’s completely gone away now it’s been awhile since I’ve had to mess with my webpack configuration but I remember jquery plugins getting lost in the loading process and it looks like Adminlte plugins like datepicker would have similar issues.

1 Like
4

Thank you a lot! I’ll look for ProvidePlugin({…})

5

I’m working with typescript…

6

Would you be able to setup a gist.run to showcase the problem?

You could try what John did within this topic https://stackoverflow.com/questions/39278294/using-admin-lte-with-aurelia

He basically added $.AdminLTE.layout.fix(); to the attached section of his main app view model and it seemed to correct the components. Hard to say if it’d be relevant for you.

import $ from 'jquery';

export class App {
    attached() {
        $.AdminLTE.layout.fix();
    }
}
7

Hello;
Did you get it working.
Would you share the configured template with the Aurelia Community?
Thanks

8

img
img.png1915×928 124 KB

i’m able to work with this template putting adminlte data in the wwwroot in a aspnetcore project
i have also a javascript project that works with adminlte.

But i’m still testing and learning a better configuration :smiley:

9

Hi @AndreaProgrammerIt did you get AdminLTE it to work with Aurelia CLI? Or do you refer to another JS project?

I’m very interested in making AdminLTE work well with Aurelia but I keep getting stuck

10

Hi wimco,

I added the files from their site ( https://adminlte.io/ ) in our dist directory… then I added the references in the index.html file.

Hope I could help you,
Andrea