spinning wheel display a spinning icon gif during network traffic. Fixes the following from first patch: 1 primary key set in span as opposed to appended, so it only appears once. 2. call hide for the network activity icon only in success or failure functions, not multiple times

2025-02-25 18:55:28 -06:00 · 2011-01-10 21:14:51 -05:00
parent 74d8a3c487
commit c385db4fc0
11 changed files with 72 additions and 9 deletions
--- a/install/static/Makefile.am
+++ b/install/static/Makefile.am
@@ -70,6 +70,9 @@ app_DATA =                              \
 	ui-icons_ffffff_256x240.png \
 	FreeWay.otf \
 	FreeWay-Bold.otf \
+	spinner_header.gif \
+	spinner_large.gif \
+	spinner_small.gif \
 	$(NULL)

 EXTRA_DIST =                            \
--- a/install/static/details.js
+++ b/install/static/details.js
@@ -554,6 +554,11 @@ IPA.details_facet = function (spec) {

        container.attr('title', that.entity_name);

+        $('<h1/>',{
+            html: "<span id='headerpkey' />"+that.entity_name + ' Settings'
+        }).append(IPA.create_network_spinner()).
+            appendTo(container);
+
        var details = $('<div/>', {
            'class': 'content'
        }).appendTo(container);
@@ -573,8 +578,6 @@ IPA.details_facet = function (spec) {
            'name': 'update'
        }).appendTo(buttons);

-        details.append('<br/>');
-        details.append('<hr/>');

        for (var i = 0; i < that.sections.length; ++i) {
            var section = that.sections[i];
@@ -651,14 +654,17 @@ IPA.details_facet = function (spec) {

    function load(record) {
        that.record = record;
-
        for (var i=0; i<that.sections.length; i++) {
            var section = that.sections[i];
            section.load(record);
        }
+        if (that.pkey){
+            $('h1 #headerpkey',that.container).html(that.pkey+": ");
+        }
    }

    function reset() {
+
        for (var i=0; i<that.sections.length; i++) {
            var section = that.sections[i];
            section.reset();
--- a/install/static/index.html
+++ b/install/static/index.html
@@ -45,12 +45,15 @@
    <link rel="stylesheet" type="text/css" href="ipa.css" />
 </head>

-<body>
+<body> 
  <div class="center-container">
    <div class="header" >
      <span class="header-logo">
        <a href="#"><img src="ipalogo.png" /></a>
      </span>
+      <span id="header-network-activity-indicator" class="network-activity-indicator">
+        <img src="spinner_header.gif" />
+      </span>
      <span id="loggedinas" class="header-loggedinas">
        <a href="#"><span id="login_header">Logged in as</span>: <strong>user@FREEIP.ORG</strong></a>
      </span>
--- a/install/static/ipa.css
+++ b/install/static/ipa.css
@@ -22,6 +22,10 @@ body{
    margin: 0;
 }

+.network-activity-indicator{
+    display:none;
+}
+
 .center-container {
        margin-left: auto;
        margin-right: auto;
@@ -133,6 +137,20 @@ div.content div.content-buttons img {
    border: 0;
 }

+
+.entity-container h1{
+    -moz-border-radius: 0.3em;
+    font-family: "FreeWayBold", "Liberation Sans", Arial, sans-serif;
+    color: #333333;
+    margin: 0;
+    background: #EEEEEE;
+    margin-top: 0.5em;
+    padding: .5em;
+    text-transform: uppercase;
+    font-size: 1.2em;
+}
+
+
 h2 {
    font-family: "FreeWayBold","Liberation Sans", Arial, sans-serif;
    font-size: 1.5em;
--- a/install/static/ipa.js
+++ b/install/static/ipa.js
@@ -229,6 +229,7 @@ IPA.batch_command = function (spec) {
            that.args,
            that.options,
            function(data, text_status, xhr) {
+
                for (var i=0; i<that.commands.length; i++) {
                    var command = that.commands[i];
                    var result = data.result.results[i];
@@ -283,6 +284,20 @@ IPA.cmd = function (name, args, options, win_callback, fail_callback, objname, c
 {
    var default_json_url = '/ipa/json';

+    var network_call_count = 0;
+    function display_activity_icon(){
+        network_call_count += 1;
+        $('.network-activity-indicator').css('display','inline');
+    }
+
+    function hide_activity_icon(){
+        network_call_count -= 1;
+
+        if (0 === network_call_count){
+            $('.network-activity-indicator').css('display','none');
+        }
+    }
+
    function dialog_open(xhr, text_status, error_thrown) {
        var that = this;

@@ -292,11 +307,15 @@ IPA.cmd = function (name, args, options, win_callback, fail_callback, objname, c
            buttons: {
                'Retry': function () {
                    IPA.error_dialog.dialog('close');
-                    IPA.cmd(name, args, options, win_callback, fail_callback, objname, command_name);
+                    IPA.cmd(name, args, options, win_callback, fail_callback,
+                            objname, command_name);
                },
                'Cancel': function () {
                    IPA.error_dialog.dialog('close');
-                    if (fail_callback) fail_callback.call(that, xhr, text_status, error_thrown);
+                    if (fail_callback) {
+                        fail_callback.call(that, xhr, text_status,
+                                           error_thrown);
+                    }
                }
            }
        });
@@ -312,7 +331,7 @@ IPA.cmd = function (name, args, options, win_callback, fail_callback, objname, c
    }

    function error_handler(xhr, text_status, error_thrown) {
-
+        hide_activity_icon();
        if (!error_thrown) {
            error_thrown = {
                name: xhr.responseText || 'Unknown Error',
@@ -349,7 +368,9 @@ IPA.cmd = function (name, args, options, win_callback, fail_callback, objname, c
        dialog_open.call(this, xhr, text_status, error_thrown);
    }

-    function error_handler(xhr, text_status, error_thrown) {
+    //Think this should be removed
+    function alt_error_handler(xhr, text_status, error_thrown) {
+        hide_activity_icon();
        IPA.error_dialog.empty();
        IPA.error_dialog.attr('title', error_thrown.title);

@@ -360,6 +381,7 @@ IPA.cmd = function (name, args, options, win_callback, fail_callback, objname, c


    function success_handler(data, text_status, xhr) {
+        hide_activity_icon();
        if (!data) {
            var error_thrown = {
                title: 'HTTP Error '+xhr.status,
@@ -408,7 +430,7 @@ IPA.cmd = function (name, args, options, win_callback, fail_callback, objname, c
        success: success_handler,
        error: error_handler
    };
-
+    display_activity_icon();
    $.ajax(request);

    return (id);
@@ -455,3 +477,9 @@ IPA.get_member_attribute = function (obj_name, member)
    }
    return null;
 }
+
+IPA.create_network_spinner = function(){
+    return $('<span />',{
+        'class':'network-activity-indicator',
+        html: '<img src="spinner_small.gif" />'});
+}
--- a/install/static/search.js
+++ b/install/static/search.js
@@ -41,6 +41,8 @@ IPA.search_widget =  function (spec) {
            'name': 'search-filter'
        }).appendTo(search_controls);

+        search_controls.append(IPA.create_network_spinner());
+
        this.filter = $('<input/>', {
            'type': 'text',
            'name': 'search-' + that.entity_name + '-filter'
--- a/install/static/spinner_header.gif
+++ b/install/static/spinner_header.gif
--- a/install/static/spinner_large.gif
+++ b/install/static/spinner_large.gif
--- a/install/static/spinner_small.gif
+++ b/install/static/spinner_small.gif
--- a/install/static/widget.js
+++ b/install/static/widget.js
@@ -1105,6 +1105,8 @@ IPA.adder_dialog = function (spec) {

        label.appendTo(search_panel);

+        search_panel.append(IPA.create_network_spinner());
+
        var results_panel = $('<div/>', {
            'class': 'adder-dialog-results'
        }).appendTo(that.container);
--- a/ipa.spec.in
+++ b/ipa.spec.in
@@ -398,6 +398,7 @@ fi
 %dir %{_usr}/share/ipa/static
 %{_usr}/share/ipa/static/index.html
 %{_usr}/share/ipa/static/*.png
+%{_usr}/share/ipa/static/*.gif
 %{_usr}/share/ipa/static/*.css
 %{_usr}/share/ipa/static/*.js
 %{_usr}/share/ipa/static/*.otf