improve image manager

website/agenda/planung/event.cgi

@@ -231,6 +231,8 @@ sub show_event {
     $event->{start} =~ s/(\d\d:\d\d)\:\d\d/$1/;
     $event->{end} =~ s/(\d\d:\d\d)\:\d\d/$1/;
 
+    $event->{image} = $params->{setImage} if defined $params->{setImage};
+
     # overwrite event with old one
     #my $series_events=get_series_events($config,{
     #    project_id => $params->{project_id},
@@ -814,15 +816,13 @@ sub check_params {
     for my $param ( 'live', 'published', 'playout', 'archived', 'rerun', 'draft', 'disable_event_sync', 'get_rerun' ) {
         if ( ( defined $params->{$param} ) && ( $params->{$param} =~ /([01])/ ) ) {
             $checked->{$param} = $1;
-
-            # print STDERR "check $param = $1\n";
         }
     }
 
     #strings
     for my $param (
         'series_name',  'title',        'excerpt',    'content',      'topic',       'program', 'category', 'image',
-        'series_image', 'user_content', 'user_title', 'user_excerpt', 'podcast_url', 'archive_url'
+        'series_image', 'user_content', 'user_title', 'user_excerpt', 'podcast_url', 'archive_url', 'setImage'
       )
     {
         if ( defined $params->{$param} ) {

website/agenda/planung/image.cgi

@@ -61,7 +61,13 @@ $params = $request->{params}->{checked};
 #show header
 my $headerParams = uac::set_template_permissions( $request->{permissions}, $params );
 $headerParams->{loc} = localization::get( $config, { user => $user, file => 'menu' } );
+
+if ($params->{search}){
+template::process( $config, 'print', template::check( $config, 'default.html' ), $headerParams );
+}else{
 template::process( $config, 'print', template::check( $config, 'ajax_header.html' ), $headerParams );
+}
+
 return unless defined uac::check( $config, $params, $user_presets );
 
 my $local_media_dir = $config->{locations}->{local_media_dir};
@@ -214,6 +220,10 @@ sub show_image {
         'projects'   => project::get_with_dates($config),
         'project_id' => $params->{project_id},
         'studio_id'  => $params->{studio_id},
+        'series_id' => $params->{series_id},
+        'event_id'  => $params->{event_id},
+        'pid'  => $params->{pid},
+        'target'    => $params->{target},
         'filename'   => $params->{filename}
     };
 
@@ -402,7 +412,7 @@ sub check_params {
 
     #numeric values
     $checked->{limit} = 100;
-    for my $param ( 'project_id', 'studio_id', 'series_id', 'default_studio_id', 'limit' ) {
+    for my $param ( 'project_id', 'studio_id', 'series_id', 'event_id', 'pid', 'default_studio_id', 'limit' ) {
         if ( ( defined $params->{$param} ) && ( $params->{$param} =~ /^\d+$/ ) ) {
             $checked->{$param} = $params->{$param};
         }
@@ -432,7 +442,7 @@ sub check_params {
     #Words
     $checked->{delete_image} = '';
     $checked->{save_image}   = '';
-    for my $attr ( 'save_image', 'delete_image', 'show', 'filename' ) {
+    for my $attr ( 'save_image', 'delete_image', 'show', 'filename', 'target' ) {
         $checked->{$attr} = '';
         if ( ( defined $params->{$attr} ) && ( $params->{$attr} =~ /(\S+)/ ) ) {
             $checked->{$attr} = $params->{$attr};

website/agenda/planung/js/image.js

@@ -1,6 +1,6 @@
 
-var windowOffsetX=32;
+var windowOffsetX=0;
-var windowOffsetY=32;
+var windowOffsetY=0;
 
 // get current selected tab by tabs-id
 function getSelectedTab(id){
@@ -11,16 +11,25 @@ function getSelectedTab(id){
 
 function setActiveImage(elem){
     $('div.image').removeClass("active");
+
     if (elem){
         $(elem).addClass("active");
     }else{
-        $('div.image').first().addClass("active");
+        $('div.images div.image').first().addClass("active");
     }
 }
 
 // open dialog to show or edit image properties
-function updateImageEditor(filename, elem){
+function updateImageEditor(elem, filename, target, project_id, studio_id, series_id, event_id, pid){
-	var url='image.cgi?show='+filename+'&template=image_edit.html&project_id='+project_id+'&studio_id='+studio_id
+	var url='image.cgi?show='+filename;
+    url += '&template=image_edit.html';
+    url += '&target=' + target;
+    url += '&project_id='+project_id;
+    url += '&studio_id='+studio_id;
+    if ( (series_id != null) && (series_id != '') ) url += '&series_id='+series_id;
+    if ( (event_id != null)  && (event_id != '')  ) url += '&event_id='+event_id;
+    if ( (pid != null)  && (pid != '')  ) url += '&pid='+pid;
+
     console.log("updateImageEditor "+url);
 
 	$("#img_editor").load(
@@ -31,21 +40,9 @@ function updateImageEditor(filename, elem){
 	);
 }
 
-// set editor image and image url to selected image
+// build search url and load
-function selectThisImage(filename){
+function searchImage(target, project_id, studio_id, series_id, event_id, pid){
-    $('#'+selectImageId).val(filename);
+    var url='image.cgi?';
-
-    var url = 'showImage.cgi?project_id='+project_id+'&studio_id='+studio_id+'&filename=' + filename;
-    console.log("select image "+url);
-    $('#imagePreview').prop('src',url);
-
-    showContent(); 
-    return false;
-}
-
-// update selectImage container by images matching to search
-function searchImage(){
-    var url='image.cgi?project_id='+project_id+'&studio_id='+studio_id;
 
     var value=$('#image_manager input[name=search]').val();
     value=value.replace(/[^a-zA-Z0-9]/g,'%');
@@ -55,51 +52,18 @@ function searchImage(){
     var filename = filename.replace(/^.*[\\\/]/, '')
     if (filename!=null) url+='&filename='+encodeURIComponent(filename);
 
-    if(selectedImageTab!='upload'){
+    url += '&target=' + target;
-        url+='#image-tabs-select'
+    url += '&project_id='+project_id;
-    }
+    url += '&studio_id='+studio_id;
+    if ( (series_id != null) && (series_id != '') ) url += '&series_id='+series_id;
+    if ( (event_id != null)  && (event_id != '')  ) url += '&event_id='+event_id;
+    if ( (pid != null)  && (pid != '')  ) url += '&pid='+pid;
 
-    console.log("searchImage(), load url="+url)
+
-    updateContainer('selectImage', url, function(){
+    load(url);
-        $( "#image-tabs" ).tabs();
-        if (filename!=null) updateImageEditor(encodeURIComponent(filename));
-    });
-    return false;
 }    
 
-function hideContent(){
 
-    $(window).resize(function () {
-       $('.ui-dialog').css({
-            'width':  $(window).width()  - windowOffsetX,
-            'height': $(window).height() - windowOffsetY,
-            'left':   windowOffsetX/2+'px',
-            'top':    windowOffsetY/2+'px',
-            modal: true
-       });
-    }).resize();
-
-    /*
-    $('.editor').each(
-        function(){
-            $(this).hide();
-        }
-    );
-    */
-    return false;
-}
-
-function showContent(){
-    /*
-    $('.editor').each(
-        function(){
-            $(this).show();
-        }
-    );
-    */
-    $('#selectImage').remove();
-    return false;
-}
 
 // save image 
 function saveImage(id, filename) {
@@ -188,9 +152,96 @@ function decreaseImageSize(){
     $('#content div.image').css('background-size', value+'px');
 }
 
+function selectImage( searchValue, imageUrl, target, project_id, studio_id, series_id, event_id, pid){
+    searchValue = searchValue.replace(/[^a-zA-Z0-9]/g,'%');
+
+    var url="image.cgi";
+    url += "?target="+target;
+    url += '&project_id='+project_id
+    url += '&studio_id='+studio_id;
+
+    if( (series_id!=null) && (series_id != '') ){
+        url+='&series_id='+series_id;
+    }
+    if( (event_id!=null) && (event_id != '') ){
+        url+='&event_id='+event_id;
+    }
+    if( (pid!=null) && (pid != '') ){
+        url+='&pid='+pid;
+    }
+
+   url += "&search="+encodeURIComponent(searchValue)
+ 
+    if(imageUrl!=null){
+        var filename=imageUrl.split('%2F').pop();
+        url+='&filename='+filename;
+    }
+    load(url);
+}
+
+function assignImage(filename, target, project_id, studio_id, series_id, event_id, pid){
+    var url = target +".cgi";
+    url += "?setImage=" + filename;
+    url += '&project_id=' + project_id;
+    url += '&studio_id=' + studio_id;
+
+    if( (series_id != null) && (series_id != '') ){
+        url += '&series_id=' + series_id;
+    }
+
+    if( (event_id != null) && (event_id != '') ){
+        url += '&event_id=' + event_id;
+    }
+
+    if( (pid!=null) && (pid != '') ){
+        url+='&pid='+pid;
+    }
+
+    load(url);
+}
+
+$(document).ready(
+    function(){
+        if ( window.location.href.indexOf("&filename=") > 0)
+            setActiveImage();
+    }
+);
+
+
+/*
+function hideContent(){
+    $('.editor').hide();
+
+    $(window).resize(function () {
+       $('.ui-dialog').css({
+            'width':  $(window).width()  - windowOffsetX,
+            'height': $(window).height() - windowOffsetY,
+            'position': 'absolute',
+            'left':   0,
+            'top':    0,
+            modal: true
+       });
+
+       var imagesPos= $('div.images').position();
+       var height = ( $(window).height() - imagesPos.top );
+       if(height<64) height = 64;
+       console.log("windowHeight="+$(window).height()+" div.images.pos.top="+imagesPos.top)
+       $('div.images').css("height", height +"px");
+
+    }).resize();
+
+    return false;
+}
+
+function showContent(){
+    $('.editor').show();
+    $('#selectImage').remove();
+    return false;
+}
+
 
 //select image load into selectImage box
-function selectImage(project_id, studio_id, imageId, searchValue, imageUrl, series_id){
+function selectImageOld(project_id, studio_id, imageId, searchValue, imageUrl, series_id){
     selectImageId = imageId;
     searchValue = searchValue.replace(/[^a-zA-Z0-9]/g,'%');
 
@@ -205,26 +256,28 @@ function selectImage(project_id, studio_id, imageId, searchValue, imageUrl, seri
         url+='&filename='+filename;
     }
 
-    var x=$(window).width()  - windowOffsetX;
+    var x = $(window).width()  - windowOffsetX;
-    var y=$(window).height() - windowOffsetY;
+    var y = $(window).height() - windowOffsetY;
-    console.log("selectImage(), load url="+url)
+    console.log("selectImage(), load url="+url);
+
 
     $('#selectImage').remove();
     $('body').append('<div id="selectImage"></div>');
-    
+
     $('#selectImage').load(
         url, 
         function(){
             hideContent();
-
             $('#selectImage').dialog({
                 appendTo: "#content",
-		        title:"select image",
+		        title: "select image",
-		        width:x,
+                top: 0,
-		        height:y,
+                left: 0,
-		        close: function( event, ui ) { 
+		        width: x,
+		        height: y,
+		        close: function( event, ui ) {
 		            showContent();
-                    $('.ui-dialog').remove();
+                    $('#selectImage').remove();
 		        }
             });
             updateImageEditor(filename);
@@ -234,4 +287,17 @@ function selectImage(project_id, studio_id, imageId, searchValue, imageUrl, seri
     return false;    
 }
 
+// set editor image and image url to selected image
+function selectThisImage(filename){
+    $('#'+selectImageId).val(filename);
+
+    var url = 'showImage.cgi?project_id='+project_id+'&studio_id='+studio_id+'&filename=' + filename;
+    console.log("select image "+url);
+    $('#imagePreview').prop('src',url);
+
+    showContent(); 
+    return false;
+}
+
+*/
 

website/agenda/planung/projects.cgi

@@ -254,6 +254,10 @@ sub show_projects {
         }
         $project->{assigned_studios}   = $assigned_studios;
         $project->{unassigned_studios} = $unassigned_studios;
+
+        if ( (defined $params->{setImage}) && ($project->{pid} eq $params->{pid}) ){
+            $project->{image} = $params->{setImage};          
+        }
     }
 
     $params->{projects} = $projects;
@@ -282,7 +286,7 @@ sub check_params {
         }
     }
 
-    for my $param ( 'name', 'title', 'subtitle', 'start_date', 'end_date', 'image', 'email' ) {
+    for my $param ( 'name', 'title', 'subtitle', 'start_date', 'end_date', 'image', 'email', 'setImage' ) {
         if ( defined $params->{$param} ) {
             $checked->{$param} = $params->{$param};
         }

website/agenda/planung/series.cgi

@@ -1198,6 +1198,7 @@ sub show_series {
     $serie->{series_dates} = $series_dates;
 
     $serie->{show_hint_to_add_schedule} = $params->{show_hint_to_add_schedule};
+    $serie->{image} = $params->{setImage} if $params->{setImage};
 
     #copy series to params
     #$params->{series}=[$serie];
@@ -1280,7 +1281,7 @@ sub check_params {
     }
 
     for my $param ( 'series_name', 'title', 'excerpt', 'content', 'topic', 'image', 'image_label',
-        'assign_event_series_name', 'assign_event_title', 'comment', 'podcast_url', 'archive_url' )
+        'assign_event_series_name', 'assign_event_title', 'comment', 'podcast_url', 'archive_url', 'setImage' )
     {
         if ( defined $params->{$param} ) {
 

website/agenda/planung/studio_timeslots.cgi

@@ -74,6 +74,11 @@ if ( $action eq 'show_dates' ) {
 	    <script src="js/jquery-ui-timepicker.js" type="text/javascript"></script>
 	    <link href="css/jquery-ui-timepicker.css" type="text/css" rel="stylesheet" /> 
 	    <link href="css/theme.default.css" rel="stylesheet">
+
+	<script src="js/jquery.tablesorter.min.js"></script>
+	<script src="js/jquery.tablesorter.widgets.min.js"></script>
+	<script src="js/jquery.tablesorter.scroller.js"></script>
+
         <script src="js/studio_timeslots.js" type="text/javascript"></script>
 	    <script src="js/datetime.js" type="text/javascript"></script>
 	    <link rel="stylesheet" href="css/studio_timeslots.css" type="text/css" /> 

website/agenda/planung/studios.cgi

@@ -193,6 +193,14 @@ sub show_studios {
             project_id => $params->{project_id}
         }
     );
+
+    if ($params->{setImage}){
+        for my $studio (@$studios){
+            next unless $studio->{id} eq $params->{studio_id};
+            $studio->{image}=$params->{setImage};
+        }
+    }
+
     $params->{studios} = $studios;
     $params->{loc} = localization::get( $config, { user => $params->{presets}->{user}, file => 'studios' } );
     uac::set_template_permissions( $permissions, $params );
@@ -219,7 +227,7 @@ sub check_params {
         }
     }
 
-    for my $param ( 'name', 'description', 'location', 'stream', 'google_calendar', 'image' ) {
+    for my $param ( 'name', 'description', 'location', 'stream', 'google_calendar', 'image', 'setImage' ) {
         if ( defined $params->{$param} ) {
             $checked->{$param} = $params->{$param};
         }

website/agenda/planung/templates/edit_event.html

@@ -152,55 +152,54 @@
 
 </div>
 
-<!-- header -->
-<!--
-<TMPL_IF series_id>
-    <div class="header">
-        <TMPL_VAR series_name> <TMPL_IF title>- <TMPL_VAR title></TMPL_IF>
-    </div>
-</TMPL_IF>
--->
-
 <div>
 
     <!-- import rerun from old event of series or any event of any project -->
     <TMPL_IF .allow.update_event>
-        <div id="selectRerun" style="display:none;" class="panel">
+        <div id="selectRerun" style="display:none;" class="select panel">
-            <TMPL_VAR .loc.label_rerun>
             
-            <div onclick="selectOldEventFromSeries('rerunEventId','<TMPL_VAR start_date>'); updateCheckBox($(this).find('input:radio'),true);">
+            <div class="panel-header">
+                
+                <b><TMPL_VAR weekday_short_name>, <TMPL_VAR start_date_name>, <TMPL_VAR start_time_name></b>,
+                <TMPL_VAR .loc.label_overwrite_event> <TMPL_VAR .loc.label_rerun>
+            </div>
+
+            <div class="panel-body">
+                <div onclick="selectOldEventFromSeries('rerunEventId','<TMPL_VAR start_date>'); updateCheckBox($(this).find('input:radio'),true);"
+                    class="option"
+                >
                 <input type="radio" name="group" class="default"> 
                 <TMPL_VAR .loc.label_rerun_select_old>
             </div>
 
-            <div onclick="selectOtherEvent('rerunEventId'); updateCheckBox($(this).find('input:radio'),true);">
+                <div onclick="selectOtherEvent('rerunEventId'); updateCheckBox($(this).find('input:radio'),true);"
+                    class="option"
+                >
                 <input type="radio" name="group">
                 <TMPL_VAR .loc.label_rerun_select_other>
             </div>
             
-            <div>
+            <input id="rerunEventId" value="-1" style="display:none" onchange="copyFromEvent('rerunEventId')">
+
+            <div id="import_rerun" class="active" style="display:none;"></div>
                 <button onclick="hideSelectRerun('rerunEventId')"><TMPL_VAR .loc.button_cancel></button>
             </div>
-            
-            <input id="rerunEventId" value="-1" style="display:none" onchange="copyFromEvent('rerunEventId')">
-        </div>
-
-        <div id="import_rerun_header" style="display:none;">
-            <b><TMPL_VAR weekday_short_name>, <TMPL_VAR start_date_name>, <TMPL_VAR start_time_name></b>,
-            <TMPL_VAR .loc.label_overwrite_event>
-            <div id="import_rerun" class="active" style="display:none;"></div>
         </div>
     </TMPL_IF>
 
     <!-- move to other series -->
     <TMPL_IF .allow.assign_series_events>
         <div id="selectChangeSeries" class="active" style="display:none" class="panel">
+            <div class="panel-header">
             <TMPL_VAR .loc.button_assign_series>
+            </div>
+            <div class="panel-body">
             <div id="changeSeriesContainer"> </div>
             <input id="changeSeriesId" value="-1" style="display:none">
             <button onclick="hideChangeSeries()"><TMPL_VAR .loc.button_cancel></button>
             <button onclick="changeSeries()"><TMPL_VAR .loc.button_assign></button>
         </div>
+        </div>
     </TMPL_IF>
 
 
@@ -457,14 +456,13 @@
             </td> 
             <td>
                 <TMPL_IF .allow.update_event_field_image>
-                    <button onclick="selectImage('<TMPL_VAR .project_id>','<TMPL_VAR .studio_id>','image_<TMPL_VAR event_id>','<TMPL_VAR series_name escape=HTML>','<TMPL_VAR image ESCAPE=url>','<TMPL_VAR series_id>');return false;"
+                    <button onclick="selectImage('<TMPL_VAR series_name escape=HTML>', '<TMPL_VAR image ESCAPE=url>', 'event', '<TMPL_VAR .project_id>','<TMPL_VAR .studio_id>','<TMPL_VAR series_id>','<TMPL_VAR event_id>'); return false;"
-                        style="padding:0;"
+                        class="selectImage"
                     >
                         <img id="imagePreview" src="showImage.cgi?project_id=<TMPL_VAR project_id>&studioId=<TMPL_VAR studio_id>&filename=<TMPL_VAR image>&type=icon">
                     </button>
-                    <input id="image_<TMPL_VAR event_id>" name="image" value="<TMPL_VAR image>" class="image" style="float:right" placeholder="<TMPL_VAR .loc.label_image>">
+                    <input id="image_<TMPL_VAR event_id>" name="image" value="<TMPL_VAR image>" class="image" placeholder="<TMPL_VAR .loc.label_image>">
                     <input type="hidden" name="series_image" value="<TMPL_VAR series_image>" > 
-					<!--(series_image:<TMPL_VAR series_image>,image=<TMPL_VAR image>)-->
                 </TMPL_IF>
             </td>
         </tr>
@@ -499,9 +497,8 @@
 
     <!-- buttons -->
     <TMPL_UNLESS edit_lock>
-    <table>
+
-        <tr> 
+    
-            <td colspan="2">
                 <div class="buttons" style="text-align:center">
                     <TMPL_IF show_new_event_from_schedule>
                         <TMPL_IF .allow.create_event_from_schedule>
@@ -530,9 +527,7 @@
                         </TMPL_UNLESS>
                     </TMPL_IF>
                 </div>
-            </td>
+
-        </tr>
-    </table>
     </TMPL_UNLESS>
 
     </form>
@@ -550,8 +545,6 @@
     <div class="label right"><TMPL_VAR .loc.label_modified_at> <TMPL_VAR modified_at> <TMPL_VAR .loc.label_modified_by> <TMPL_VAR modified_by>.</div>
 </TMPL_IF>
 
-<div id="selectImage"></div>
-
 </main>	    
 
 </body>

website/agenda/planung/templates/edit_series.html

@@ -25,7 +25,7 @@
     </script>
 
 <style>
-	#editor div p a img {
+	#editor button img {
 		float:right;
 	}
 </style>
@@ -57,9 +57,7 @@
 	    </TMPL_IF>
     </div>
 
-	<table>	
+	<div class="panel-header">
-		<tr><td colspan="2">
-			<div class="header">
             <TMPL_IF has_single_events>
                 <TMPL_VAR .loc.single_events> <TMPL_IF title><TMPL_VAR title></TMPL_IF>
             <TMPL_ELSE>
@@ -67,8 +65,6 @@
     			<TMPL_IF series_name> <TMPL_VAR series_name></TMPL_IF><TMPL_IF title> - <TMPL_VAR title></TMPL_IF>
             </TMPL_IF>
             </div>
-		</td></tr>
-	</table>
 
 </div>
 
@@ -95,22 +91,13 @@
     <!-- edit template-->
     <TMPL_IF .allow.update_series_template>
     <div id="tabs-template">
-        <!--
-	    <div class="header">Template</div>
-        <div class="buttons">
-    		<button onclick="edit_series('<TMPL_VAR .series_id>');return false;">edit</button>
-        </div>
-        -->
         
-	    <div id="edit_<TMPL_VAR .series_id>" class="editor"> <!--style="display:none;"-->
+	    <div id="edit_<TMPL_VAR .series_id>" class="editor"> 
 	    <form method="post" action="series.cgi?project_id=<TMPL_VAR .project_id>&studio_id=<TMPL_VAR .studio_id>&series_id=<TMPL_VAR .series_id>#tabs-template">
             <input type="hidden" name="project_id" value="<TMPL_VAR .project_id>">
 		    <input type="hidden" name="studio_id"  value="<TMPL_VAR .studio_id>">
 		    <input type="hidden" name="series_id"  value="<TMPL_VAR .series_id>">	
 		    <table>
-                <!--
-			    <tr> <td class="label">program</td>	<td><input name="program" value="<TMPL_VAR program>"></td></tr>
-                -->
                 <TMPL_UNLESS has_single_events>
 			    <tr> <td class="label"><TMPL_VAR .loc.template_series></td> 	      
                      <td><input name="series_name" value="<TMPL_VAR series_name>" placeholder="<TMPL_VAR .loc.template_series>"></td></tr>
@@ -133,11 +120,13 @@
 			    <tr> <td class="label"><TMPL_VAR .loc.template_image></td>
 			         <td>
                     <TMPL_IF .allow.read_image>
-                        <button onclick="selectImage('<TMPL_VAR .project_id>','<TMPL_VAR .studio_id>','image_<TMPL_VAR .series_id>','<TMPL_VAR series_name escape=HTML>','<TMPL_VAR image escape=URL>','<TMPL_VAR series_id>');return false;"
+                        <button class="selectImage" 
-                            style="padding:0;float:left"
+                            onclick="selectImage('<TMPL_VAR series_name escape=HTML>', '<TMPL_VAR image ESCAPE=url>', 'series', '<TMPL_VAR .project_id>','<TMPL_VAR .studio_id>','<TMPL_VAR series_id>'); return false;"
                         >
                             <img id="imagePreview" src="showImage.cgi?project_id=<TMPL_VAR .project_id>&studioId=<TMPL_VAR .studio_id>&filename=<TMPL_VAR image>&type=icon">
                         </button>
+
+                        <input type="hidden" name="series_image" value="<TMPL_VAR series_image>" > 
                         <input id="image_<TMPL_VAR .series_id>" name="image" value="<TMPL_VAR image>" class="image" placeholder="<TMPL_VAR .loc.template_image>" readonly="readonly">
                     </TMPL_IF>
                 </td></tr>
@@ -453,7 +442,6 @@
 				<td class="time"><TMPL_VAR end_time></td>
 				<td class="title"><TMPL_VAR full_title></td>
 				<TMPL_IF .allow.update_event>
-
 				<td>
 					<button onclick="edit_event('<TMPL_VAR event_id>','<TMPL_VAR .series_id>','<TMPL_VAR .studio_id>','<TMPL_VAR .project_id>','hide_series')"
 					><TMPL_VAR .loc.button_edit></button>
@@ -475,10 +463,6 @@
 <TMPL_UNLESS has_single_events>
 	<!-- series members -->
 	<div id="tabs-members">
-	    <!--
-		<div class="header">Members</div>
-        -->
-        
 		<table>
 
 		<!-- add members -->

website/agenda/planung/templates/image.html

@@ -1,17 +1,3 @@
-<!-- 
-<script src="js/jquery.min.js" type="text/javascript"></script>
-<script src="js/jquery-ui.min.js" type="text/javascript"></script>
-<script src="js/admin.js" type="text/javascript"></script>
-<script src="js/history.js" type="text/javascript"></script>
-<script src="js/localization.js" type="text/javascript"></script>
-<script src="js/localization-datetime.js" type="text/javascript"></script>
-<script src="js/event.js" type="text/javascript"></script>
-<script src="js/datetime.js" type="text/javascript"></script>
-
-<link rel="stylesheet" href="css/admin.css" type="text/css" /> 
-<link rel="stylesheet" href="css/jquery-ui.min.css" type="text/css" /> 
-<link rel="stylesheet" href="css/series.css" type="text/css" /> 
- -->
 
 <link type="text/css" href="css/image_manager.css" rel="stylesheet"/>
 <link type="text/css" href="css/fileUploader.css" rel="stylesheet"/>
@@ -104,21 +90,19 @@
 	<form id="image_manager" action="image.cgi">
 		<input name="search" value="<TMPL_VAR search escape=0>" style="width:20em;">
 		<input type="hidden" name="filename" value="<TMPL_VAR filename escape=0>">
-	    <input type="hidden" name="project_id" value="<TMPL_VAR .project_id>">
+		<button onclick="searchImage('<TMPL_VAR target>', '<TMPL_VAR .project_id>', '<TMPL_VAR .studio_id>', '<TMPL_VAR .series_id>', '<TMPL_VAR .event_id>', '<TMPL_VAR .pid>'); return false;"><TMPL_VAR .loc.button_search></button>
-	    <input type="hidden" name="studio_id" value="<TMPL_VAR .studio_id>">
-		<button onclick="searchImage();return false;"><TMPL_VAR .loc.button_search></button>
 	</form>
     <TMPL_VAR count> <TMPL_VAR .loc.label_search_hits><br />
 
     <div style="clear:both;display: flex; flex-direction: row;">
 
-        <div class="images" style="height:1000px;overflow-y:scroll">
+        <div class="images" style="overflow-y:scroll">
             <TMPL_LOOP images>
 	            <div class="image" 
 		            id="img_<TMPL_VAR id>" 
 		            style="background-image:url('showImage.cgi?project_id=<TMPL_VAR project_id>&studioId=<TMPL_VAR .studio_id>&type=icon&filename=<TMPL_VAR filename>')"
 		            title="<TMPL_VAR description>"
-		            onclick="updateImageEditor('<TMPL_VAR filename>', this);return false;"
+		            onclick="updateImageEditor(this, '<TMPL_VAR filename>', '<TMPL_VAR .target>', '<TMPL_VAR .project_id>', '<TMPL_VAR .studio_id>', '<TMPL_VAR .series_id>', '<TMPL_VAR .event_id>', '<TMPL_VAR .pid>'); return false;"
 	            >
 		            <div class="label"><TMPL_VAR name></div>
 	            </div>

website/agenda/planung/templates/image_edit.html

@@ -46,8 +46,9 @@ found no image
 <TMPL_LOOP images>
 <TMPL_IF filename>
 <div id="imageEditor">
-    <button onclick="selectThisImage('<TMPL_VAR filename escape=0>'); return false"><TMPL_VAR .loc.select_image></button/>
+    <button onclick="assignImage('<TMPL_VAR filename escape=0>', '<TMPL_VAR .target>', '<TMPL_VAR .project_id>', '<TMPL_VAR .studio_id>', '<TMPL_VAR .series_id>', '<TMPL_VAR .event_id>', '<TMPL_VAR .pid>'); return false"><TMPL_VAR .loc.select_image></button/>
-    <hr>
+
+    <div class="panel-body">
 
     <form id="save_img_<TMPL_VAR id>"
 	    method="post" 
@@ -85,6 +86,8 @@ found no image
         <TMPL_VAR .loc.label_link>: {{<TMPL_VAR filename escape=0>|<TMPL_VAR name>}}<br>
 
     </form>
+
+    </div>
 </div>
 </TMPL_IF>
 </TMPL_LOOP>

website/agenda/planung/templates/projects.html

@@ -1,7 +1,6 @@
 <link href="css/jquery-ui-timepicker.css" type="text/css" rel="stylesheet" /> 
 <script src="js/jquery-ui-timepicker.js" type="text/javascript"></script>
 <script src="js/image.js" type="text/javascript"></script>
-<link href="css/image-manager.css" type="text/css" rel="stylesheet" /> 
 
 <script type="text/javascript">
     var region='<TMPL_VAR loc.region>';
@@ -13,7 +12,7 @@
 <div style="clear:both" class="newproject">
     <button onclick="add_project('<TMPL_VAR name>')"><TMPL_VAR .loc.button_add_project></button><br/>
 
-    <div id="edit_new" class="card project editor" style="clear:both;display:none">
+    <div id="edit_new" class="panel project editor" style="clear:both;display:none">
         <form method="post">
             <input type="hidden" name="project_id" value="<TMPL_VAR .project_id>">
             <input type="hidden" name="studio_id"  value="<TMPL_VAR .studio_id>">
@@ -40,9 +39,9 @@
 <div style="clear:both" class="flex">
 <TMPL_LOOP projects>
 
-<div class="card project">
+<div class="panel project">
     <!-- buttons -->
-    <div>
+    <div class="panel-header">
         <div class="title"><TMPL_VAR title></div>
         <TMPL_IF .allow.update_project>
             <button onclick="edit_project('<TMPL_VAR project_id>')"
@@ -51,7 +50,7 @@
     </div>
 
     <!-- view project -->
-    <div id="view_<TMPL_VAR project_id>" class="view">
+    <div id="view_<TMPL_VAR project_id>" class="panel-body">
         <table>
             <tr><td class="label"><TMPL_VAR .loc.label_image></td>      <td colspan="2"><img src="showImage.cgi?project_id=<TMPL_VAR .project_id>&studioId=<TMPL_VAR .studio_id>&filename=<TMPL_VAR image>&type=thumbs"> &nbsp;</td></tr>
             <tr><td class="label"><TMPL_VAR .loc.label_name></td>       <td colspan="2"><TMPL_VAR name> &nbsp;</td></tr>
@@ -79,7 +78,7 @@
 
     <TMPL_IF .allow.update_project>
     <!-- update project -->
-    <div id="edit_<TMPL_VAR project_id>" class="editor"  style="display:none">
+    <div id="edit_<TMPL_VAR project_id>" class="panel-body"  style="display:none">
         <form method="post" action="projects.cgi?project_id=<TMPL_VAR .project_id>&studio_id=<TMPL_VAR .studio_id>"
             id="project_<TMPL_VAR project_id>"
         >
@@ -96,12 +95,12 @@
                 <tr><td class="label">
                     <TMPL_VAR .loc.label_image></td>      
                     <td>
-                        <button onclick="selectImage('<TMPL_VAR .project_id>','<TMPL_VAR .studio_id>','image_<TMPL_VAR pid>','<TMPL_VAR series_name escape=HTML>','<TMPL_VAR image escape=URL>','<TMPL_VAR series_id>');return false;"
+                        <button 
-                            style="padding:0;float:left"
+                            class="selectImage"
+                            onclick="selectImage('<TMPL_VAR name escape=HTML>', '<TMPL_VAR image ESCAPE=url>', 'projects', '<TMPL_VAR .project_id>','<TMPL_VAR .studio_id>', null, null, '<TMPL_VAR pid>'); return false;"
                         >
-                            <img id="imagePreview" src="showImage.cgi?project_id=<TMPL_VAR .project_id>&studioId=<TMPL_VAR .studio_id>&filename=<TMPL_VAR image>&type=thumbs">
+                            <img id="imagePreview" src="showImage.cgi?project_id=<TMPL_VAR .project_id>&studioId=<TMPL_VAR .studio_id>&filename=<TMPL_VAR image>&type=icon">
                         </button>
-                        <!-- <input name="image">-->
                         <input id="image_<TMPL_VAR pid>" name="image" value="<TMPL_VAR image>" class="image" placeholder="<TMPL_VAR .loc.template_image>">
                     </td>
                 </tr>
@@ -177,8 +176,6 @@
 </TMPL_LOOP>
 </div>
 
-<div id="selectImage"> </div>
-
 </main>	    
 </body>
 </html>

website/agenda/planung/templates/studios.html

@@ -1,12 +1,11 @@
 <script src="js/image.js" type="text/javascript"></script>
-<link href="css/image-manager.css" type="text/css" rel="stylesheet" /> 
 
 <h2><TMPL_VAR .loc.title></h2>
 
 <TMPL_IF .allow.update_studio>
 <div style="clear:both" class="newstudio">
 	<button onclick="add_studio('<TMPL_VAR name>')"><TMPL_VAR .loc.button_add_studio></button><br/>
-	<div id="edit_new" class="studio editor" style="clear:both;display:none">
+	<div id="edit_new" class="panel" style="clear:both;display:none">
 	    <form method="post">
 			<input type="hidden" name="project_id" value="<TMPL_VAR .project_id>">
 			<input type="hidden" name="studio_id"  value="<TMPL_VAR .studio_id>">
@@ -30,22 +29,24 @@
 
 <div style="clear:both" class="flex">
 <TMPL_LOOP studios>
-<div class="card studio">
+<div class="panel studio">
-	<div>
+	<div class="panel-header">
-		<div class="title"><TMPL_VAR name></div>
+	    <TMPL_VAR name>
-		<TMPL_IF .allow.update_studio>
+	</div>
-			<button onclick="edit_studio('<TMPL_VAR id>')"><TMPL_VAR .loc.button_edit></button>
+	<div class="panel-body">
-		</TMPL_IF>
+	    <TMPL_IF .allow.update_studio>
+		    <button onclick="edit_studio('<TMPL_VAR id>')"><TMPL_VAR .loc.button_edit></button>
+	    </TMPL_IF>
 
         <TMPL_IF .allow.read_event>
             <button target="_blank"
                 onclick="load('event_history.cgi?project_id=<TMPL_VAR .project_id>&studio_id=<TMPL_VAR id>');"
             ><TMPL_VAR .loc.button_show_changes></button>
         </TMPL_IF>
-	</div>
+    </div>
 
 	<!-- view studio -->
-	<div id="view_<TMPL_VAR id>" class="view">
+	<div id="view_<TMPL_VAR id>" class="panel-body">
 		<table>
 			<tr><td class="label"><TMPL_VAR .loc.label_image></td> 	         <td><img src="showImage.cgi?project_id=<TMPL_VAR .project_id>&studioId=<TMPL_VAR .studio_id>&filename=<TMPL_VAR image>&type=thumbs"> &nbsp;</td></tr>
 			<tr><td class="label"><TMPL_VAR .loc.label_name></td> 	         <td><TMPL_VAR name> &nbsp;</td></tr>
@@ -57,7 +58,7 @@
 
 	<TMPL_IF .allow.update_studio>
 	<!-- update studio -->
-	<div id="edit_<TMPL_VAR id>" class="editor"  style="display:none">
+	<div id="edit_<TMPL_VAR id>" class="editor" style="display:none">
 		<form method="post" id="studio_<TMPL_VAR id>">
 			<input type="hidden" name="id" value="<TMPL_VAR id>">
 			<input type="hidden" name="project_id" value="<TMPL_VAR .project_id>">
@@ -70,10 +71,11 @@
                 <tr><td class="label">
                     <TMPL_VAR .loc.label_image></td>      
                     <td>
-                        <button onclick="selectImage('<TMPL_VAR .project_id>','<TMPL_VAR .studio_id>','image_<TMPL_VAR id>','<TMPL_VAR series_name escape=HTML>','<TMPL_VAR image escape=URL>','<TMPL_VAR series_id>');return false;"
+                        <button 
-                            style="padding:0;float:left"
+                            class="selectImage"
+                            onclick="selectImage('<TMPL_VAR name escape=HTML>', '<TMPL_VAR image ESCAPE=url>', 'studios', '<TMPL_VAR .project_id>','<TMPL_VAR .studio_id>'); return false;"
                         >
-                            <img id="imagePreview" src="showImage.cgi?project_id=<TMPL_VAR .project_id>&studioId=<TMPL_VAR .studio_id>&filename=<TMPL_VAR image>&type=thumbs">
+                            <img id="imagePreview" src="showImage.cgi?project_id=<TMPL_VAR .project_id>&studioId=<TMPL_VAR .studio_id>&filename=<TMPL_VAR image>&type=icon">
                         </button>
                         <input id="image_<TMPL_VAR id>" name="image" value="<TMPL_VAR image>" class="image" placeholder="<TMPL_VAR .loc.template_image>">
                     </td>