✔ Einsatz-Planer - welche Technologie?!

D

deostift

Erfahrenes Mitglied
Hallo zusammen,

folgendes gilt es zu realisieren: Links habe ich die Namen der Mitarbeiter (untereinander) stehen und rechts dazu für einen bestimmten Tag die Zeitachse von morgens 0:00 Uhr bis Nachts 23:59 Uhr.

Es soll nun möglich sein, in der Zeile des entsprechenden Mitarbeiters durch "Klicken und Ziehen" über z.B. 6:30 Uhr bis 12:30 Uhr diesem Mitarbeiter eine bestimmte Tätigkeit zuzuordnen. Also im Prinzip, indem ich auf der Zeitachse diesen Bereich markiere. Was pflicht ist, dass beim Ziehen über diese Zeitspanne diese schon hervorgehoben wird, damit man die "gezogene" Zeitspanne gleich erkennen kann.

Nun die Frage: Ist das mit Javascript vernünftig zu realisieren oder braucht man dafür tiefes Experten-Wissen. Oder sollte ich hier besser z.B. auf Adobe Flash setzen. Oder habt Ihr noch eine andere Idee bzw. kennt bereits ein Beispiel aus der Praxis?


Vielen Dank für die Rückmeldungen!

Deo
 
Ob Flash dafür nun weniger geeignet ist oder es leichter ist keine Ahnung.

Aber was ich zuerst testen würde wäre ob nicht ein einfacher Mouseover Event reichen würde.

Der leichteste Weg wäre alle Felder der Tabelle mit einen onmouseover Event zu belegen , welcher dann aktiviert ist wenn man die Maustaste gedrückt hat und wieder entfernt wird wenn man die Maus hochlässt. bei einen mouseout entfernt man die Markierung wieder man brauch also 4 Events.

2 Events auf jeden Tabellen Feld , mouseover und mouseout sowie 2 globale Eventhandler mousedown, mouseup.

2 Nachteile

1. sobald die Tabelle verschachtelt ist gilt bei einen mouseout zu prüfen ob wir wirklich das Tabellenfeld verlassen haben oder nur auf ein Element innerhalb des Tabellefeldes gefahren sind.

2. sollte innerhalb der Tabellenzelle ein Element liegen welches wieder ein Mouseover Event hat oder einen Mouseout Event hat welches zumal das Event Bubbling blockt dann geht das nicht mehr.

Der kompliziertere Weg der mir nun einfällt wäre nur noch 3 globale Events zu nehmen dazu müssen wir aber die Koordinaten von allen Feldern kennen.

mousedown , mouseup und mousemove.

Angenommen wir haben ne Tabelle

tag1 tag2 .. tag n
1 1 1
2 2 2
.. .. ..
n n n

Haben wir eine Matrize welche wir mittels eines Mehrdimensionalen Arrays darstellen können. Ich würde wohl ein Objekt nehmen wie :

Code: 
var table = {
   spalte1:{
       feld1:{posx,posy,höhe,weite,element},
       feld2:{posx,posy,höhe,weite,element},
       ..  
   },
   spalte2:{
   
   },
   ...
   ,
   spalte n:{
   }
}

Wenn die Maus gedrückt wurde speichern wir uns die Coordinaten ab , mit dem Mousemove prüfen wir immer die aktuelle Position der Maus ab.So das wir ein Rechteck ziehen können.

Nun gilt erstmal nur noch zu prüfen in welcher Spalte wir uns befinden , wenn maximal ein Tag markiert werden soll und speichern die ab.
Damit wir später bei weiteren Mausbewegungen nicht mehr suchen müssen wo wir uns befinden sondern gezielt in das Objekt gehen können und sagen okay wir schaun in table.spalte2 nach welche Tabellen Zellen sich eben innerhalb meiner Coordinaten befinden und noch nicht markiert sind , oder markiert sind und nun nicht mehr markiert werden sollen.

Ist erstmal nur so eine erste Idee , eventuell hat jemand noch eine bessere parat :)

MfG
 
Hast Du denn ein real existierendes Beispiel im Netz - vielleicht gibt es ja schon Anwendungen die sowas in der Art umsetzen und man es sich mal live anschauen könnte.

Wie realisiere ich am besten so einen Kasteneffekt beim ziehen der Maus - also die rechnteckige Markierung. Ist das ein halb-transparenter DIV Container, dessen Größe ich bei mousemove anpasse?

Danke für Deine bereits ausführliche Antwort!

Deo
 
Hier mal nen Beispiel fürs ziehen und markieren:
Code: 
<html>
<head>
<title>Test</title>

<style type="text/css">
<!--
*{font-size:12px;}
::-moz-selection {
   background: transparent;
   color: inherit;
}
::selection {
   background: transparent;
   color: inherit;
}
td{
  font-family:Monospace;
  width:20px;
  text-align:right;
}
th{
  font-size:1.2em;
  background:#c1c1c1;
  font-family:Verdana,Sans-Serif
}
-->
</style>
</head>
<body>
<script type="text/javascript">
<!--
  
  names=['Uschi','Hans','Fritz'];
  c=24;
  document.write('<table onselectstart="return false" id="tl" border="1" cellspacing="0" cellpadding="2">');
  for(var k in names)
  {
    if(k>0)document.write('<tr><th colspan="'+(c+1)+'" style="font-size:1px">&nbsp;</th></tr>');
    document.write('<tr id="r_'+k+'"><th>'+names[k]+'</th>');
    for(i=0;i<c;++i)
      {
        document.write('<td>'+i+'</td>');
      }
    document.write('</tr>');
  }


otl=document.getElementById('tl');ini=0;
function ET(e){return((window.event)?window.event.srcElement:e.target)}
otl.onmousemove=function(e){if(ini && ET(e).tagName=='TD')ET(e).style.backgroundColor='red';}
otl.onmouseout=function(e){if(ini && ET(e).tagName=='TH' || ET(e).tagName=='TABLE'){ini=0;otl.style.cursor="default";}}
otl.onmousedown=function(e){if(ET(e).tagName=='TD')ini=1;otl.style.cursor="move";ET(e).style.backgroundColor='red';}
otl.onmouseup=function(){ini=0;otl.style.cursor="default";}
//-->
</script>
</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück