with signature
This commit is contained in:
parent
9cb89279f8
commit
b4ef9acb43
|
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"editor.suggestSelection": "first",
|
||||
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
|
||||
"explorer.confirmDelete": false,
|
||||
"typescript.updateImportsOnFileMove.enabled": "always",
|
||||
"[typescript]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[html]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[json]": {
|
||||
"editor.defaultFormatter": "vscode.json-language-features"
|
||||
},
|
||||
"[scss]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[jsonc]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"editor.formatOnSave": true,
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.organizeImports": "explicit"
|
||||
},
|
||||
"prettier.printWidth": 240,
|
||||
"git.autofetch": false,
|
||||
"git.autorefresh": true
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
24
package.json
24
package.json
|
|
@ -10,22 +10,22 @@
|
|||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^17.3.0",
|
||||
"@angular/common": "^17.3.0",
|
||||
"@angular/compiler": "^17.3.0",
|
||||
"@angular/core": "^17.3.0",
|
||||
"@angular/forms": "^17.3.0",
|
||||
"@angular/platform-browser": "^17.3.0",
|
||||
"@angular/platform-browser-dynamic": "^17.3.0",
|
||||
"@angular/router": "^17.3.0",
|
||||
"@angular/animations": "^18.2.5",
|
||||
"@angular/common": "^18.2.5",
|
||||
"@angular/compiler": "^18.2.5",
|
||||
"@angular/core": "^18.2.5",
|
||||
"@angular/forms": "^18.2.5",
|
||||
"@angular/platform-browser": "^18.2.5",
|
||||
"@angular/platform-browser-dynamic": "^18.2.5",
|
||||
"@angular/router": "^18.2.5",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.14.3"
|
||||
"zone.js": "~0.14.10"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^17.3.2",
|
||||
"@angular/cli": "^17.3.2",
|
||||
"@angular/compiler-cli": "^17.3.0",
|
||||
"@angular-devkit/build-angular": "^18.2.5",
|
||||
"@angular/cli": "^18.2.5",
|
||||
"@angular/compiler-cli": "^18.2.5",
|
||||
"@types/jasmine": "~5.1.0",
|
||||
"jasmine-core": "~5.1.0",
|
||||
"karma": "~6.4.0",
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { ToyotaFormComponent } from './toyota-form/toyota-form.component';
|
||||
import { RentalAgreementComponent } from './rental-agreement/rental-agreement.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
standalone: true,
|
||||
imports: [ToyotaFormComponent],
|
||||
template: '<app-toyota-form></app-toyota-form>'
|
||||
imports: [ToyotaFormComponent, RentalAgreementComponent],
|
||||
template: '<app-rental-agreement></app-rental-agreement>'
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'toyota-form-app';
|
||||
|
|
|
|||
|
|
@ -1,162 +1,375 @@
|
|||
<div class="document">
|
||||
<div *ngFor="let page of pages; let i = index" class="page">
|
||||
<div class="page-content">
|
||||
</div>
|
||||
<div *ngFor="let page of pages; let i = index" class="page">
|
||||
<div class="page-content">
|
||||
<div [innerHTML]="page"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div #formContent style="display: none;">
|
||||
<h1 class="text-3xl font-bold mb-6">Wohnungs-Mietvertrag</h1>
|
||||
<p class="mb-4">Zwischen</p>
|
||||
<p class="mb-4">(Vor- und Zuname)</p>
|
||||
<p class="mb-4">und________________________________________________________________</p>
|
||||
<p class="mb-4">wohnhaft in als Vermieter/in</p>
|
||||
<p class="mb-4">und _______________________________________________________________</p>
|
||||
<p class="mb-4">(Vor- und Zuname)</p>
|
||||
<p class="mb-4">sowie_______________________________________________________________</p>
|
||||
<p class="mb-4">zur Zeit wohnhaft in als Mieter/in</p>
|
||||
<p class="mb-4">wird folgender Mietvertrag geschlossen.</p>
|
||||
<!-- Sichtbares Unterschriftsfeld für den Benutzer -->
|
||||
<div class="signature-input">
|
||||
<div class="date-input">
|
||||
Datum: <input type="date" [(ngModel)]="currentDate" />
|
||||
</div>
|
||||
<canvas #signatureCanvas class="signature-canvas"></canvas>
|
||||
<div class="buttons">
|
||||
<button (click)="clearSignature()">Unterschrift löschen</button>
|
||||
<button (click)="saveSignature()">Unterschrift speichern</button>
|
||||
</div>
|
||||
</div>
|
||||
<div #formContent style="display: none">
|
||||
<h1 class="text-3xl font-bold mb-6">Wohnungs-Mietvertrag</h1>
|
||||
<p class="mb-4">Zwischen</p>
|
||||
<p class="mb-4">(Vor- und Zuname)</p>
|
||||
<p class="mb-4">
|
||||
und________________________________________________________________
|
||||
</p>
|
||||
<p class="mb-4">wohnhaft in als Vermieter/in</p>
|
||||
<p class="mb-4">
|
||||
und _______________________________________________________________
|
||||
</p>
|
||||
<p class="mb-4">(Vor- und Zuname)</p>
|
||||
<p class="mb-4">
|
||||
sowie_______________________________________________________________
|
||||
</p>
|
||||
<p class="mb-4">zur Zeit wohnhaft in als Mieter/in</p>
|
||||
<p class="mb-4">wird folgender Mietvertrag geschlossen.</p>
|
||||
|
||||
<h2 class="text-2xl font-bold mt-8 mb-4">§ 1 Mieträume</h2>
|
||||
<ol class="list-decimal pl-6">
|
||||
<li class="mb-2">Zur Benutzung als Wohnung werden die im Hause</li>
|
||||
<p class="mb-2">(Ort, Straße und Hausnummer)</p>
|
||||
<p class="mb-2">gelegenen Räume vermietet:</p>
|
||||
<p class="mb-2">.........Zimmer,...........Küche/ Kochnische,..........Bad/ Dusche- mit WC,.........WC,.............Diele</p>
|
||||
<p class="mb-2">..........Balkon,...........Mansarde,...........Bodenräume..........Kellerräume,.........Garage,</p>
|
||||
<p class="mb-2">..........Auto/Abstellplatz,.........Gartenlaube,...........Garten.</p>
|
||||
<li class="mb-2">Der Vermieter ist verpflichtet, Waschküche, Trockenboden oder Trockenplatz gemäß der Hausordnung zur Verfügung zu stellen.</li>
|
||||
<li class="mb-2">Dem Mieter werden folgende Schlüssel ausgehändigt:</li>
|
||||
<p class="mb-2">Haus-, Wohnungs-, Keller-, Boden- Garagenschlüssel</p>
|
||||
<li class="mb-2">Die Wohnfläche beträgt qm.</li>
|
||||
<p class="mb-2">Die Wohnung ist frei finanziert öffentlich gefördert.</p>
|
||||
</ol>
|
||||
<h2 class="text-2xl font-bold mt-8 mb-4">§ 1 Mieträume</h2>
|
||||
<ol class="list-decimal pl-4">
|
||||
<li class="mb-2">Zur Benutzung als Wohnung werden die im Hause</li>
|
||||
<p class="mb-2">(Ort, Straße und Hausnummer)</p>
|
||||
<p class="mb-2">gelegenen Räume vermietet:</p>
|
||||
<p class="mb-2">
|
||||
.........Zimmer,...........Küche/ Kochnische,..........Bad/ Dusche- mit
|
||||
WC,.........WC,.............Diele
|
||||
</p>
|
||||
<p class="mb-2">
|
||||
..........Balkon,...........Mansarde,...........Bodenräume..........Kellerräume,.........Garage,
|
||||
</p>
|
||||
<p class="mb-2">
|
||||
..........Auto/Abstellplatz,.........Gartenlaube,...........Garten.
|
||||
</p>
|
||||
<li class="mb-2">
|
||||
Der Vermieter ist verpflichtet, Waschküche, Trockenboden oder Trockenplatz
|
||||
gemäß der Hausordnung zur Verfügung zu stellen.
|
||||
</li>
|
||||
<li class="mb-2">Dem Mieter werden folgende Schlüssel ausgehändigt:</li>
|
||||
<p class="mb-2">Haus-, Wohnungs-, Keller-, Boden- Garagenschlüssel</p>
|
||||
<li class="mb-2">Die Wohnfläche beträgt qm.</li>
|
||||
<p class="mb-2">Die Wohnung ist frei finanziert öffentlich gefördert.</p>
|
||||
</ol>
|
||||
|
||||
<h2 class="text-2xl font-bold mb-4">§ 2 Mietzeit</h2>
|
||||
<ol class="list-decimal pl-4">
|
||||
<li class="mb-2">
|
||||
Das Mietverhältnis wird auf unbestimmte Zeit abgeschlossen. Es beginnt am
|
||||
:
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
Die Vertragsparteien sind sich darüber einig, dass vorliegend ein
|
||||
längerfristiges Mietverhältnis begründet werden soll. Deshalb sind die
|
||||
Kündigungsrechte hinsichtlich des Ausspruchs von Eigenbedarfs- und
|
||||
Verwertungskündigungen für_______________Jahre ausgeschlossen. Darüber
|
||||
hinaus richten sich die sonstigen Kündigungsvoraussetzungen nach den
|
||||
gesetzlichen Vorschriften, eine Teilkündigung von Nebenräumen ist
|
||||
ausgeschlossen.
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<h2 class="text-2xl font-bold mb-4">§ 2 Mietzeit</h2>
|
||||
<ol class="list-decimal pl-6">
|
||||
<li class="mb-2">Das Mietverhältnis wird auf unbestimmte Zeit abgeschlossen. Es beginnt am :</li>
|
||||
<li class="mb-2">Die Vertragsparteien sind sich darüber einig, dass vorliegend ein längerfristiges Mietverhältnis begründet werden soll. Deshalb sind die Kündigungsrechte hinsichtlich des Ausspruchs von Eigenbedarfs- und Verwertungskündigungen für_______________Jahre ausgeschlossen. Darüber hinaus richten sich die sonstigen Kündigungsvoraussetzungen nach den gesetzlichen Vorschriften, eine Teilkündigung von Nebenräumen ist ausgeschlossen.</li>
|
||||
</ol>
|
||||
<h2 class="text-2xl font-bold mt-8 mb-4">§ 3 Miete</h2>
|
||||
<p class="mb-4">Die Miete beträgt je Monat: _______________€.</p>
|
||||
<p class="mb-4">In Worten EURO.</p>
|
||||
<p class="mb-4">
|
||||
Die Vertragsparteien sind sich darüber einig, dass die Miete für den
|
||||
Zeitraum von _______ Jahren nicht erhöht werden kann. Mit dieser Mietzahlung
|
||||
sind sämtliche Betriebskosten abgegolten, sofern nicht die nachfolgende
|
||||
Regelung vereinbart wird.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
Neben der Miete werden folgende Nebenkosten als umlagefähig vereinbart:
|
||||
</p>
|
||||
<table class="w-full mb-4">
|
||||
<tr>
|
||||
<td>Monatliche Vorauszahlung</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Heizungs- und Warmwasserkosten</td>
|
||||
<td>_________€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Frischwasserkosten</td>
|
||||
<td>_________€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Entwässerungskosten</td>
|
||||
<td>_________€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Müllabfuhrkosten</td>
|
||||
<td>_________€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Allgemeinbeleuchtungskosten</td>
|
||||
<td>_________€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>( weitere Betriebskosten hier eintragen )</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<p class="mb-4">
|
||||
Die vertraglich vereinbarte Höhe der Vorauszahlungen für Heizkosten bzw.
|
||||
vertraglich vereinbarte Nebenkosten ist ausreichend, um die voraussichtlich
|
||||
entstehenden Kosten auszugleichen.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
Über die Nebenkosten wird einmal jährlich abgerechnet. ja/nein
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
Für die oben aufgeführten Nebenkosten leistet der Mieter eine
|
||||
Pauschalzahlung.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-bold mt-8 mb-4">§ 3 Miete</h2>
|
||||
<p class="mb-4">Die Miete beträgt je Monat: _______________€.</p>
|
||||
<p class="mb-4">In Worten EURO.</p>
|
||||
<p class="mb-4">Die Vertragsparteien sind sich darüber einig, dass die Miete für den Zeitraum von _______ Jahren nicht erhöht werden kann. Mit dieser Mietzahlung sind sämtliche Betriebskosten abgegolten, sofern nicht die nachfolgende Regelung vereinbart wird.</p>
|
||||
<p class="mb-4">Neben der Miete werden folgende Nebenkosten als umlagefähig vereinbart:</p>
|
||||
<table class="w-full mb-4">
|
||||
<tr>
|
||||
<td>Monatliche Vorauszahlung</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Heizungs- und Warmwasserkosten</td>
|
||||
<td>_________€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Frischwasserkosten</td>
|
||||
<td>_________€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Entwässerungskosten</td>
|
||||
<td>_________€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Müllabfuhrkosten</td>
|
||||
<td>_________€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Allgemeinbeleuchtungskosten</td>
|
||||
<td>_________€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>( weitere Betriebskosten hier eintragen )</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<p class="mb-4">Die vertraglich vereinbarte Höhe der Vorauszahlungen für Heizkosten bzw. vertraglich vereinbarte Nebenkosten ist ausreichend, um die voraussichtlich entstehenden Kosten auszugleichen.</p>
|
||||
<p class="mb-4">Über die Nebenkosten wird einmal jährlich abgerechnet. ja/nein</p>
|
||||
<p class="mb-4">Für die oben aufgeführten Nebenkosten leistet der Mieter eine Pauschalzahlung.</p>
|
||||
<h2 class="text-2xl font-bold mb-4">
|
||||
§ 4 Abrechnung der Heiz- und Nebenkosten
|
||||
</h2>
|
||||
<ol class="list-decimal pl-4">
|
||||
<li class="mb-2">
|
||||
Sind Vorauszahlungen vereinbart, so werden die Kosten für Heizung und
|
||||
Warmwasser nach den Grundsätzen der Heizkostenverordnung abgerechnet.
|
||||
Dabei gelten folgende Verteilerschlüssel
|
||||
</li>
|
||||
</ol>
|
||||
<table class="w-full mb-4">
|
||||
<tr>
|
||||
<td>50% nach Wohnfläche ( qm )</td>
|
||||
<td>50% nach Verbrauch</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>45% nach Wohnfläche (qm )</td>
|
||||
<td>55% nach Verbrauch</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>40% nach Wohnfläche ( qm )</td>
|
||||
<td>60% nach Verbrauch</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>35% nach Wohnfläche ( qm )</td>
|
||||
<td>65% nach Verbrauch</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>30% nach Wohnfläche ( qm )</td>
|
||||
<td>70% nach Verbrauch</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p class="mb-4">
|
||||
Sofern eine Abrechnung erfolgt, werden die übrigen vertraglich vereinbarten
|
||||
Betriebskosten entweder nach erfasstem Verbrauch abgerechnet ( Wasserzähler
|
||||
) oder aber nach einem Personenverteilerschlüssel, oder nach dem Verhältnis
|
||||
der Wohnflächen zueinander.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
Der Abrechnungszeitraum endet jeweils zum___________eines Jahres.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
Sind Nebenkosten abgerechnet worden, so werden Guthabens- oder
|
||||
Nachzahlungsbeträge vier Wochen nach Zugang der ordnungsgemäßen Abrechnung
|
||||
fällig. Dem Mieter steht das Recht zu, gegen Erstattung angemessener
|
||||
Kopiekosten Belegkopien übersendet zu bekommen. Im Falle von Über- oder
|
||||
Nachzahlungen können die Vorauszahlungen auf einen angemessenen Betrag für
|
||||
zukünftige Mietzahlungszeiträume angepaßt werden.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-bold mt-8 mb-4">§ 5 Zahlung der Miete</h2>
|
||||
<p class="mb-4">
|
||||
Die Miete ist- innerhalb eines jeden Monats an den Vermieter oder an die von
|
||||
ihm zur Entgegennahme berechtigte Person oder Stelle zu zahlen.
|
||||
</p>
|
||||
<p class="mb-4">Die Bankverbindung des Vermieters lautet:</p>
|
||||
<p class="mb-2">Kontoinhaber:</p>
|
||||
<p class="mb-2">IBAN: DE</p>
|
||||
<p class="mb-2">BIC:</p>
|
||||
<p class="mb-2">Bankinstitut:</p>
|
||||
|
||||
<h2 class="text-2xl font-bold mb-4">§ 4 Abrechnung der Heiz- und Nebenkosten</h2>
|
||||
<ol class="list-decimal pl-6">
|
||||
<li class="mb-2">Sind Vorauszahlungen vereinbart, so werden die Kosten für Heizung und Warmwasser nach den Grundsätzen der Heizkostenverordnung abgerechnet. Dabei gelten folgende Verteilerschlüssel</li>
|
||||
</ol>
|
||||
<table class="w-full mb-4">
|
||||
<tr>
|
||||
<td>50% nach Wohnfläche ( qm )</td>
|
||||
<td>50% nach Verbrauch</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>45% nach Wohnfläche (qm )</td>
|
||||
<td>55% nach Verbrauch</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>40% nach Wohnfläche ( qm )</td>
|
||||
<td>60% nach Verbrauch</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>35% nach Wohnfläche ( qm )</td>
|
||||
<td>65% nach Verbrauch</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>30% nach Wohnfläche ( qm )</td>
|
||||
<td>70% nach Verbrauch</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p class="mb-4">Sofern eine Abrechnung erfolgt, werden die übrigen vertraglich vereinbarten Betriebskosten entweder nach erfasstem Verbrauch abgerechnet ( Wasserzähler ) oder aber nach einem Personenverteilerschlüssel, oder nach dem Verhältnis der Wohnflächen zueinander.</p>
|
||||
<p class="mb-4">Der Abrechnungszeitraum endet jeweils zum___________eines Jahres.</p>
|
||||
<p class="mb-4">Sind Nebenkosten abgerechnet worden, so werden Guthabens- oder Nachzahlungsbeträge vier Wochen nach Zugang der ordnungsgemäßen Abrechnung fällig. Dem Mieter steht das Recht zu, gegen Erstattung angemessener Kopiekosten Belegkopien übersendet zu bekommen. Im Falle von Über- oder Nachzahlungen können die Vorauszahlungen auf einen angemessenen Betrag für zukünftige Mietzahlungszeiträume angepaßt werden.</p>
|
||||
<h2 class="text-2xl font-bold mb-4">
|
||||
§ 6 Versorgung mit Heizung und Warmwasser
|
||||
</h2>
|
||||
<p class="mb-4">
|
||||
Die vorhandene Heizungsanlage muss, soweit es die Witterung erforderlich
|
||||
macht, in Betrieb sein. Dabei wird mindestens eine Raumtemperatur von 22°C
|
||||
in der Zeit zwischen 5.00 Uhr und 24.00 Uhr in den beheizbaren Räumen
|
||||
seitens des Vermieters garantiert.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
Sofern eine Warmwasserversorgung vorhanden ist, verpflichtet sich der
|
||||
Vermieter, diese Tag und Nacht zur Verfügung zu stellen.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
Gegen den Willen des Mieters ist eine Ausgliederung bzw. Übertragung der
|
||||
Heizungs- und Warmwasserversorgung auf Dritte nicht zulässig.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
Sollte zu Beginn des Mietverhältnisses die Heizungs- und Warmwasseranlage
|
||||
von einem Dritten betrieben werden, kann der Mieter gegenüber dem Vermieter
|
||||
seine mietrechtlichen Gewährleistungsansprüche geltend machen.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-bold mt-8 mb-4">§ 5 Zahlung der Miete</h2>
|
||||
<p class="mb-4">Die Miete ist- innerhalb eines jeden Monats an den Vermieter oder an die von ihm zur Entgegennahme berechtigte Person oder Stelle zu zahlen.</p>
|
||||
<p class="mb-4">Die Bankverbindung des Vermieters lautet:</p>
|
||||
<p class="mb-2">Kontoinhaber:</p>
|
||||
<p class="mb-2">IBAN: DE</p>
|
||||
<p class="mb-2">BIC:</p>
|
||||
<p class="mb-2">Bankinstitut:</p>
|
||||
<h2 class="text-2xl font-bold mt-8 mb-4">
|
||||
§ 7 Arbeiten in den Mieträumen vor Einzug
|
||||
</h2>
|
||||
<p class="mb-4">
|
||||
Der Vermieter verpflichtet sich, vor dem Einzug des Mieters, oder wenn dies
|
||||
nicht möglich ist, bis spätestens zum . folgende Arbeiten in den Mieträumen
|
||||
vornehmen zu lassen.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-bold mt-8 mb-4">
|
||||
§ 8 Benutzung der Mieträume (Untervermietung)
|
||||
</h2>
|
||||
<p class="mb-4">
|
||||
Der Mieter darf die Mieträume nur zu Wohnzwecken nutzen. Der Mieter darf die
|
||||
Mieträume mit Erlaubnis des Vermieters untervermieten. Die Erlaubnis erfolgt
|
||||
ein für allemal. Die Erlaubnis darf nicht ohne sachliche Gründe versagt
|
||||
werden.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
Verweigert der Vermieter die Erlaubnis zur Untervermietung, so kann der
|
||||
Mieter das Mietverhältnis vorzeitig mit einmonatiger Kündigungsfrist
|
||||
aufkündigen.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
Dem Mieter wird das Recht eingeräumt, nicht störende Betätigungen, auch
|
||||
gewerblicher Art, in der Wohnung auszuüben, sofern der überwiegende
|
||||
Charakter der Wohnraumnutzung dadurch nicht beeinträchtigt wird.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-bold mb-4">§ 6 Versorgung mit Heizung und Warmwasser</h2>
|
||||
<p class="mb-4">Die vorhandene Heizungsanlage muss, soweit es die Witterung erforderlich macht, in Betrieb sein. Dabei wird mindestens eine Raumtemperatur von 22°C in der Zeit zwischen 5.00 Uhr und 24.00 Uhr in den beheizbaren Räumen seitens des Vermieters garantiert.</p>
|
||||
<p class="mb-4">Sofern eine Warmwasserversorgung vorhanden ist, verpflichtet sich der Vermieter, diese Tag und Nacht zur Verfügung zu stellen.</p>
|
||||
<p class="mb-4">Gegen den Willen des Mieters ist eine Ausgliederung bzw. Übertragung der Heizungs- und Warmwasserversorgung auf Dritte nicht zulässig.</p>
|
||||
<p class="mb-4">Sollte zu Beginn des Mietverhältnisses die Heizungs- und Warmwasseranlage von einem Dritten betrieben werden, kann der Mieter gegenüber dem Vermieter seine mietrechtlichen Gewährleistungsansprüche geltend machen.</p>
|
||||
<h2 class="text-2xl font-bold mb-4">§ 9 Haushaltsmaschinen</h2>
|
||||
<p class="mb-4">
|
||||
Der Mieter ist berechtigt, in den Mieträumen Haushaltsmaschinen ( z.B.
|
||||
Wasch- Geschirrspülmaschinen, Trockenautomaten, etc. ) aufzustellen. Dies
|
||||
gilt auch für den Fall, daß in Gemeinschaftsräumen Möglichkeiten zum
|
||||
Aufstellen von Haushaltsgeräten vorhanden sind.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
Der Vermieter ist verpflichtet, dafür Sorge zu tragen, dass die
|
||||
Stromversorgung der Wohnung für die aufgestellten Geräte als ausreichend
|
||||
dimensioniert bzw. abgesichert anzusehen ist. Ist dies nicht der Fall, so
|
||||
ist der Vermieter zur Herrichtung der Stromversorgung nach den jeweils
|
||||
geltenden Bestimmungen verpflichtet
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-bold mt-8 mb-4">§ 7 Arbeiten in den Mieträumen vor Einzug</h2>
|
||||
<p class="mb-4">Der Vermieter verpflichtet sich, vor dem Einzug des Mieters, oder wenn dies nicht möglich ist, bis spätestens zum . folgende Arbeiten in den Mieträumen vornehmen zu lassen.</p>
|
||||
<h2 class="text-2xl font-bold mt-8 mb-4">
|
||||
§ 10 Ausbesserungen und Veränderungen
|
||||
</h2>
|
||||
<p class="mb-4">
|
||||
Der Wohnungsmieter hat Einwirkungen auf die Wohnräume zu dulden, die zu
|
||||
ihrer Erhaltung oder der des Gebäudes erforderlich sind. Maßnahmen zur
|
||||
Verbesserung der Wohnung oder sonstiger Teile des Hauses oder zur Einsparung
|
||||
von Energie oder Wasser, die zu einer Wohnwertverbesserung führen, hat der
|
||||
Mieter zu dulden, soweit die geplanten Maßnahmen für ihn, für seine Familie
|
||||
oder einer anderen, zu seinem Hausstand gehörenden Person nicht zu einer
|
||||
ungerechtfertigten Härte führen würde.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
Dabei ist die sich dadurch ergebende rechtlich zulässige Mieterhöhung auf
|
||||
5,5 % der auf die Wohnung des Mieters entfallenden Kostengröße beschränkt.
|
||||
Bauliche Veränderungen durch den Mieter dürfen nur mit Erlaubnis des
|
||||
Vermieters vorgenommen werden, es sei denn, der Mieter verpflichtet sich vor
|
||||
Durchführung der Maßnahme zur Wiederherstellung des ursprünglichen Zustandes
|
||||
bei Beendigung des Mietverhältnisses.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-bold mt-8 mb-4">§ 8 Benutzung der Mieträume (Untervermietung)</h2>
|
||||
<p class="mb-4">Der Mieter darf die Mieträume nur zu Wohnzwecken nutzen. Der Mieter darf die Mieträume mit Erlaubnis des Vermieters untervermieten. Die Erlaubnis erfolgt ein für allemal. Die Erlaubnis darf nicht ohne sachliche Gründe versagt werden.</p>
|
||||
<p class="mb-4">Verweigert der Vermieter die Erlaubnis zur Untervermietung, so kann der Mieter das Mietverhältnis vorzeitig mit einmonatiger Kündigungsfrist aufkündigen.</p>
|
||||
<p class="mb-4">Dem Mieter wird das Recht eingeräumt, nicht störende Betätigungen, auch gewerblicher Art, in der Wohnung auszuüben, sofern der überwiegende Charakter der Wohnraumnutzung dadurch nicht beeinträchtigt wird.</p>
|
||||
<h2 class="text-2xl font-bold mt-8 mb-4">
|
||||
§ 11 Telekomunikation-Energielieferung-Multimedia-Dienstleistungen
|
||||
</h2>
|
||||
<p class="mb-4">
|
||||
Dem Mieter wird das Recht eingeräumt, eigene Liefer- und Anschlussverträge
|
||||
mit Telekommunikationsunternehmen, Energielieferanten und
|
||||
Multimediadienstleistern seiner Wahl abzuschließen. Dabei verpflichtet sich
|
||||
der Vermieter schon jetzt, die dafür notwendige Benutzung der vorhandenen
|
||||
Hausinstallation zu genehmigen.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
Sollten zusätzliche Installationen notwendig sein, werden diese durch den
|
||||
Vermieter genehmigt, sofern der Mieter dem Vermieter die dadurch
|
||||
entstehenden Kosten ersetzt ,bzw. ihn von einer Kostentragung freistellt.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-bold mb-4">§ 12 Einbauten des Mieters</h2>
|
||||
<p class="mb-4">
|
||||
Der Mieter ist berechtigt, in die angemieteten Räumlichkeiten Einrichtungen
|
||||
einzubauen. Bei Beendigung des Mietverhältnisses steht dem Mieter das Recht
|
||||
zu, die von ihm eingebrachten Einrichtungen wegzunehmen. Dem Vermieter steht
|
||||
das Recht zu, das Wegnahmerecht des Mieters zu verhindern, wobei dem Mieter
|
||||
dann eine angemessene Entschädigung zu zahlen ist.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
Die Höhe der Entschädigungszahlung richtet sich nach dem Zeitwert der in den
|
||||
Räumlichkeiten verbliebenen Einrichtungen bzw. Einbauten.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
Für den Fall, dass eine konkrete vertragliche Vereinbarung über die
|
||||
jährliche Absetzung für Abnutzung der Einrichtungen und Einbauten nicht
|
||||
getroffen wurde, vereinbaren die Parteien schon jetzt, dass pro Jahr der
|
||||
Wohndauer 5% der nachgewiesenen Kosten als abgewohnt zu bewerten sind.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-bold mb-4">§ 9 Haushaltsmaschinen</h2>
|
||||
<p class="mb-4">Der Mieter ist berechtigt, in den Mieträumen Haushaltsmaschinen ( z.B. Wasch- Geschirrspülmaschinen, Trockenautomaten, etc. ) aufzustellen. Dies gilt auch für den Fall, daß in Gemeinschaftsräumen Möglichkeiten zum Aufstellen von Haushaltsgeräten vorhanden sind.</p>
|
||||
<p class="mb-4">Der Vermieter ist verpflichtet, dafür Sorge zu tragen, dass die Stromversorgung der Wohnung für die aufgestellten Geräte als ausreichend dimensioniert bzw. abgesichert anzusehen ist. Ist dies nicht der Fall, so ist der Vermieter zur Herrichtung der Stromversorgung nach den jeweils geltenden Bestimmungen verpflichtet</p>
|
||||
<h2 class="text-2xl font-bold mt-8 mb-4">§ 13 Tierhaltung</h2>
|
||||
<p class="mb-4">
|
||||
Dem Mieter wird das Recht zugestanden, in der Wohnung Haustiere zu halten,
|
||||
wobei dem Vermieter das Recht zusteht, der Tierhaltung zu widersprechen,
|
||||
wenn durch die Tierhaltung entweder eine übermäßige vertragliche Abnutzung
|
||||
der Wohnung erfo-gen würde bzw. zwingende Gründe gegen die Tierhaltung
|
||||
gegeben sind.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
Sofern Gartenflächen und Hofflächen vorhanden sind, können diese mitgenutzt
|
||||
werden, ein einseitiger Widerruf der Garten- und Hofnutzung durch den
|
||||
Vermieter ist nur bei Vorliegen wichtiger, konkreter Gründe möglich.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-bold mt-8 mb-4">§ 10 Ausbesserungen und Veränderungen</h2>
|
||||
<p class="mb-4">Der Wohnungsmieter hat Einwirkungen auf die Wohnräume zu dulden, die zu ihrer Erhaltung oder der des Gebäudes erforderlich sind. Maßnahmen zur Verbesserung der Wohnung oder sonstiger Teile des Hauses oder zur Einsparung von Energie oder Wasser, die zu einer Wohnwertverbesserung führen, hat der Mieter zu dulden, soweit die geplanten Maßnahmen für ihn, für seine Familie oder einer anderen, zu seinem Hausstand gehörenden Person nicht zu einer ungerechtfertigten Härte führen würde.</p>
|
||||
<p class="mb-4">Dabei ist die sich dadurch ergebende rechtlich zulässige Mieterhöhung auf 5,5 % der auf die Wohnung des Mieters entfallenden Kostengröße beschränkt. Bauliche Veränderungen durch den Mieter dürfen nur mit Erlaubnis des Vermieters vorgenommen werden, es sei denn, der Mieter verpflichtet sich vor Durchführung der Maßnahme zur Wiederherstellung des ursprünglichen Zustandes bei Beendigung des Mietverhältnisses.</p>
|
||||
|
||||
<h2 class="text-2xl font-bold mt-8 mb-4">§ 11 Telekomunikation-Energielieferung-Multimedia-Dienstleistungen</h2>
|
||||
<p class="mb-4">Dem Mieter wird das Recht eingeräumt, eigene Liefer- und Anschlussverträge mit Telekommunikationsunternehmen, Energielieferanten und Multimediadienstleistern seiner Wahl abzuschließen. Dabei verpflichtet sich der Vermieter schon jetzt, die dafür notwendige Benutzung der vorhandenen Hausinstallation zu genehmigen.</p>
|
||||
<p class="mb-4">Sollten zusätzliche Installationen notwendig sein, werden diese durch den Vermieter genehmigt, sofern der Mieter dem Vermieter die dadurch entstehenden Kosten ersetzt ,bzw. ihn von einer Kostentragung freistellt.</p>
|
||||
|
||||
|
||||
<h2 class="text-2xl font-bold mb-4">§ 12 Einbauten des Mieters</h2>
|
||||
<p class="mb-4">Der Mieter ist berechtigt, in die angemieteten Räumlichkeiten Einrichtungen einzubauen. Bei Beendigung des Mietverhältnisses steht dem Mieter das Recht zu, die von ihm eingebrachten Einrichtungen wegzunehmen. Dem Vermieter steht das Recht zu, das Wegnahmerecht des Mieters zu verhindern, wobei dem Mieter dann eine angemessene Entschädigung zu zahlen ist.</p>
|
||||
<p class="mb-4">Die Höhe der Entschädigungszahlung richtet sich nach dem Zeitwert der in den Räumlichkeiten verbliebenen Einrichtungen bzw. Einbauten.</p>
|
||||
<p class="mb-4">Für den Fall, dass eine konkrete vertragliche Vereinbarung über die jährliche Absetzung für Abnutzung der Einrichtungen und Einbauten nicht getroffen wurde, vereinbaren die Parteien schon jetzt, dass pro Jahr der Wohndauer 5% der nachgewiesenen Kosten als abgewohnt zu bewerten sind.</p>
|
||||
|
||||
<h2 class="text-2xl font-bold mt-8 mb-4">§ 13 Tierhaltung</h2>
|
||||
<p class="mb-4">Dem Mieter wird das Recht zugestanden, in der Wohnung Haustiere zu halten, wobei dem Vermieter das Recht zusteht, der Tierhaltung zu widersprechen, wenn durch die Tierhaltung entweder eine übermäßige vertragliche Abnutzung der Wohnung erfo-gen würde bzw. zwingende Gründe gegen die Tierhaltung gegeben sind.</p>
|
||||
<p class="mb-4">Sofern Gartenflächen und Hofflächen vorhanden sind, können diese mitgenutzt werden, ein einseitiger Widerruf der Garten- und Hofnutzung durch den Vermieter ist nur bei Vorliegen wichtiger, konkreter Gründe möglich.</p>
|
||||
|
||||
<h2 class="text-2xl font-bold mt-8 mb-4">§ 14 Fernsehempfang, Gemeinschaftsantennenanlage, Breitbandverkabelung</h2>
|
||||
<p class="mb-4">Die Wohnung ist mit einer Fernsehempfangsanlage, nach dem heutigen Stand der Technik, ausgestattet. Die vertragsschließenden Parteien sind sich darüber einig, daß eine Ausgliederung der Fernseh- und Rundfunkversorgung auf einen Drittbetreiber nur mit ausdrücklicher schriftlicher Zustimmung des Mieters zulässig ist.</p>
|
||||
<p class="mb-4">Der Vermieter ist berechtigt, zugunsten der Anbringung einer Gemeinschaftsantenne für alle üblichen Fernseh- und Rundfunkprogramme, die Entfernung von vorhandenen Einzelantennen auf seine Kosten zu verlangen, sofern die überwiegende Mehrheit der Mieter damit einverstanden ist, es sei denn, das wichtige Gründe einzelner Mieter gegen ein solches Verlangen sprechen. Sinngemäß gilt dies auch für Satellitenempfangsanlagen.</p>
|
||||
<p class="mb-4">Gemeinschaftsantennen und Gemeinschaftssatellitenanlagen sind durch den Vermieter auf den jeweils ortsüblichen Stand der Technik empfangsbereit zu halten.</p>
|
||||
<p class="mb-4">Der Mieter ist berechtigt, seine Wohnung mit einer Breitbandkabelanlage auszustatten, verbleibt die Breitbandkabelanlage nach Beendigung des Mietverhältnisses in der Wohnung, gilt dies als Ausstattung gemäß § 12 des Mietvertrages. Sinngemäß gilt dies auch für Einzelsatellitenempfangsanlagen.</p>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold mt-8 mb-4">
|
||||
§ 14 Fernsehempfang, Gemeinschaftsantennenanlage, Breitbandverkabelung
|
||||
</h2>
|
||||
<p class="mb-4">
|
||||
Die Wohnung ist mit einer Fernsehempfangsanlage, nach dem heutigen Stand der
|
||||
Technik, ausgestattet. Die vertragsschließenden Parteien sind sich darüber
|
||||
einig, daß eine Ausgliederung der Fernseh- und Rundfunkversorgung auf einen
|
||||
Drittbetreiber nur mit ausdrücklicher schriftlicher Zustimmung des Mieters
|
||||
zulässig ist.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
Der Vermieter ist berechtigt, zugunsten der Anbringung einer
|
||||
Gemeinschaftsantenne für alle üblichen Fernseh- und Rundfunkprogramme, die
|
||||
Entfernung von vorhandenen Einzelantennen auf seine Kosten zu verlangen,
|
||||
sofern die überwiegende Mehrheit der Mieter damit einverstanden ist, es sei
|
||||
denn, das wichtige Gründe einzelner Mieter gegen ein solches Verlangen
|
||||
sprechen. Sinngemäß gilt dies auch für Satellitenempfangsanlagen.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
Gemeinschaftsantennen und Gemeinschaftssatellitenanlagen sind durch den
|
||||
Vermieter auf den jeweils ortsüblichen Stand der Technik empfangsbereit zu
|
||||
halten.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
Der Mieter ist berechtigt, seine Wohnung mit einer Breitbandkabelanlage
|
||||
auszustatten, verbleibt die Breitbandkabelanlage nach Beendigung des
|
||||
Mietverhältnisses in der Wohnung, gilt dies als Ausstattung gemäß § 12 des
|
||||
Mietvertrages. Sinngemäß gilt dies auch für Einzelsatellitenempfangsanlagen.
|
||||
</p>
|
||||
<!-- Unterschriftsfeld im Dokument -->
|
||||
<div class="signature-container">
|
||||
<div class="date">Datum: {{ currentDate }}</div>
|
||||
<img
|
||||
[src]="signatureImage"
|
||||
alt="Unterschrift"
|
||||
class="signature-image"
|
||||
*ngIf="signatureImage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
#measureContainer
|
||||
style="position: absolute; visibility: hidden; width: 210mm; padding: 20mm"
|
||||
></div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
.document {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.page {
|
||||
width: 210mm;
|
||||
height: 297mm;
|
||||
padding: 20mm;
|
||||
margin: 10mm auto;
|
||||
background: white;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.document {
|
||||
/* Ihre Dokumentstile */
|
||||
}
|
||||
|
||||
.page {
|
||||
/* Seitenstile, z.B. Seitenränder, Breaks etc. */
|
||||
page-break-after: always;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
/* Inhaltsstile */
|
||||
}
|
||||
|
||||
.signature-input {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.date-input {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.signature-canvas {
|
||||
border: 1px dashed #000;
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
touch-action: none; /* Verbessert die Touch-Interaktion */
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.signature-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.signature-container .date {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.signature-image {
|
||||
border: 1px dashed #000;
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.page {
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,12 +1,270 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import {
|
||||
AfterViewInit,
|
||||
Component,
|
||||
ElementRef,
|
||||
Renderer2,
|
||||
ViewChild,
|
||||
} from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'app-rental-agreement',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
imports: [CommonModule, FormsModule],
|
||||
templateUrl: './rental-agreement.component.html',
|
||||
styleUrl: './rental-agreement.component.scss'
|
||||
styleUrl: './rental-agreement.component.scss',
|
||||
})
|
||||
export class RentalAgreementComponent {
|
||||
export class RentalAgreementComponent implements AfterViewInit {
|
||||
@ViewChild('formContent') formContent!: ElementRef<HTMLDivElement>;
|
||||
@ViewChild('measureContainer') measureContainer!: ElementRef<HTMLDivElement>;
|
||||
@ViewChild('signatureCanvas') signatureCanvas!: ElementRef<HTMLCanvasElement>;
|
||||
|
||||
pages: string[] = [];
|
||||
private currentPageHeight = 0;
|
||||
private maxPageHeight = 1122 - 150; // A4 height in pixels (297mm at 96 DPI) - 150px für Margins
|
||||
|
||||
// Signatur-bezogene Variablen
|
||||
currentDate: string = new Date().toISOString().substr(0, 10); // YYYY-MM-DD
|
||||
signatureImage: string | null = null;
|
||||
|
||||
private ctx!: CanvasRenderingContext2D;
|
||||
private isDrawing = false;
|
||||
|
||||
constructor(private renderer: Renderer2, private el: ElementRef) {}
|
||||
|
||||
ngAfterViewInit() {
|
||||
// Initialisieren des Canvas
|
||||
const canvas = this.signatureCanvas.nativeElement;
|
||||
this.ctx = canvas.getContext('2d')!;
|
||||
this.resizeCanvas();
|
||||
this.setupCanvasEvents();
|
||||
//setTimeout(() => this.renderContent(), 0);
|
||||
}
|
||||
/**
|
||||
* Passt die Canvas-Größe an.
|
||||
*/
|
||||
resizeCanvas() {
|
||||
const canvas = this.signatureCanvas.nativeElement;
|
||||
canvas.width = 300; // Anpassen nach Bedarf
|
||||
canvas.height = 100; // Anpassen nach Bedarf
|
||||
this.ctx.lineWidth = 2;
|
||||
this.ctx.strokeStyle = '#000';
|
||||
this.ctx.lineCap = 'round';
|
||||
this.ctx.lineJoin = 'round';
|
||||
}
|
||||
|
||||
/**
|
||||
* Setzt die Ereignislistener für das Canvas.
|
||||
*/
|
||||
setupCanvasEvents() {
|
||||
const canvas = this.signatureCanvas.nativeElement;
|
||||
|
||||
// Maus-Ereignisse
|
||||
canvas.addEventListener('mousedown', this.startDrawing.bind(this));
|
||||
canvas.addEventListener('mousemove', this.draw.bind(this));
|
||||
canvas.addEventListener('mouseup', this.stopDrawing.bind(this));
|
||||
canvas.addEventListener('mouseleave', this.stopDrawing.bind(this));
|
||||
|
||||
// Touch-Ereignisse
|
||||
canvas.addEventListener('touchstart', this.startDrawing.bind(this));
|
||||
canvas.addEventListener('touchmove', this.draw.bind(this));
|
||||
canvas.addEventListener('touchend', this.stopDrawing.bind(this));
|
||||
}
|
||||
|
||||
/**
|
||||
* Startet das Zeichnen auf dem Canvas.
|
||||
*/
|
||||
startDrawing(event: MouseEvent | TouchEvent) {
|
||||
event.preventDefault();
|
||||
this.isDrawing = true;
|
||||
const { x, y } = this.getXY(event);
|
||||
this.ctx.beginPath();
|
||||
this.ctx.moveTo(x, y);
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeichnet auf dem Canvas.
|
||||
*/
|
||||
draw(event: MouseEvent | TouchEvent) {
|
||||
if (!this.isDrawing) return;
|
||||
event.preventDefault();
|
||||
const { x, y } = this.getXY(event);
|
||||
this.ctx.lineTo(x, y);
|
||||
this.ctx.stroke();
|
||||
}
|
||||
|
||||
/**
|
||||
* Beendet das Zeichnen auf dem Canvas.
|
||||
*/
|
||||
stopDrawing(event: MouseEvent | TouchEvent) {
|
||||
if (!this.isDrawing) return;
|
||||
event.preventDefault();
|
||||
this.isDrawing = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Ermittelt die X- und Y-Koordinaten auf dem Canvas.
|
||||
*/
|
||||
getXY(event: MouseEvent | TouchEvent): { x: number; y: number } {
|
||||
const canvas = this.signatureCanvas.nativeElement;
|
||||
let clientX: number;
|
||||
let clientY: number;
|
||||
|
||||
if (event instanceof MouseEvent) {
|
||||
clientX = event.clientX;
|
||||
clientY = event.clientY;
|
||||
} else {
|
||||
clientX = event.touches[0].clientX;
|
||||
clientY = event.touches[0].clientY;
|
||||
}
|
||||
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const x = clientX - rect.left;
|
||||
const y = clientY - rect.top;
|
||||
return { x, y };
|
||||
}
|
||||
|
||||
/**
|
||||
* Löscht die Unterschrift vom Canvas.
|
||||
*/
|
||||
clearSignature() {
|
||||
this.ctx.clearRect(
|
||||
0,
|
||||
0,
|
||||
this.signatureCanvas.nativeElement.width,
|
||||
this.signatureCanvas.nativeElement.height
|
||||
);
|
||||
this.signatureImage = null;
|
||||
this.renderContent(); // Neu rendern, um die Unterschrift aus den Seiten zu entfernen
|
||||
}
|
||||
|
||||
/**
|
||||
* Speichert die Unterschrift als Bild.
|
||||
*/
|
||||
saveSignature() {
|
||||
const canvas = this.signatureCanvas.nativeElement;
|
||||
this.signatureImage = canvas.toDataURL('image/png');
|
||||
this.pages = [];
|
||||
setTimeout(() => {
|
||||
this.renderContent(); // Neu rendern, um die Unterschrift in den Seiten einzufügen
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
renderContent() {
|
||||
let currentPage = '';
|
||||
const children = Array.from(this.formContent.nativeElement.children);
|
||||
const totalElements = children.length;
|
||||
|
||||
for (let i = 0; i < totalElements; i++) {
|
||||
const element = children[i] as HTMLElement;
|
||||
|
||||
// Überprüfen, ob das aktuelle Element ein <h2> ist
|
||||
if (element.tagName.toLowerCase() === 'h2') {
|
||||
// Clone das <h2> Element
|
||||
const h2Clone = element.cloneNode(true) as HTMLElement;
|
||||
this.renderer.appendChild(this.measureContainer.nativeElement, h2Clone);
|
||||
|
||||
// Berechnung der Höhe inklusive Margins für <h2>
|
||||
const h2Style = window.getComputedStyle(h2Clone);
|
||||
const h2MarginTop = parseFloat(h2Style.marginTop) || 0;
|
||||
const h2MarginBottom = parseFloat(h2Style.marginBottom) || 0;
|
||||
const h2Height = h2Clone.offsetHeight + h2MarginTop + h2MarginBottom;
|
||||
|
||||
// Entfernen des geklonten <h2> Elements aus dem Messcontainer
|
||||
this.renderer.removeChild(this.measureContainer.nativeElement, h2Clone);
|
||||
|
||||
// Prüfen, ob es ein nachfolgendes <p> Element gibt
|
||||
let pHeight = 0;
|
||||
if (i + 1 < totalElements) {
|
||||
const nextElement = children[i + 1] as HTMLElement;
|
||||
//if (nextElement.tagName.toLowerCase() === 'p') {
|
||||
const pClone = nextElement.cloneNode(true) as HTMLElement;
|
||||
this.renderer.appendChild(
|
||||
this.measureContainer.nativeElement,
|
||||
pClone
|
||||
);
|
||||
|
||||
// Berechnung der Höhe inklusive Margins für <p>
|
||||
const pStyle = window.getComputedStyle(pClone);
|
||||
const pMarginTop = parseFloat(pStyle.marginTop) || 0;
|
||||
const pMarginBottom = parseFloat(pStyle.marginBottom) || 0;
|
||||
pHeight = pClone.offsetHeight + pMarginTop + pMarginBottom;
|
||||
|
||||
// Entfernen des geklonten <p> Elements aus dem Messcontainer
|
||||
this.renderer.removeChild(
|
||||
this.measureContainer.nativeElement,
|
||||
pClone
|
||||
);
|
||||
//}
|
||||
}
|
||||
|
||||
// Gesamthöhe von <h2> und folgendem <p> (falls vorhanden)
|
||||
const totalH2PHeight = h2Height + pHeight;
|
||||
|
||||
// Prüfen, ob <h2> und <p> auf die aktuelle Seite passen
|
||||
if (this.currentPageHeight + totalH2PHeight > this.maxPageHeight) {
|
||||
// Neue Seite beginnen
|
||||
if (currentPage) {
|
||||
this.pages.push(currentPage);
|
||||
}
|
||||
currentPage = element.outerHTML;
|
||||
this.currentPageHeight = h2Height;
|
||||
} else {
|
||||
// <h2> zur aktuellen Seite hinzufügen
|
||||
currentPage += element.outerHTML;
|
||||
this.currentPageHeight += h2Height;
|
||||
}
|
||||
|
||||
// Nun das nachfolgende <p> Element hinzufügen, falls vorhanden
|
||||
if (pHeight > 0) {
|
||||
if (this.currentPageHeight + pHeight > this.maxPageHeight) {
|
||||
// Neue Seite beginnen für <p>
|
||||
this.pages.push(currentPage);
|
||||
currentPage = children[i + 1].outerHTML;
|
||||
this.currentPageHeight = pHeight;
|
||||
} else {
|
||||
// <p> zur aktuellen Seite hinzufügen
|
||||
currentPage += children[i + 1].outerHTML;
|
||||
this.currentPageHeight += pHeight;
|
||||
}
|
||||
// Überspringen des nächsten Elements, da es bereits verarbeitet wurde
|
||||
i += 1;
|
||||
}
|
||||
} else {
|
||||
// Für alle anderen Elemente wie <h1>, <p> usw.
|
||||
const clone = element.cloneNode(true) as HTMLElement;
|
||||
this.renderer.appendChild(this.measureContainer.nativeElement, clone);
|
||||
|
||||
// Berechnung der Höhe inklusive Margins
|
||||
const computedStyle = window.getComputedStyle(clone);
|
||||
const marginTop = parseFloat(computedStyle.marginTop) || 0;
|
||||
const marginBottom = parseFloat(computedStyle.marginBottom) || 0;
|
||||
const height = clone.offsetHeight + marginTop + marginBottom;
|
||||
|
||||
// Entfernen des geklonten Elements aus dem Messcontainer
|
||||
this.renderer.removeChild(this.measureContainer.nativeElement, clone);
|
||||
|
||||
if (this.currentPageHeight + height > this.maxPageHeight) {
|
||||
// Neue Seite beginnen
|
||||
this.pages.push(currentPage);
|
||||
currentPage = element.outerHTML;
|
||||
this.currentPageHeight = height;
|
||||
} else {
|
||||
// Element zur aktuellen Seite hinzufügen
|
||||
currentPage += element.outerHTML;
|
||||
this.currentPageHeight += height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Letzte Seite hinzufügen, falls noch Inhalt vorhanden ist
|
||||
if (currentPage) {
|
||||
this.pages.push(currentPage);
|
||||
}
|
||||
}
|
||||
|
||||
print() {
|
||||
window.print();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue