spot/create.php at master · FourDizzle/spot · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<?php
include_once 'scripts/functions/main.php';
$functions = new Main();
?>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="<?php $functions->getStylesheet(); ?>">
<title>Spot - Create a New Spot</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
$(document).ready(function() {

    var newSpotFilePaths = new Array();
    var numberOfSpots = 0;
    var spotIDArray = new Array();
    var newSpotID = 0;

    function startDownload(url) {
        window.location.assign(url);
    }

    $('#get-spot').click(function() {
        if (numberOfSpots <= 8) {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("GET","generateSpot.php",false);
            xmlhttp.send();
            xmlDoc = xmlhttp.responseXML;
            spotImagePath =
                xmlDoc.getElementsByTagName("SpotImagePath")[0].childNodes[0].nodeValue;
            spotFilePath =
                    xmlDoc.getElementsByTagName("SpotFilePath")[0].childNodes[0].nodeValue;
            spotID =
                    xmlDoc.getElementsByTagName("SpotID")[0].childNodes[0].nodeValue;

            spotIDArray.push(spotID);
            newSpotFilePaths.push(spotFilePath);

            var preview = "<div class=\"newspot\" id=\""+numberOfSpots+"\">"+
                "   <img class=\"showspot\" src=\""+spotImagePath+"\" />"+
                "</div>";

            numberOfSpots++;

            $(preview).hide().appendTo('#spot-preview').fadeIn(1000);

             //on click of QR Code get its unique id and insert for to edit
             $(".newspot").click(function(){
                newSpotID = $(this).attr('id');
                $("#lightbox, #lightbox-panel").fadeIn(300);
                $("#lightbox-panel").html(
                        "<p>"+spotIDArray[newSpotID]+"</p>"+
                        "<iframe src=\"addimage.php\"></iframe>"+
                        "<a id=\"close-panel\" href=\"#\">Close this window</a>"
                );

                var addImageURL = "addimage.php?id="+spotIDArray[newSpotID];

                var xhr = new XMLHttpRequest();
                xhr.open("GET", addImageURL ,false);
                xhr.send();
                var innerHtml = xhr.responseText;

                $("#lightbox-panel").html(innerHtml);
                //Jquery for light box

                //end of light box behavior
                $("a#close-panel").click(function(){
                    $("#lightbox, #lightbox-panel").fadeOut(300);
                });
             });

             $("a#close-panel").click(function(){
                 $("#lightbox, #lightbox-panel").fadeOut(300);
             });
        }
    });

    $('#download-spots').click(function(){
        //alert(newSpotFilePaths.join('\n'));
        var filePathPost = JSON.stringify(newSpotFilePaths);
        $.post('zipup.php', { data : filePathPost }, function(data, success, xhr){
            var zipfilepath = "http://"+
                    data.getElementsByTagName("zipfilepath")[0].childNodes[0].nodeValue;
            startDownload(zipfilepath);
        }, 'xml');
    });
});
</script>
<script>

</script>
</head>

<body>
<div id="main">

	<div id="header-regular">
    	<h1 id="regular">Create a New Spot</h1>
    </div>

    <div id="navigation">
    	<ul>
        	<li><a href="index.php">Home</a></li>
            <li><a href="create.php">Create New Spot</a></li>
        </ul>
    </div>

    <div id="content">
    	<div id="newspotform" class="step">
            <h3>Generate QR Codes</h3>
            <p>Click "Generate New Spot" to create a
                unique but empty spot for you to fill
                with your art or sound. You can create
                a total of nine spots at any one time.
                Click download when you're done.
            </p>
            <button id="get-spot">Generate New Spot</button>
            <button id="download-spots">Download</button>
        </div>
        <div id="spot-preview"></div>
    </div>

    <div id="footer">
    	<div id="footer-navigation">
            <ul>
                <li><a href="index.php">Home</a></li>
                <li><a href="create.php">Create New Spot</a></li>
                <li><a href="create.php">Contact</a></li>
            </ul>
    	</div>
        <p>Copyright 2013 - Nick Cassiani</p>
    </div>
</div>
<div id="lightbox-panel">
    <h2>Lightbox Panel</h2>
    <p>You can add any valid content here.</p>
    <p align="center">
        <a id="close-panel" href="#">Close this window</a>
    </p>
</div>
<div id="lightbox"> </div>
<input type="file" name="image" id="userimage" />
</body>
</html>