Feature-Request: AJAX im Backend!

[d767net]

Hallo liebe Contenido-Entwickler/-Community!

Eine der wenigen Dinge , die mich (und sicher auch andere) an Contenido stört ist die MÜhseligkeit, mit der im Backend teilweise noch einige Tätigkeiten wie Kategorien verschieben/umbenennen/anlegen ablaufen (v.a in Kategorie-Administration).

Hier würde doch eine AJAX-Lösung Wunder tun, die Zeit für viele Tasks von 30-60 sekunden (mit allen reloads) auf 1-2 sekunden reduzieren (einriesenunterschied, wenn man viele Kategorien anlegt/administriert!) und Contenido über andere CMS heben!

Bsp. (für Kategorien sortieren, s.u. auf folgender Seite):

http://www.gregphoto.net/sortable/index.php

AJAX = asynchrone Aktulaisierung von Daten über JS und XML-Request, sodass bspw. die Kategorie-Administrations-Seite kaum noch im kompletten neu geladen werden muss, sondern bei jeder Aktion (Umbenennen, Verschieben) nur noch ein "Aktualisierungs-Request" zum Webserver gesendet wird.

Was haltet Ihr davon?

[emergence]

keine schlechte idee...
ich verschieb das mal...

[timo]

AJAX ist zwar nett, aber der Umbau würde einer Neuentwicklung des Backendes gleichkommen...

[HerrB]

Da hätte ich noch einen Verbesserungsvorschlag very light: Eine Überarbeitung der Backend-CSS-Definition.

Gerade bei den Kategorien wird eine große Menge Style-Definitionen pro Zeile ausgegeben. Da braucht auch der Browser mal ein wenig länger, bis er sich da durchgearbeitet hat...

Gruß
HerrB

[i-fekt]

Dem kann ich mir nur anschliessen, das CSS ist wirklich schlecht und sollte dringend in einer externen Datei ausgelagert werden.

Ganz schlimm ist es bei vielen Kategorien wenn man Benutzerrechte vergeben will. Das lädt ewig weil das CSS auch hier überall im Quelltext drin steht.

[timo]

Dem kann ich mir nur anschliessen, das CSS ist wirklich schlecht und sollte dringend in einer externen Datei ausgelagert werden.

Ganz schlimm ist es bei vielen Kategorien wenn man Benutzerrechte vergeben will. Das lädt ewig weil das CSS auch hier überall im Quelltext drin steht.

Feel free to change...

Ist zwar nett, daß man noch drauf hingewiesen wird, aber die Änderungen sind einfach nur extremst Zeitaufwendig...

[HerrB]

Yep, deswegen hatte ich es auch nur vorgeschlagen. Wenn ich mal Zeit habe (DER war gut!)...

Gruß
HerrB

[d767net]

AJAX ist zwar nett, aber der Umbau würde einer Neuentwicklung des Backendes gleichkommen...

Naja, aber für die ALLERwichtigsten bzw. meistegnutzten Funktionen asynchron Verabrietung anzubieten wäre schon klasse - und eigentlich doch auch recht einfach zu realisieren.

Beispiel: Umbenennen einer Kategorie (kommt doch hin und wieder vor :
Da klicke ich in der Kategorieliste (die schon bei mittleren Projekten sehr sehr lang zum laden braucht!) auf das rename-icon -> Seitenreload (10 sekunden - wirklich, wie gesagt sehr sehr lange trotz ordentlichem development-only-server, vermutlich auch wg css, s.o.), dann muss ich - weil sich der Seitenausschnitt dank reload geändert - hat erst wieder durch die Liste an den richtigen Ort scrollen (3-5 sek, je nach Komplexität der Hierarchie), dann gebe ich den neuen Namen ein, dann auf OK -> wieder seitenreload (10 sek + ein paar weitere interne bearbeitungzeit?), dann WIEDER an die Richtig Stelle scrollen (3 sek., hab inzwischen routine , weil sich der Inhalt verschoben hat.

So, das war jetzt ein riesenabsatz für eine trivialität - einfach weil es so viele Arbeitsschritte benötigt, nur um einen pissigen Kategorienamen zu ändern - insg. zusammen an die 30 sek!!!
Ein einfaches (schon fix und fertig existierendes!!) AJAX-Inline-Editcontroll und ein paar-Zeilen.grosses php-script zum entgegennehmen des dann versandten "umbennen"-Befehls auf dem Server.
Und - *schwupps* - plötzlich brauche ich nicht mal mehr 3 sekunden!
Produktivitätsgewinn: 1.000 % (!!!)

Dasselbe dann noch für "Kategorie Verschieben" (per Drag and Drop sortierbare ajax-basierte Listen-Controlls, die einen kleinen Server-Request absetzen, gibts auch schon fix und fertig verwendbar für umme! Sage gerne wo!) und natürlich "Kategorie anlegen".

Achso, und wenn wir schon dabei sind: Dann noch eine stinknormalen "confirm"-Dialog "Soll ein gleichnamiger Startartikel angelegt werden" - und, wow!, wir sind von 2h auf 20 min runter!

Ich baue hier gerade eine Kategorie_Hierarchie mit 100-150 Punkten auf, und da muss ich sagen: Die *rudmentäre*(!) Ajax-VErwendung würde den Unterschied zwischen 2 Stunden und 20 minuten machen!!!
Wenn DAS kein enormes Argument ist - für die VErwendung von Ajax bzw. für die VErwendung eines entspr. zeitsparenden CMS (soll Contenido so eines werden bzw. bleiben? Dann gibt's eigentlich keine Wahl und wahrscheinlich nur wenige höher Priorisierte ToDos...).

[timo]

du darfst es gerne implementieren...uns fehlt derzeit die zeit dazu

[d767net]

Würde ich auch glatt implementieren - wenn ich das nötige Hintergrund-Wissen zu Contenido hätte.
Aber wer weiss... womöglich finde ich ja ein paar passende Contenido-Funktionen (Cat umbennen, Cat anlegen, Cat verschiebe, Artikel anlegen) und kann dann doch schon was machen ... mal sehen.

Klar, Ihr seid vermutlich mit neuen Features usw. beschäftigt ... aber ihr solltet die Mühseligkeit, die momentan bei massiver BEnutzung des Kategorie-Bereiches im Backend herrscht, ernst nehmen.
Ein CMS wie Contenido wird nicht (nur) von ambitionierten Hobbyisten eingesetzt, die das cool finden und Zeit haben - sondern auch von Profis, die wichtig für die Community sind, und die eben *nicht* die Zeit haben, x-mal 2 Stunden für einen Fliessbandjob aufzuwenden, den man mit einem anderen Tool womöglich innerhalb von 20 min erledigen kann - nur weil dort 5-10 Entwicklungsstunden in ein paar simpel-Funktionen investiert wurden, die für jeweils sich genommen "Pillepalle" - oder wie Du sagst: "nett" - sind, aber einen enormen Effizienzgewinn und damit einen Riesenunterschied machen...

[i-fekt]

Dem kann ich mir nur anschliessen, das CSS ist wirklich schlecht und sollte dringend in einer externen Datei ausgelagert werden.

Ganz schlimm ist es bei vielen Kategorien wenn man Benutzerrechte vergeben will. Das lädt ewig weil das CSS auch hier überall im Quelltext drin steht.

Feel free to change...

Ist zwar nett, daß man noch drauf hingewiesen wird, aber die Änderungen sind einfach nur extremst Zeitaufwendig...

Was brauchst du denn dazu? Ich würde das dann evtl. übernehmen, musst mir nur sagen was genau du dazu brauchst welchen Code, nur die Tabelle oder was auch immer etc.

Ich will jetzt nicht den Code umbauen, wenn es nachher nicht genutzt wird oder so.

[i-fekt]

Ich habe das ganze gerade mal für die Tabelle bei "Administration > Gruppen > Content" umgebaut.

Bei 42 Kategorien Quelltext
vorher: 267kB.
nachher: 117kB (CSS schon mitgerechnet)

Wie das bei steigender Kategorienzahl aussieht kann sich jeder denken und auch mit DSL lädt man da lange.

Hier das komplette HTML des iframes, hat nur die zwei Reihen damit wegen des Zebramusters, Rest wiederholt sich ja nur:

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>
<script type="text/javascript" src="scripts/rowMark.js"></script>
<script type="text/javascript" src="scripts/infoBox.js"></script>
<script type="text/javascript" src="scripts/rights.js.php?contenido=ffb71369af4e2418ed0926e0cb42efa3"></script>
<link rel="stylesheet" type="text/css" href="contenido.css"/>
</head>
<body style="margin:10px">
<form name="rightsform" method="post" action="main.php?contenido=ffb71369af4e2418ed0926e0cb42efa3">
<input type="hidden" name="action" value="">
<input type="hidden" name="groupid" value="47633fbde206a754efd9380f24190a05">
<input type="hidden" name="actionarea" value="area">
<input type="hidden" name="frame" value="4">

<table cellspacing="0" cellpadding="0" border="0" class="mandant">
 <tr>
  <td>Mandant / Sprache:</td>
  <td>
   <input type="hidden" name="rights_perms" value="">
   <select name="rights_clientslang" site="1">
    <option value="1">Website 1 -> deutsch</option>
    <option value="2">Website 1 -> english</option>
    <option value="3">Website 1 -> Französisch</option>
   </select>
   <input type="image" src="submit.gif">
  </td>
 </tr>
</table>
<script type="text/javascript">
 var itemids=new Array();
 var actareaids=new Array();
</script>
<br/>
<table cellspacing="0" cellpadding="0" border="0" class="tabelle">
 
 <tr>
  <th align="left">Kategorie</th>
  <th>&nbsp;</th>
  <th>
   <script type="text/javascript">actareaids["con_makestart|con"]="x";</script>Startartikel festlegen<br/>
   <input type="checkbox" name="checkall_con_con_makestart" value="" onClick="setRightsFor('con','con_makestart','')">
  </th>
  <th>
   <script type="text/javascript">actareaids["con_makeonline|con"]="x";</script>Artikel online setzen<br/>
   <input type="checkbox" name="checkall_con_con_makeonline" value="" onClick="setRightsFor('con','con_makeonline','')">
  </th>
  <th>
   <script type="text/javascript">actareaids["con_deleteart|con"]="x";</script>Artikel l&ouml;schen<br/>
   <input type="checkbox" name="checkall_con_con_deleteart" value="" onClick="setRightsFor('con','con_deleteart','')">
  </th>
  <th>
   <script type="text/javascript">actareaids["con_makepublic|con"]="x";</script>Kategorie sch&uuml;tzen<br/>
   <input type="checkbox" name="checkall_con_con_makepublic" value="" onClick="setRightsFor('con','con_makepublic','')">
  </th>
  <th>
   <script type="text/javascript">actareaids["con_tplcfg_edit|con"]="x";</script>Template- Konfiguration bearbeiten<br/>
   <input type="checkbox" name="checkall_con_con_tplcfg_edit" value="" onClick="setRightsFor('con','con_tplcfg_edit','')">
  </th>
  <th>
   <script type="text/javascript">actareaids["con_makecatonline|con"]="x";</script>Kategorie online setzen<br/>
   <input type="checkbox" name="checkall_con_con_makecatonline" value="" onClick="setRightsFor('con','con_makecatonline','')">
  </th>
  <th>
   <script type="text/javascript">actareaids["con_changetemplate|con"]="x";</script>Template wechseln<br/>
   <input type="checkbox" name="checkall_con_con_changetemplate" value="" onClick="setRightsFor('con','con_changetemplate','')">
  </th>
  <th>
   <script type="text/javascript">actareaids["con_lock|con"]="x";</script>Artikel einfrieren<br/>
   <input type="checkbox" name="checkall_con_con_lock" value="" onClick="setRightsFor('con','con_lock','')">
  </th>
  <th>
   <script type="text/javascript">actareaids["con_syncarticle|con"]="x";</script>Artikel syncronisieren<br/>
   <input type="checkbox" name="checkall_con_con_syncarticle" value="" onClick="setRightsFor('con','con_syncarticle','')">
  </th>
  <th>
    <script type="text/javascript">actareaids["con_synccat|con"]="x";</script>Kategorie synchronisieren<br/>
    <input type="checkbox" name="checkall_con_con_synccat" value="" onClick="setRightsFor('con','con_synccat','')">
  </th>
  <th>
    <script type="text/javascript">actareaids["con_duplicate|con"]="x";</script>Artikel duplizieren<br/>
    <input type="checkbox" name="checkall_con_con_duplicate" value="" onClick="setRightsFor('con','con_duplicate','')">
  </th>
  <th>
   <script type="text/javascript">actareaids["con_editart|con_editcontent"]="x";</script>Artikel bearbeiten<br/>
   <input type="checkbox" name="checkall_con_editcontent_con_editart" value="" onClick="setRightsFor('con_editcontent','con_editart','')">
  </th>
  <th>
   <script type="text/javascript">actareaids["con_edit|con_editart"]="x";</script>Artikel- eigenschaften bearbeiten<br/>
   <input type="checkbox" name="checkall_con_editart_con_edit" value="" onClick="setRightsFor('con_editart','con_edit','')">
  </th>
  <th>
   <script type="text/javascript">actareaids["con_newart|con_editart"]="x";</script>Neuen Artikel erstellen<br/>
   <input type="checkbox" name="checkall_con_editart_con_newart" value="" onClick="setRightsFor('con_editart','con_newart','')">
  </th>
  <th>
   Check all<br/><input type="checkbox" name="checkall" value="" onClick="setRightsForAll()">
  </th>
 </tr>

 <tr class="reihe1">
  <td class="vorne" nowrap="nowrap">
   <script type="text/javascript">itemids["1"]="x";</script>Hauptnavigation
  </td>
  <td nowrap="nowrap">
   <a href="javascript:rightsInheritanceUp('0','0')" class="action"><img src="pfeil_links.gif" alt="Rechte dieser Kategorie allen Kategorien auf derselben Ebene oder darüber zuweisen" title="Rechte dieser Kategorie allen Kategorien auf derselben Ebene oder darüber zuweisen"></a><img src="images/spacer.gif" width="3"><a href="javascript:rightsInheritanceDown('1')" class="action"><img src="pfeil_runter.gif" alt="Rechte dieser Kategorie allen Kategorien unter dieser Kategorie zuweisen" title="Rechte dieser Kategorie allen Kategorien unter dieser Kategorie zuweisen"></a>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_0_0_con_con_makestart" name="rights_list[con|con_makestart|1]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_0_0_con_con_makeonline" name="rights_list[con|con_makeonline|1]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_0_0_con_con_deleteart" name="rights_list[con|con_deleteart|1]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_0_0_con_con_makepublic" name="rights_list[con|con_makepublic|1]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_0_0_con_con_tplcfg_edit" name="rights_list[con|con_tplcfg_edit|1]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_0_0_con_con_makecatonline" name="rights_list[con|con_makecatonline|1]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_0_0_con_con_changetemplate" name="rights_list[con|con_changetemplate|1]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_0_0_con_con_lock" name="rights_list[con|con_lock|1]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_0_0_con_con_syncarticle" name="rights_list[con|con_syncarticle|1]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_0_0_con_con_synccat" name="rights_list[con|con_synccat|1]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_0_0_con_con_duplicate" name="rights_list[con|con_duplicate|1]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_0_0_con_editcontent_con_editart" name="rights_list[con_editcontent|con_editart|1]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_0_0_con_editart_con_edit" name="rights_list[con_editart|con_edit|1]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_0_0_con_editart_con_newart" name="rights_list[con_editart|con_newart|1]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" name="checkall_con_tplcfg_con_newart_1" value="" onClick="setRightsFor('con_tplcfg','con_newart','1')">
  </td>
 </tr>

 <tr class="reihe2">
  <td class="vorne" nowrap="nowrap">
   <script type="text/javascript">itemids["57"]="x";</script>&nbsp;&nbsp;&nbsp;&nbsp; Was ist Contenido</td><td><a href="javascript:rightsInheritanceUp('1','0')" class="action"><img border="0" src="pfeil_links.gif" alt="Rechte dieser Kategorie allen Kategorien auf derselben Ebene oder dar&uuml;ber zuweisen" title="Rechte dieser Kategorie allen Kategorien auf derselben Ebene oder dar&uuml;ber zuweisen"></a><img src="images/spacer.gif" width="3"><a href="javascript:rightsInheritanceDown('57')" class="action"><img border="0" src="pfeil_runter.gif" alt="Rechte dieser Kategorie allen Kategorien unter dieser Kategorie zuweisen" title="Rechte dieser Kategorie allen Kategorien unter dieser Kategorie zuweisen"></a>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_1_0_con_con_makestart" name="rights_list[con|con_makestart|57]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_1_0_con_con_makeonline" name="rights_list[con|con_makeonline|57]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_1_0_con_con_deleteart" name="rights_list[con|con_deleteart|57]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_1_0_con_con_makepublic" name="rights_list[con|con_makepublic|57]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_1_0_con_con_tplcfg_edit" name="rights_list[con|con_tplcfg_edit|57]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_1_0_con_con_makecatonline" name="rights_list[con|con_makecatonline|57]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_1_0_con_con_changetemplate" name="rights_list[con|con_changetemplate|57]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_1_0_con_con_lock" name="rights_list[con|con_lock|57]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_1_0_con_con_syncarticle" name="rights_list[con|con_syncarticle|57]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_1_0_con_con_synccat" name="rights_list[con|con_synccat|57]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_1_0_con_con_duplicate" name="rights_list[con|con_duplicate|57]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_1_0_con_editcontent_con_editart" name="rights_list[con_editcontent|con_editart|57]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_1_0_con_editart_con_edit" name="rights_list[con_editart|con_edit|57]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" id="str_1_0_con_editart_con_newart" name="rights_list[con_editart|con_newart|57]" value="x"/>
  </td>
  <td nowrap="nowrap">
   <input type="checkbox" name="checkall_con_tplcfg_con_newart_57" value="" onClick="setRightsFor('con_tplcfg','con_newart','57')">
  </td>
 </tr>

 <tr class="reihe3">
  <td nowrap="nowrap" colspan="17">
   <a href=javascript:submitrightsform('','area')><img src="but_cancel.gif" border=0></a>
   <a href=javascript:submitrightsform('group_edit','')><img src="but_ok.gif" border=0></a>
  </td>
 </tr>

</table>
</form>
</body>
</html>

Hier das CSS:

Code: Alles auswählen

* {
	margin: 0;
	padding: 0;
}

body {
	margin: 10px;
}

img {
	border: none;
}

table.mandant {
	border: 1px solid #747488;
	border-right: none;
}

table.mandant td {
	font-size: 11px;
	border-right: 1px solid #747488;
	padding: 4px;
	vertical-align: middle;
	background: #E8E8EE;
}

table.mandant td img {
	vertical-align: middle;
}

table.mandant td select {
	font-size: 11px;
}

table.tabelle {
	border-top: 1px solid #747488;
	border-left: 1px solid #747488;
}

table.tabelle th {
	border-bottom: 1px solid #747488;
	border-right: 1px solid #747488;
	vertical-align: top;
	font-size: 11px;
	background: #A9AEC2;
	padding: 2px 3px;
}

table.tabelle th input {
	margin: 4px 0 3px 0;
}

table.tabelle td {
	border-bottom: 1px solid #747488;
	border-right: 1px solid #747488;
	vertical-align: top;
	font-size: 11px;
	padding: 4px 2px;
}

table.tabelle tr.reihe1 td {
	background: #E8E8EE;
	text-align: center;
}

table.tabelle tr.reihe2 td {
	text-align: center;
}

table.tabelle tr.reihe3 td {
	background: #A9AEC2;
	text-align: right;
}

table.tabelle tr.reihe3 td img {
	margin: 0 0 0 10px;
}

table.tabelle tr.reihe1 td.vorne,
table.tabelle tr.reihe2 td.vorne {
	text-align: left;
}

Wäre wirklich sehr vorteilhaft das so einzubauen.

[i-fekt]

Übersehen oder ignoriert? Wäre das nicht mal wert aufgenommen zu werden?

[HerrB]

Es ist ein erster Schritt. Es macht aber nur Sinn, wenn man ganz Contenido durchforstet (und die Styles vereinheitlicht) - ich habe das gleiche mal "auf die Schnelle" für Content -> Kategorie gemacht. Das waren 2 Stunden Arbeit.

Neben den Templates müsste auch der Code überarbeitet werden (da wird teilweise der style in Atomen festgelegt...) - da wird es dann schon wieder hakelig, da natürlich alles noch mit den vorhandenen Installationen funktionieren soll/muss.

Das wird noch Zeit brauchen.

Gruß
HerrB

[Bernbacher]

Hallo, der Thread ist zwar schon uralt, aber ich wollte fragen, ob sich da was zu der Frage von d767net bezgl. "Ajax im Backend" was getan hat, bzw. ob da versucht wird in der 4.9er Version was dahingehend zu machen?
Ich bin da genau der gleichen Meinung: Contendio finde ich super, aber die Bedienung, ist unheimlich zeitaufwendig, da immer alles neu geladen wird und für den Redakteur auch nervig, wenn er was editiert hat weiter unten auf der Seite und bei jeder Aktion wieder das Scrollen anfangen darf...