TicketDesigner

by PhilQ

HTML

<div id="ticketdesigner">
    <div id="ticket">
    </div>
</div>

CSS

*, *:before, *:after {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#ticketdesigner {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background-color: #f0f0f0;
}

#ticket {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -300px;
    width: 600px;
    height: 300px;
    background-color: #fff;
    box-sizing: content-box;
    border: 1px solid #ccc;
}

JavaScript

if (!Object.keys) {
    Object.keys = function (obj) {
        var keys = [],
            k;
        for (k in obj) {
            if (Object.prototype.hasOwnProperty.call(obj, k)) {
                keys.push(k);
            }
        }
        return keys;
    };
}

var ticketsSettings = {
    id: {
        display: true,
        x: 0,
        y: 0,
        w: 100,
        h: 10,
        r: 0,
        styles: ""
    },
    title: {
        display: true,
        x: 0,
        y: 0,
        w: 100,
        h: 10,
        r: 0,
        styles: ""
    },
    subtitle: {
        display: true,
        x: 0,
        y: 0,
        w: 100,
        h: 10,
        r: 0,
        styles: ""
    },
    artists: {
        display: true,
        x: 0,
        y: 0,
        w: 100,
        h: 10,
        r: 0,
        styles: ""
    },
    venue: {
        display: true,
        x: 0,
        y: 0,
        w: 100,
        h: 10,
        r: 0,
        styles: ""
    },
    timeStart: {
        display: true,
        x: 0,
        y: 0,
        w: 100,
        h: 10,
        r: 0,
        styles: ""
    },
    timeEnd: {
        display: false},
    price: {
        display: true,
        x: 0,
        y: 0,
        w: 100,
        h: 10,
        r: 0,
        styles: ""
    }
};

var tickets = [
    {
        id: {
            value: 10001,
            datatype: "int"
        },
        title: {
            value: "Titel",
            datatype: "string"
        },
        subtitle: {
            value: "Hier de slogan",
            datatype: "string"
        },
        artists: [
            {
                id: 10,
                value: "Artiest #1",
                datatype: "string"
            },
            {
                id: 11,
                value: "Artiest #2",
                datatype: "string"
            }
        ],
        venue: {
            id: 20,
            value: "Locatie",
            datatype: "string"
        },
        timeStart: {
           ...